WHOOTALK IDD by Mark Smith

WH OO TALK INTERACTIVE DESIGN DOCUMENT

TABLE OF CONTENTS

5 INTRODUCTION 6 PERSONA DEVELOPMENT 9 COMPETITIVE ANALYSIS 16 FUNCTIONAL SPECIFICATIONS 17 FEATURE MATRIX 18 USER SCENARIO 19 USER FLOW 20 SITE STRUCTURE 22 WIREFRAMES 36 STYLE GUIDE 40 MOCKUPS

WH OO TALK

Introduction

As humans we have come a long way through history to arrive where we are today with the unlimited amounts of information at our fingertips. Social Media has changed the way we communicate on a daily basis and some say we are smarter than we have ever been before. However, there are some that doubt this heightened “intelligence” and point out the flaws with which our programs can lock us into a behaviour of shorter attention spans. We consume information at an accelerated rate rarely leaving us time to dive deep into content that may matter more than we think. This Web 2.0 era has its way of bringing up an important issue one day and the next day it is suddenly forgotten about. We are very individual about the way we use the web but Linux and Wikipedia has shown us the incredible potential groups can utilize this interconnectedness. WHOOTALK.com aims too exploit this incredible realization once agian by leveraging short attention spans and the notion of ”group think”. It aims to avoid the lock-in which contricts our evolution of communication and wishes to embrace self governence, transparency, and accountability. We have the potential to make group decisions by unifying around brilliant ideas and bypassing the politics of the elite. This is a tool to reignite the power of democracy and bring the people back together where the belong; as a collective governing body. WHOOTALK may be the first few steps toward our unified collective mind. -Mark Smith

WH OO TALK

Persona Development

Primary Persona

John Beach

"I lied once. I was asked if I have voted and I said Yes, I thought they would think less of me if I said No." John Beach is a 24-year-old college student who lives in downtown Vancouver and does not know what he wants to do with his life. He and his friends regularly hang out at local bars and talk about girls and the latest popular videos they have seen on the Internet. John, on occasion, talks about politics when he or one of his friends brings up the topic but does not really care about the political issues that revolve around his city or country. He does show a little more interest when there is a big event that effect everyone or affects him personally. There is little to no emotional attachment involved because when he was younger he found learning about politics very boring and has witnessed the politicians in power not keep the promises they make. He believes if he did contribute more to the issues that involve politicians it would not make a difference because he feels so disconnected and on a different level from them they would just make decisions behind closed doors against what the people want. Deep down John would like to make a difference but just does not know how. His opinion is that there needs to be more transparency with the system and to have political issues in general be more simple to understand. John stays connected with his friends through Facebook and on the go through his iPhone. He likes having real-time information that is up to date and current so he does not feel out of the loop with his friends. Life Goal: To be recognized as well known person with lots of friends, married to a beautiful woman and have a large amount of money in the bank before he retires. Experience Goal: Quick and simple way to ingest information. Does not want to feel stupid or bored. The way the information is presented must be exciting. End Goal: To be recognized and see how he makes a difference when he does participate in politics.

Persona Development

Persona Moodboard

WH OO TALK

Persona Development Persona Moodboard

Competitive Analysis

seeclickfix.com

SeeClickFix works by exploiting three basic principles: Empowerment. SeeClickFix allows anyone to report and track non-emergency issues anywhere in the world via the internet. This empowers citizens, community groups, media organizations and governments to take care of and improve their neighborhoods. Efficiency. Two heads are better than one and 300 heads are better than two. In computer terminology, distributed sensing is particularly powerful at recognizing patterns, such as those that gradually take shape on a street. Besides, the government can't be in all places at all times. We make it easy and fun for everyone to see, click and fix. Engagement. Citizens who take the time to report even minor issues and see them fixed are likely to get more engaged in their local communities. It's called a self-reinforcing loop. This also makes people happy and everyone benefits from that.

Notes This is a locally aimed website. Its title communicates its simplicity and effectiveness and delivers it all. This is a tool that allows the public and the local government to communicate in ways like never before. It has many features that allows citizens to watch their neighborhood and quickly solve simple issues that come up. Seeclickfix also uses a point based system but falls short on their website design. This website is aimed at an audience who are locally engaged but misses the target on the apathetic.

WH OO TALK

Competitive Analysis

change.org Change.org is an online hub for social change. We run leading online communities for 20 major causes ranging from homelessness to women’s rights to poverty, and through a team of 100 expert writers and 3,000 nonprofit partners, we serve as the central platform for launching and promoting movements for social change on the web.

