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?


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.


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.


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


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


2 user profiles & scenarios


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


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.


3 wireframes3.1 MOBILE WIREFRAMES

3.2 WEBSITE WIREFRAMES


3.1 MOBILE WIREFRAMES


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.


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


ADD LOCATIONS

732 Castro St. Solana B

apply

LOCATION FRIENDSNAME POST

add

add more...

CREATE

Settings

MW


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



apply

Andrew [email protected]

Ben [email protected]

Daniel [email protected]

Matt [email protected]

Phonebook

CREATE

MW

Settings

POST EVENT TO WEBSITE

ON OFF

apply


CREATE

MW

Settings

ADD FRIENDS FROM FACEBOOK CHOOSE TO KEEP THE EVENT PUBLIC OR PRIVATE


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


caption posted in here...





settings nearby

list map









VIEW THE CONTENT BY TIME (MOST RECENT AT TOP)

CHANGE ANY PROFILE SETTINGS


settings nearby

PROFILE SETTINGS

upload new imageor

take photo

browse

Jen Calica

*******

Username:

Password:

email: [email protected]

apply


settings nearby

list map









UPLOAD AN IMAGE, CHANGE USERNAME, PASSWORD, ETC.

SELECT ‘ADD CONTENT’ TO EVENT


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



settings nearby

list map

Posted by Jen Calica | 7:32 pm







Ol' 55 by Tom Waits has been added


settings nearby

list map









1

VIEW THE SONG ADDED TO THE EVENT NEW MESSAGE



settings nearby

list map





I dare you to talk to the blonde girl...!




Hey Jen,

Should we move to another bar?

Joseph

Inbox1

Sent Create

1

settings nearby

Aa

VIEW MESSAGE SELECT ‘ADD PHOTOGRAPH’


settings nearby settings nearby

Look at Matt dancing!

ADD CAPTION

save cancel

TAKE PHOTOGRAPH ADD CAPTION



settings nearby

list map










settings nearby

list map









VIEW THE IMAGE IN THE EVENT CHECK IN


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


settings nearby

list map





Jen has checked in to Tony's Jacal




CHECK IN TO NEARBY PLACES VIEW CONTENT ON MAP



settings nearby

list mapmaplist

4

6

8

+

–

VIEW THE PLACES THE EVENT HAS GONE AND THE NUMBER OF MEDIA CONTENT


3.2 WEBSITE WIREFRAMES


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.


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 >



55 >



40 >



34 >



28 >



98 >



10 >

>

28

98

Create My Events


MEWEMWLOCATION



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


MEWEMWLOCATION



ANDY’S WEDDING

Filter Gallery

Sort

Create My Events>



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


4 influences4.1 MOBILE APPLICATION

4.2 WEBSITE COMPONENT


4.1 MOBILE APPLICATION



newsfeed/wall

FACEBOOK (IPAD VERSION)


events page

FACEBOOK




event postings

FACEBOOK


search places and ‘check in’

FOURSQUARE


select a nearby place



FOURSQUARE

users leave tips and

suggestions for other users

places are categorized


find coupons and things to do nearbylarge and hand-drawn buttons

NEW YORKER GOINGS ON


user can earn points from doing challenges

GOWALLA


find coupons and things to do nearby


categorized happenings

WHERE

an event in the area



search nearby events follow other users who post events

EVENTFUL

search users




search users

a user selects either images (left) or sounds (right)

SNAPSHOTS OF PROVENCE – INTERFACE TO VIEW IMAGES AND SOUNDS OF PROVENCE, FRANCE



image viewer (left) with filters/categories on the (right)


SNAPSHOTS OF PROVENCE


view by place




view of video or image




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



view of all images in database


THE WHALEHUNT


‘timeline’ view of all images


THE WHALEHUNT


image view


THE WHALEHUNT


‘feelings’ are represented by different colors

WE FEEL FINE – DYNAMIC DATA VISUALIZATION TO VIEW ‘FEELINGS’ FROM BLOGS



incoming text ‘murmers’


WE FEEL FINE


‘feelings’ are represented by different colors


WE FEEL FINE


visualization of metro riders in 2006

MTA RIDERSHIP – INTERACTIVE DATA VISUALIZATION OF SUBWAY RIDERS BETWEEN 1903–2006



clickable subway stops show us the number of riders,

movable timeline on right side


MTA RIDERSHIP


stori · 2012. 3. 22. · stori is an application that addresses this issue. viewers can see all of...

Documents