stori · 2012. 3. 22. · stori is an application that addresses this issue. Viewers can see all of...
Transcript of stori · 2012. 3. 22. · stori is an application that addresses this issue. Viewers can see all of...
-
A n d r e w E l l i s www.andrewellis.org
s t o r i
http://www.andrewellis.org/
-
1 overview
2 user profiles & scenario
3 wireframes
4 influences
5 visual designCO
NT
EN
TS
-
overview | user profiles & scenarios | wireframes | influences | visual design
1 overview
-
QUESTIONS
What is the problem we are solving? Why do people need to use this?
What will we do to drive people to the application? How will we make money?
What will you need as a team to pull this off?
overview | user profiles & scenarios | wireframes | influences | visual design
-
QUESTIONS
What is the problem we are solving? Why do people need to use this?
The problem is that it’s difficult to view all the photographs and videos that we take of an event—or
happening—in one spot. Social media networks, such as Facebook, allow us to create and invite
friends to events. However, the contents of the event cannot be viewed as an event. Instead, the con-
tent comes in on a wall by each user; it is not organized and therefore provides us with no real ‘story’
of the event.
stori is an application that addresses this issue. Viewers can see all of the content within the context
of the event. They can view it in three ways: by place, profile, or time.
By place, we view the content on a map (where things are geotagged) to get a sense of how an event
can move. This would be useful to view the movement of a bachelor party for example, or even the
progress of large scale demonstrations such as the Arab Spring.
Viewing the content by profile shows us the unique perspective of an attendee. And viewing by time
simply gives us an indication of when things took place. Any story has these characteristics: a linear
series of events, characters, and a sense of where things took place.
overview | user profiles & scenarios | wireframes | influences | visual design
-
QUESTIONS
What is the problem we are solving? Why do people need to use this?
The problem is that it’s difficult to view all the photographs and videos that we take of an event—or
happening—in one spot. Social media networks, such as Facebook, allow us to create and invite
friends to events. However, the contents of the event cannot be viewed as an event. Instead, the con-
tent comes in on a wall by each user; it is not organized and therefore provides us with no real ‘story’
of the event.
stori is an application that addresses this issue. Viewers can see all of the content within the context
of the event. They can view it in three ways: by place, profile, or time.
By place, we view the content on a map (where things are geotagged) to get a sense of how an event
can move. This would be useful to view the movement of a bachelor party for example, or even the
progress of large scale demonstrations such as the Arab Spring.
Viewing the content by profile shows us the unique perspective of an attendee. And viewing by time
simply gives us an indication of when things took place. Any story has these characteristics: a linear
series of events, characters, and a sense of where things took place.
overview | user profiles & scenarios | wireframes | influences | visual design
-
QUESTIONS
What is the problem we are solving? Why do people need to use this?
The problem is that it’s difficult to view all the photographs and videos that we take of an event—or
happening—in one spot. Social media networks, such as Facebook, allow us to create and invite
friends to events. However, the contents of the event cannot be viewed as an event. Instead, the con-
tent comes in on a wall by each user; it is not organized and therefore provides us with no real ‘story’
of the event.
stori is an application that addresses this issue. Viewers can see all of the content within the context
of the event. They can view it in three ways: by place, profile, or time.
By place, we view the content on a map (where things are geotagged) to get a sense of how an event
can move. This would be useful to view the movement of a bachelor party for example, or even the
progress of large scale demonstrations such as the Arab Spring.
Viewing the content by profile shows us the unique perspective of an attendee. And viewing by time
simply gives us an indication of when things took place. Any story has these characteristics: a linear
series of events, characters, and a sense of where things took place.
overview | user profiles & scenarios | wireframes | influences | visual design
-
QUESTIONS
What will we do to drive people to the application? How will we make money?
There are three bands of users: Bronze, Silver and Gold. The more people you get to come to your
event and use the app, the further up the band you go—for each stage, you increase your memory
capacity.
The entry level is 2GBs of space. If you bring 200 people to your events, you graduate to Bronze and
receive 10GBs of space. (The extra space can also be bought for a sum.) Each person who comes to
the event has to sign up/download the app.
If you bring 1000 people, you graduate to Silver and receive 40GBs of space...and if you bring 2000
people you qualify for 100GBs. (These can also be bought).
This way, stori gets users to drive their friends—or event guests—to use the app and every time they
set up an event they get the chance of building their loyalty to stori.
overview | user profiles & scenarios | wireframes | influences | visual design
-
QUESTIONS
What will we do to drive people to the application? How will we make money?
There are three bands of users: Bronze, Silver and Gold. The more people you get to come to your
event and use the app, the further up the band you go—for each stage, you increase your memory
capacity.
The entry level is 2GBs of space. If you bring 200 people to your events, you graduate to Bronze and
receive 10GBs of space. (The extra space can also be bought for a sum.) Each person who comes to
the event has to sign up/download the app.
If you bring 1000 people, you graduate to Silver and receive 40GBs of space...and if you bring 2000
people you qualify for 100GBs. (These can also be bought).
This way, stori gets users to drive their friends—or event guests—to use the app and every time they
set up an event they get the chance of building their loyalty to stori.
overview | user profiles & scenarios | wireframes | influences | visual design
-
QUESTIONS
What will you need as a team to pull this off?
Product Development and Management
This would include Strategy, UX/IxD, Engineers and Creative
Operations Marketing and Sales
overview | user profiles & scenarios | wireframes | influences | visual design
-
A LIKELY TEAM
Andrew Stuck
Director and founder of Rethinking Cities
Rumiana Williams
Junior Designer for R/GA
Joseph Liberty
UX Designer for BFG Interactive
Kasim and Kaom Te
Developers for Tekk Innovations
Kent Millard
Architect, Designer and Educator
Pol Pla i Conesa
Interactive Designer/Programmer
Matthew Fleischer
Writer/Journalist
Steve Ellis
Sales/Acquisitions for Telestream
overview | user profiles & scenarios | wireframes | influences | visual design
-
2 user profiles & scenarios
overview | user profiles & scenarios | wireframes | influences | visual design
-
NAME
Jen Calica
LIKES
Socializing, Friends & Family,
Art, Design, Cooking
PROFESSION
Fashion Designer
APPLICATION
Wants to easily connect with
friends and see content from
the event in one spot
WEBSITE
See what’s happening and
meet new people
NAME
Steve Ellis
LIKES
Projects, Computers, Games,
Gardening
PROFESSION
Director of Acquisitions
APPLICATION
Take photos of his travels and
share them with his family
WEBSITE
View his content and where
he has traveled, see what’s
happening in a new city
NAME
Ian Perry
LIKES
Socializing, Networking, Dancing,
Travel
PROFESSION
Club Owner
APPLICATION
Meet his patrons, share his
photos and get people interested
in his club
WEBSITE
See content added by his patrons
every night
overview | user profiles & scenarios | wireframes | influences | visual design
-
USER SCENARIO
Jen creates an event for her sister’s birthday. She signs into Facebook, Google +, Twitter, and
Foursquare to post her event, share her media content, and to find and invite her friends. At the
event she can check in, add photos, videos, text messages, and find songs through Shazam. Anyone
in the event can do the same. She can then view the content as it is being uploaded on the phone by
profile, time (wall), and by place (map). If the event is posted to the stori website, users can view the
content as it’s being uploaded and ask to be invited.
overview | user profiles & scenarios | wireframes | influences | visual design
-
3 wireframes3.1 MOBILE WIREFRAMES
3.2 WEBSITE WIREFRAMES
overview | user profiles & scenarios | wireframes | influences | visual design
-
3.1 MOBILE WIREFRAMES
overview | user profiles & scenarios | wireframes | influences | visual design
-
OVERVIEW
The objective of the mobile application is allow people to connect with one another, document an
event, and to view the content as it is happening by time or by place.
overview | user profiles & scenarios | wireframes | influences | visual design
-
create nearby
MeWe
NAME
Jocelyn's Birthday
LOCATION FRIENDSNAME
apply
POST
CREATE
save cancel
Settings
MW
CREATE AN EVENT OR SEARCH NEARBY POSTED EVENTS
CREATE A NAME
overview | user profiles & scenarios | wireframes | influences | visual design
-
ADD LOCATIONS
732 Castro St. Solana B
apply
LOCATION FRIENDSNAME POST
add
add more...
CREATE
Settings
MW
LOCATION FRIENDSNAME POST
f
apply
INVITE FRIENDS
invite by email...
Find friends on Foursquare
Find friends on Facebook
Find friends on Google +
Find friends on Twitter
Find friends in Phonebook
!
CREATE
Settings
MW
ADD LOCATION(S) FIND AND INVITE FRIENDS THROUGH VARIOUS EXISTING SOCIAL NETWORKS
overview | user profiles & scenarios | wireframes | influences | visual design
-
LOCATION FRIENDSNAME POST
apply
Andrew [email protected]
Daniel [email protected]
Matt [email protected]
Phonebook
CREATE
MW
Settings
POST EVENT TO WEBSITE
ON OFF
apply
LOCATION FRIENDSNAME POST
CREATE
MW
Settings
ADD FRIENDS FROM FACEBOOK CHOOSE TO KEEP THE EVENT PUBLIC OR PRIVATE
overview | user profiles & scenarios | wireframes | influences | visual design
-
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Andrew Ellis | 7:32 pm
Posted by Ben Eckman | 7:14 pm
Posted by Joseph Liberty | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
caption posted in here...
caption posted in here...
caption posted in here...
caption posted in here...
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Andrew Ellis | 7:32 pm
Posted by Ben Eckman | 7:14 pm
Posted by Joseph Liberty | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
caption posted in here...
caption posted in here...
caption posted in here...
caption posted in here...
VIEW THE CONTENT BY TIME (MOST RECENT AT TOP)
CHANGE ANY PROFILE SETTINGS
overview | user profiles & scenarios | wireframes | influences | visual design
-
settings nearby
PROFILE SETTINGS
upload new imageor
take photo
browse
Jen Calica
*******
Username:
Password:
email: [email protected]
apply
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Andrew Ellis | 7:32 pm
Posted by Ben Eckman | 7:14 pm
Posted by Joseph Liberty | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
caption posted in here...
caption posted in here...
caption posted in here...
caption posted in here...
UPLOAD AN IMAGE, CHANGE USERNAME, PASSWORD, ETC.
SELECT ‘ADD CONTENT’ TO EVENT
overview | user profiles & scenarios | wireframes | influences | visual design
-
settings nearby
Aa
settings nearby
add song cancel
SHAZAM
listening....
ADD PHOTOS, TEXT, VIDEOS, OR FIND SONGS WITH SHAZAM
SEARCH AND ADD SONG WITH SHAZAM
overview | user profiles & scenarios | wireframes | influences | visual design
-
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Jen Calica | 7:32 pm
Posted by Ben Eckman | 7:14 pm
Posted by Joseph Liberty | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
caption posted in here...
caption posted in here...
caption posted in here...
Ol' 55 by Tom Waits has been added
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Jen Calica | 7:32 pm
Posted by Ben Eckman | 7:14 pm
Posted by Joseph Liberty | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
caption posted in here...
caption posted in here...
caption posted in here...
Ol' 55 by Tom Waits has been added
1
VIEW THE SONG ADDED TO THE EVENT NEW MESSAGE
overview | user profiles & scenarios | wireframes | influences | visual design
-
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Andrew Ellis | 7:32 pm
Posted by Ben Eckman | 7:14 pm
Posted by Joseph Liberty | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
I dare you to talk to the blonde girl...!
caption posted in here...
caption posted in here...
caption posted in here...
Hey Jen,
Should we move to another bar?
Joseph
Inbox1
Sent Create
1
settings nearby
Aa
VIEW MESSAGE SELECT ‘ADD PHOTOGRAPH’
overview | user profiles & scenarios | wireframes | influences | visual design
-
settings nearby settings nearby
Look at Matt dancing!
ADD CAPTION
save cancel
TAKE PHOTOGRAPH ADD CAPTION
overview | user profiles & scenarios | wireframes | influences | visual design
-
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Jen Calica | 7:32 pm
Posted by Jen Calica | 7:14 pm
Posted by Joseph Liberty | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
Look at Matt dancing!
Ol' 55 by Tom Waits has been added
caption posted in here...
caption posted in here...
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Jen Calica | 7:32 pm
Posted by Jen Calica | 7:14 pm
Posted by Joseph Liberty | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
Look at Matt dancing!
Ol' 55 by Tom Waits has been added
caption posted in here...
caption posted in here...
VIEW THE IMAGE IN THE EVENT CHECK IN
overview | user profiles & scenarios | wireframes | influences | visual design
-
settings nearby
NEARBY PLACES
CHECK IN
Fidel's Restaurant and Bar
Don Chuy's Bar
Pizza Port
Belly Up
Fletcher Cove Beach
Rudy's Tacos
Annie's Deli
...
Tony's Jacal
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list map
Posted by Jen Calica | 7:32 pm
Posted by Jen Calica | 7:14 pm
Posted by Jen Calica | 7:10 pm
Posted by Andrew Ellis | 7:00 pm
Jen has checked in to Tony's Jacal
Look at Matt dancing!
Ol' 55 by Tom Waits has been added
caption posted in here...
CHECK IN TO NEARBY PLACES VIEW CONTENT ON MAP
overview | user profiles & scenarios | wireframes | influences | visual design
-
Jocelyn's Birthday732 Castro St.Solana Beach, CA 92075
settings nearby
list mapmaplist
4
6
8
+
–
VIEW THE PLACES THE EVENT HAS GONE AND THE NUMBER OF MEDIA CONTENT
overview | user profiles & scenarios | wireframes | influences | visual design
-
3.2 WEBSITE WIREFRAMES
overview | user profiles & scenarios | wireframes | influences | visual design
-
OVERVIEW
The website has two objectives
1
To allow people to see what’s happening , where it’s taking place, and to join the fun (get an invitation
to the event).
2
To view the content after the event in one spot from all contributors by time, place, and profile of the
contributor.
overview | user profiles & scenarios | wireframes | influences | visual design
-
MEWEMWLOCATION
Welcome Steve | log Out
80
55
34
25
40
e.g. San Francisco, CA
NEARBY EVENTS
List Details Favorites
Filter Gallery
Sort
E V E N T N A M Elocation address
Started 8:00pm Ends 1:00am
80 >
E V E N T N A M Elocation address
Started 8:00pm Ends 1:00am
55 >
E V E N T N A M Elocation address
Started 8:00pm Ends 1:00am
40 >
E V E N T N A M Elocation address
Started 8:00pm Ends 1:00am
34 >
E V E N T N A M Elocation address
Started 8:00pm Ends 1:00am
28 >
E V E N T N A M Elocation address
Started 8:00pm Ends 1:00am
98 >
E V E N T N A M Elocation address
Started 8:00pm Ends 1:00am
10 >
>
28
98
Create My Events
overview | user profiles & scenarios | wireframes | influences | visual design
-
MEWEMWLOCATION
Welcome Steve | log Out
e.g. San Francisco, CA
INVITE FRIENDS
List Details Favorites
Filter Gallery
Sort
F R I E N D N A M E
+
F R I E N D N A M E
+
F R I E N D N A M E
+
F R I E N D N A M E
+
F R I E N D N A M E
+
F R I E N D N A M E
+
F R I E N D N A M E
+
>Create My Events
LOCATION
NAME
+ ADD EVENT PHOTO
Add Street Address
EVENT STATUS Public EventAnyone can ask to be invited and can view content published on the website
Private EventContent is published only to my account and I invite guests.
EVENT TIMES
10/31/11
Starts At
11/1/11
Ends At
8:00pm
1:00am
overview | user profiles & scenarios | wireframes | influences | visual design
-
MEWEMWLOCATION
Welcome Steve | log Out
e.g. San Francisco, CA
ANDY’S WEDDING
Filter Gallery
Sort
Create My Events>
E V E N T N A M Elocation address
Started 8:00pm Ends 1:00am
80
>
F R I E N D S AT T E N D E D
F R I E N D N A M E
F R I E N D N A M E
F R I E N D N A M E
overview | user profiles & scenarios | wireframes | influences | visual design
-
4 influences4.1 MOBILE APPLICATION
4.2 WEBSITE COMPONENT
overview | user profiles & scenarios | wireframes | influences | visual design
-
4.1 MOBILE APPLICATION
overview | user profiles & scenarios | wireframes | influences | visual design
-
4.1 MOBILE APPLICATION
newsfeed/wall
FACEBOOK (IPAD VERSION)
overview | user profiles & scenarios | wireframes | influences | visual design
-
events page
FACEBOOK
4.1 MOBILE APPLICATION
overview | user profiles & scenarios | wireframes | influences | visual design
-
4.1 MOBILE APPLICATION
event postings
FACEBOOK
overview | user profiles & scenarios | wireframes | influences | visual design
-
search places and ‘check in’
FOURSQUARE
4.1 MOBILE APPLICATION
select a nearby place
overview | user profiles & scenarios | wireframes | influences | visual design
-
4.1 MOBILE APPLICATION
FOURSQUARE
users leave tips and
suggestions for other users
places are categorized
overview | user profiles & scenarios | wireframes | influences | visual design
-
find coupons and things to do nearbylarge and hand-drawn buttons
NEW YORKER GOINGS ON
4.1 MOBILE APPLICATION
user can earn points from doing challenges
GOWALLA
overview | user profiles & scenarios | wireframes | influences | visual design
-
find coupons and things to do nearby
4.1 MOBILE APPLICATION
categorized happenings
WHERE
an event in the area
overview | user profiles & scenarios | wireframes | influences | visual design
-
4.1 MOBILE APPLICATION
search nearby events follow other users who post events
EVENTFUL
search users
overview | user profiles & scenarios | wireframes | influences | visual design
-
4.2 WEBSITE COMPONENT
overview | user profiles & scenarios | wireframes | influences | visual design
search users
-
a user selects either images (left) or sounds (right)
SNAPSHOTS OF PROVENCE – INTERFACE TO VIEW IMAGES AND SOUNDS OF PROVENCE, FRANCE
4.2 WEBSITE COMPONENT
overview | user profiles & scenarios | wireframes | influences | visual design
-
image viewer (left) with filters/categories on the (right)
4.2 WEBSITE COMPONENT
SNAPSHOTS OF PROVENCE
overview | user profiles & scenarios | wireframes | influences | visual design
-
view by place
4.2 WEBSITE COMPONENT
SNAPSHOTS OF PROVENCE
overview | user profiles & scenarios | wireframes | influences | visual design
-
view of video or image
4.2 WEBSITE COMPONENT
SNAPSHOTS OF PROVENCE
overview | user profiles & scenarios | wireframes | influences | visual design
-
select and filter from 3,214 images (filters: cast, concept, context, cadence)
THE WHALEHUNT – INTERFACE TO VIEW IMAGES AND CREATE YOUR OWN STORY FROM A LARGER DATABASE OF IMAGES
4.2 WEBSITE COMPONENT
overview | user profiles & scenarios | wireframes | influences | visual design
-
view of all images in database
4.2 WEBSITE COMPONENT
THE WHALEHUNT
overview | user profiles & scenarios | wireframes | influences | visual design
-
‘timeline’ view of all images
4.2 WEBSITE COMPONENT
THE WHALEHUNT
overview | user profiles & scenarios | wireframes | influences | visual design
-
image view
4.2 WEBSITE COMPONENT
THE WHALEHUNT
overview | user profiles & scenarios | wireframes | influences | visual design
-
‘feelings’ are represented by different colors
WE FEEL FINE – DYNAMIC DATA VISUALIZATION TO VIEW ‘FEELINGS’ FROM BLOGS
4.2 WEBSITE COMPONENT
overview | user profiles & scenarios | wireframes | influences | visual design
-
incoming text ‘murmers’
4.2 WEBSITE COMPONENT
WE FEEL FINE
overview | user profiles & scenarios | wireframes | influences | visual design
-
‘feelings’ are represented by different colors
4.2 WEBSITE COMPONENT
WE FEEL FINE
overview | user profiles & scenarios | wireframes | influences | visual design
-
visualization of metro riders in 2006
MTA RIDERSHIP – INTERACTIVE DATA VISUALIZATION OF SUBWAY RIDERS BETWEEN 1903–2006
4.2 WEBSITE COMPONENT
overview | user profiles & scenarios | wireframes | influences | visual design
-
clickable subway stops show us the number of riders,
movable timeline on right side
4.2 WEBSITE COMPONENT
MTA RIDERSHIP
overview | user profiles & scenarios | wireframes | influences | visual design