Notes Change.org does a very good job at getting people to sign petitions, spreading awareness and empowering people. They have a dedicated staff and organizations that write up petitions and spread the word. This website is for activists and it records activists actions. An action is considered pressing a button to sign a petition but it also allows users to donate to organizations. The website promotes the idea that if enough people sign a petition change will happen. Petition signature goals motivate others to spread the word and the website is architecturally well built for the amount of information it covers.

Competitive Analysis

visiblevote.us Â "Visible vote hands the power back to you" Discover the most powerful way to connect with your legislators today. Download the free app, tell Congress how you feel on any issue, and see how your vote stacks up to theirs. Visible Vote is non-partisan and unbiased service that brings greater transparency and accountability to our representative form of government.

Notes Visible vote allows politically interested people to come together and approve and disapprove their politicians. While this does allow for real-time data feedback and provides a sense of transparency, it does not hit a wide audience, instead it focus' on politically charged people leaving the apathetic unrepresented.

WH OO TALK

Competitive Analysis crowdrise.com "If you don’t give back no one will like you" Crowdrise is about volunteering, raising money for Charity and having the most fun in the world while doing it. Crowdrise is way more fun than anything else aside from being all nervous about trying to kiss a girl for the first time and her not saying something like ‘you've got to be kidding me.’ START FUNDRAISING PROJECTS Whether you're running a marathon, volunteering, or have causes that you care deeply about, create your own Fundraising Pages on Crowdrise and choose from over a million charities to raise money for. If it takes you more than a minute to create your Page, you're probably just a really slow typist. Learn More.

Notes Crowdrise tries to make volunteering and donating fun. They offer prizes that do not relate to the project. Users gain points for everything they support and redeem their points for the prizes. The website is complex and an information overload that is supported by high profile celebrities. Crowdrise does a good job of bringing volunteers and organizers together. Mark Smith created this document at Vancouver Film School © 2010 All Rights Reserved

Competitive Analysis

kickstarter.com Kickstarter is a new way to fund creative ideas and ambitious endeavors. We believe that... • A good idea, communicated well, can spread fast and wide. • A large group of people can be a tremendous source of money and encouragement. Kickstarter is powered by a unique all-or-nothing funding method where projects must be fully-funded or no money changes hands.

Notes Kickstarter uses the bottom-up approach for raising money. They are not asking anyone to commit right away. Only if a large group of people agree that the project is worthwhile that the project turns out to be successful. While kickstarter is always keeping the "backers" updated they are also providing rewards for those who donate a certain amount of money.

WH OO TALK

Competitive Analysis

likeportal.com Â Â "Make your own likeable thing. Type below..."

Notes There is a statement with a like button beside it; when it gets clicked it gets sent to Facebook. This website is important because such a small statement gets a lot of attention. Something that is obscure, short, and thought provoking gets passed around a lot easier than something in depth and complex.

Functional Specifications

Target Specifications Specification Client-Side Technologies Server-Side Technologies Screen Size

JavaScript MySQL, HTML, HTML5 and Foursquare API

Screen Fonts

Top Bar: 36px Navigation Bar: 24px Page Descriptor: 48px Filters: 21 px (Header) 18 px (Choices) Question: 18 px Agree/Disagree: 21px Rating: 16px Author and Location: 14px Any English required, other optional Firefox, Chrome, Safari that works with HTML5 XTML 1.0 standard and HTML5 Should run fine on a Mac or better Windows Machine

Color Depth Language Browser Requirements XHTML Page Client Machine

Comments

Maximum 1600x1200 In order of importance and information hierarchy screen fonts will stay within this scale 12-14-16-18-21-24-36-48

Feature Matrix

Experience Goal

Supporting/Protecting Features

“I want to be up-to-date. I want to know when it happens”

• •

Published statistics in real-time. Notifies user when what they want happens.

“I want to know if it affects my community and me.”

• •

“I want to know who follows through with what they say they are going to do” “I would like to know how I can make a difference”

•

Geolocation A map that orients itself to the users area and presents the information in context to the proper filter. Different point values assigned for different tasks. The points tell the user who the leaders are in their community Gain points while completing tasks. The major players who make a difference are recognized. Target amount of people to respond before the action to make a difference takes place. Whoots are posted to a map in the open and all decisions/next steps are made with the contribution and input of others. Initial plans for change are simple opinions, ideas and questions that people can quickly agree and disagree to. After a quantitative response target has been achieved followers are notified about what to do next. Follow up actions are a survey, a collective virtual action or a collective physical action. The actions can be informative, artistic, ecological, or an exciting event. It is all up to the initiator and the input of everyone who is collaborating.

• •

•

“I want all decisions to be made out in the open.”

•

“I want to contribute but • it must be simple and quick.” •

“The content must be exciting.”

•

Anti-Goal “I heard they took a survey a couple months ago and they still haven’t published it. When can I find out?” “I don’t know if affects me and if I know it doesn’t affect me then I don’t give a shit”

“There are points for no reason. Why would I give a damn if I gain 100 points. It doesn’t mean anything to me or anyone else.” “Its impossible to make a difference if you can never see your results and if I am the only one doing it how much of a difference can I make.” “Decisions made behind closed doors are decisions I am not aware of or care about” “The process to complex to understand and takes up too much of my time.”

“If it is boring I am not going to even bother.”

WH OO TALK

User Scenario

John Beach is at home on Facebook and he sees a post from one of his friends on Facebook. The post is a question/statement (the title of the post says Whootalk) that asks "I love graphitti, the city should stop paying for it to be removed" Underneath the statement is the question "Do you agree or disagree?" John clicks on the question and it takes him to the Main Website Whootalk.com. He clicks on a button to answer the question (I Care/I Agree). Once he clicks on this button the sight asks him to create an account and prompts him about what the whole website entails. "See what people care about in your area and take collective action." John is intrigued by what the site has to offer and signs up very simply. He looks at the map, which is the centerpiece of the site, and a message prompts him asking if he would like the site to allow it to determine his location. He allows the site to see his location and the map now shows where he is situated (Downtown Vancouver in Gastown). There are pushpins on the map and he uses the right arrow at the top right of the map to move from pin to pin. He is browsing through the pins until he comes across another users voice in Gastown that says "The Government should use this website to conduct referendums and opinion polls" John is intrigued by this comment and "Agrees" with this users opinion. After clicking agree he sees that 13 other people have participated and sees the statistics that 90% of people agree with his opinion. After he sees this statistic underneath there is a question that prompts him about how he would like to be notified. "Would he like to be notified when 10, 50, or 100 more people have contributed to this statement?" John chooses to be notified when 100 more people have contributed to the statement. It then asks in what way he would like to be notified (through Facebook, twitter, email, etc) John chooses to be notified through email. There are buttons that can connect through Facebook and twitter, which would allow him to get other people to answer to the statement by publishing his activity to twitter and Facebook streams. He sees now that he has accumulated points and is curious to what these points mean. He clicks on the point gain and it brings him to his profile where it shows his current statistics. It shows that he has contributed to 1 voice and has not produced a voice yet. It also shows that he has contributed to a voice based on politics. He gets it now that this program is keeping stats of what content he is producing and consuming. John also sees that he can now vote on people’s statements but he is now curious what it is like to make his own statement. He clicks on “Post a Whoot” and it brings him to a fresh map where he can post his pin and fill out the steps and publishes it to Facebook. John understands the process and proceeds to create a new statement. “I want ACDC to come to Vancouver” He selects the options (agree/disagree) posts the question in Gastown, selects he wants to be notified by email when every 50 new opinions have been posted and says he will create a new question when 500 people have contributed. He posts/finishes the process by tagging the post with entertainment. He notices he has gained points and John exits the site.

User Flow

WHOOTALK USER FLOW Facebook or Twitter Post We should all get together and... I think that... It would be a good idea if... By clicking the link of the post the user gets taken to WHOOTALK

Splash Page The users new window has the whoot (question,statement, or idea) inside the dialogue browser. They answer agree or disagree to the whoot. When they browse through and answer 3 more whoot’s a popup asks them if they would like to follow the whoot’s they have just answered.

View Individual Whoot The user can look at the posted whoot and find out about the author,where the whoot is located, any background information and the amount of responses and where the responses came from. From here they can answer the whoot and they can repost it back to Facebook or Twitter. Whoot Activity From the individual whoot the user can check out where the responses are coming from and see who is agreeing and disagreeing Post Suggestion If there has not been a next step initiated by the user who posted the original whoot a popup bar will allow other users to comment on what they think should happen when the target goal of responses has been reached.

Sign Up or Login Explore User continues answering whoots one at a time and post them back to facebook and twitter. Dashboard/Home View and respond to multiple whoots at once. You are also able to see your most recent answered whoots status’

Login The user has a great idea for a social cause or has just seen or read something that inspired him. He thinks up a question that can have an agree or disagree response.

Messages

Post a Whoot

By this point the user may have logged out of WHOOTALK. Days or weeks later they receive a message in their email inbox telling them they have an update on whoot #... A link takes them to their message inbox. They read the message indicating that the whoot is ready for action and the next step has been posted.

The user drags the pin to the area he is located in and fills out the post a whoot empty blanks.

Next Step The next step of the whoot is posted by the creator. It is either a physical or virtual action or an information action. The user goes out into the world and takes the next step. Upload and View Proof The user uploads the proof that they followed through with the next step and browse and see what others did.

Activity Days go by. The user comes back and checks out the activity of the responses on his whoot. He can see all around the world from where people are responding. View Suggestions The user sees the suggestions people have posted and decides is going to create the next action now. Setup Next Action The user starts the wizard and creates the first generation of the whoots action. He posts the action and logs out.

WH OO TALK

Site Structure

WHOOTALK SITE STRUCTURE Login

Splash Page

Dashboard/Home

Explore

Activity

Post a Whoot

User Name

Messages

Logout

Respond to Whoots Neighborhood Ranking Post Suggestion

View Individual Whoot

Setup Next Action

Next Step

Whoot Activity

Upload and View Proof

View Suggestions

View My Whoots

My Actions Ranking

Profile About Me

Network

History

Overall Ranking

City Ranking

Profile

Network

History

Settings

Edit Profile

Messages

Wireframes

Splash Page

! .

/ , 0 ! %

# . , 4

2 * +

( * 3 3 3

& '

(

! !

" # $

) & * +

, -

1 2 #

Wireframes

Splash Page - Login

! 3

5 , 6 !

# 3 , 8

0 * +

( * 1 1

1 1 1 %

' . '

& ' (

/ ! ! 0 1

" # $ %

# 1

23 4 4 3 3 ! ! ! 3 3" ) & * +

% 7 0

, -

WH OO TALK

Wireframes

Explore

/ # ' - 4 ' +

! # . & , " - ) $

% & % ' ' % ( ) * % +

# .

! " #

0 1 2

/ !

26 61 0

560 61 0

Wireframes

Dashboard/Home

! "

# $

% $

1 1 - + &

+ " $ &

( " )

* + * + ) % ' ! , 4

& ' $ % % " / $ 6

' '5

% ---

+ $0 + $ ! $ & 3%

% 0 1 0 0 - ' 2 % 0

$ / $ # &

)

) . !

$ / $ # &

)

% ---

) . !

5 % " / $ 6

+ $0 + $ ! $ & 3%

% 0 1 0 0 - ' 2 % 0

$ / $

# & + $

# &

)

) . !

$ / $ # &

% ---

)

) . !

WH OO TALK

Wireframes

Activity

' ( # $ ) * $ "

" # $

% %

!!!"

Wireframes

" ,/- & . # . '

* -

6 *

" # - -

0 ! - 1 ! * 1 * ) --

$!" % & ' 2 - - -

& () ( * % (* ) + %

5!" 2 - & 6 & ' 77 877 777 " * & '

# . - -

- / -! ! ) ! *

4!% 3 % , "

% 3

8! , %

& . -

" - '

) .

" -- / - % - '

* ) . - & * , %

, ) % - ! - - . !

WH OO TALK

Wireframes

Viewing Individual Whoot

5 6

2 * 7 $ 8 2 +

! " # $

1* !

%& ' ' ( ) *' $ !

$ +

./ 0 "

* ,,,

%" $ 11 $( $ 1 $ 2 2 , ) 3 $ 3 3 3 , 4 $ $ 2 # # 2 2 ,

$ 1 $ 2 2 , ) 3 $ 3 3 3 , 4 $ $ 2 # # 2 2 , $ 1 $ 2 2 , ) 3 $ 3 3 3 , 4 $ $ 2 # # 2 2 , $ 1 $ 2 2 , ) 3 $ 3 3 3 , 4 $ $ 2 # # 2 2 ,

Wireframes

Individual Whoot - Unsubmitted Next Step

) 7

0 , 8 $ 9 0 :

! " # $

/, !

%& ' ' (

0 # $ , , 1

2 6 $ ,

/ , 1

*- . "

%" $ // $(

) $ $ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

$ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

WH OO TALK

Wireframes

Next Step Wizard

) 8

0 , 6 $ 9 0 7

! " # $

/, !

%& ' ' (

* 2 $ , / , / ,

*1 $ / 6 $ , , / $ 7

3 , / 0 ,

, 0

0 0

! / $ $ 1 8 1

.1 / , / 7

*- . " 2 . %" $ // $(

) $ $ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

$ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

Wireframes

Next Step Wizard - Survey

) 9

0 , 6 $ : 0 7

! " # $

/, !

%& ' ' (

. $ / 6 & *1 $ / 0 ,

! 2

# $ 2

# / $

# , / /

.1 / 3 7 +,

81 $ / 7

*- . "

%" $ // $( $$ 2

1 # / / / 3 7

) $ $ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

$ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

WH OO TALK

Wireframes

Next Step Wizard - Physical Collective Action

) 9

0 , : $ ; 0 8

! " # $

/, !

%& ' ' (

. " $ 0 , $ 0

*1 7 , , , $ $ 8

9 4 $ , / $

.1 $ , / $ , , $ 8

*- . " 61 4 , / $ / / , 0 8

7 <*

7 <.

7 <6

7 <

%" $ // $(

$$ 7

2 6

) $ $ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

$ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

Wireframes

Next Step Wizard - Physical Collective Action Cont.

) 7

0 , 8 $ 9 0 :

! " # $

/, !

%& ' ' (

6 " $ 0 , $ 0

1 4 / , 0 $ :

-1 ) $ 0 , / $ 0 : +,

# # 0 $

*- . "

;1 $$ , $

%" $ // $(

0 #

) $ $ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

$ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

WH OO TALK

Wireframes

Next Step Wizard - Physical Virtual Action

) 8

0 , 9 $ : 0 7

! " # $

/, !

%& ' ' (

. " $ 0 0 $ 0

*1 6 , , $ $ 7

8 4 $ 0 / $ +,

.1 $ , / $ , , $ 7

*- . "

;1 ) , 0 , $ 0 0 7 %" $ // $(

) $ $ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

$ / $ 0 0 1 2 3 $ 3 3 3 1 4 $ $ 0 # # 0 0 1

Style Guide

Colour Palette R30

C86

G114

M52

B182

L46 A-6 B-44

Web(#1e72b6)

R46

C73

L21

G53

M61

A-3

B53

Y62

B-1

K57

Web(#2e3535)

R69

C73

L52

G1127

M46

A-1

B203

B-46

Web(#457fcb)

R81

C65

L34

G81

M57

B81

Y56

K34 R116

C58

Web(#515151) L72

G198

Y100

A-45 B70

Web(#74c600)

R223

L56

G89

M79

A51

Y100

B66

Web(#df5900)

Style Guide

Colour Palette R122

C55

L76

G210

A47

Y100

B73

Web(#7ad200)

K0 R231

L58

G92

M78

A53

B41

Y98

B56

Web(#e75c29)

K1 R127

C55

L72

G194

A-38

B65

Y100

B55

Web(#7fc241)

K0 R232

L58

G93

M77

A53

Y100

B68

Web(#e85d00)

K1 R189

C26

L78

G193

M18

A-1

B196

Y18

B-2

Web(#bdc1c4)

Web(#eaeaea)

K0 R234

L93

G234

B234

WH OO TALK

Style Guide

Typography

Conduit ITC Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890@#$%&*()_+

Conduit ITC Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890@#$%&*()_+

Conduit ITC Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890@#$%&*()_+

Style Guide

Layout

•

• • •

The most important element of this website is the map. When browsing through whoots on the map the map is clear. When dealing with other elements of the site the map will have a lower transparency. Dialogue whoot browser is centered on the main explore page. When ranking is triggered on the map the dialogue slides to the left. When viewing the profile or any utility the profile header with the username, location and amount of points always stays at the top. Important element sizes(pixels): o Dialogue whoot browser 629x433 o Dashboard whoot panel 695x152 o Whoot history boxes 266x152 o Top orange bar 1600x74 o Navigation bar 1600x40 o Black bar top 1600x157 o Black bar bottom 1600x230

Imagery Whoot Pictures: 155x155, Profile Header Picture: 240x238, Network and Messages Pictures: 112x97

Voice/Tone Language and tone depend upon users input.

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Mockups

WH OO TALK

Created by Mark Smith (403)542-9809 interconnectedmediums@gmail.com