Imitation: Sincerest Form of Flattery or Bad Move? (Adopting Web 2.0 Patterns)

1

Imitation: Sincerest Form of Flattery or Bad Move?Adopting Web 2.0 Patterns

John YeskoDirector, User Experience

2

About Roundarch

Roundarch is a specialized consultancy focused on designing and building websites and applications for the world’s largest organizations.

Key Facts

•We serve mainly Fortune 500 and large government organizations.

•We specialize in balancing user centered design with enterprise class-technology.

•We are a recognized leader in developing rich internet applications (RIAs).

200+ employeesin 4 offices

(and looking for more)

3

Selected Clients

Financial Services

Government

Consumer

Manufacturing

Healthcare/ Transportation

Media &Communications

4

The Setup

5

Why Are We Here?

User Experience Design Process (Very High Level)

UserNeeds

BusinessGoals

6

Helpful Suggestions

People love the customer reviews on Amazon. We need customer reviews for all our products.

We could have our customers tag everything – then we don't even need a navigation structure.

We need to incorporate Twitter!

We need a viral game, like Subservient Chicken!

7

This Presentation

• Examples of failures, successes, and lessons learned

• Goal: Get to the core characteristics of these experiences, to analyze why they do or don’t fit the project at hand

8

Examples

9

Visual Browsing

10

Visual Browsing

Inspired By:

iTunes

11

Visual Browsing

Inspired By:

Apple Desktop

12

Visual Browsing

The big idea: Quickly navigate multiple options visually

•Employ an RIA construct rather than “traditional” means of browsing

•Astound and impress the audience

•Use surface reflections liberally

13

Document Type:

Date: 07/19/10

Conceptual Wireframe Schematics

3D: Folders & FilesPrepared by:

Sample 3D Zooming/Coverflow UI

Page 2 of 3

Christa Houlahan + Ben McNeil

1104 px x 840 px

Version: 0.01

Copyright © 2008 Roundarch. All rights reserved.

Global Header

Home | Libraries | Sub Navigation TBD

Search Advanced Filters

3d Selected Folder Main Library >

GO

Shortcuts

0 Selected Items Filter Sets Accounts

# A F M T U V W Y

My LibraryMain Library

Other Library

Other Library

Top Level Folder

Top Level Folder Selected Folder

Top Level Folder

Top Level Folder

Top Level Folder

Top Level Folder

Top Level Folder

Top Level Folder

Top Level Folder

A Template Report Name

2006 A Template Report Name

F Template Report Name

M Template Report Name

Template Report Name








>>

>>

1 Level Selection:Selected Folder

0 Level Selection

Pan Left/Right on Level

14

Document Type:

Date: 07/19/10

Conceptual Wireframe Schematics

3D : Zoom(Coverflow)Prepared by:

Sample 3D Zooming/Coverflow UI

Page 3 of 3

Christa Houlahan + Ben McNeil

1104 px x 840 px

Version: 0.01

Copyright © 2008 Roundarch. All rights reserved.

Global Header

Home | Libraries | Sub Navigation TBD

Search Advanced Filters

3d Selected Folder Main Library >

GO

Shortcuts


2006

Contains:0 Folders25

Templates


Asset

Valuation Projections

Asset Details

Margin

Trading Gain/Loss

Foreign Exchange Gain/Loss

>>

>>

Properties/Actions TBD

0 Selected Items Filter Sets Accounts

# A F M T U V W Y

My LibraryMain Library

Other Library

Other Library

Top Level Folder

Top Level Folder Selected Folder

Top Level Folder

Top Level Folder

Top Level Folder

Top Level Folder

Top Level Folder

Top Level Folder

Top Level Folder

Zoom SelectedCoverflow

Mode

15

16

Inspired By:

The-Affair.com

17

18

19

Visual Browsing

Challenges

• Only works when the target is visually distinguishable from the others

• Sometimes traditional, familiar constructs work best

20

21

Prepared by:

Date / Version:

Document:

John Yesko

© 2008 Roundarch, Inc.

July 21, 2010

Sears Holiday Wireframes +

1.00

Page: 28 48of

Wish Registry: Browse Stories28

Notes[GLOBAL HEADER]

Heroes at Home Wish Registry

Tom P.

200 stories from 14,987 families

Holiday Home | Heroes at Home | The Search for the Golden Wish Ticket | Sears Best Wishes

Amy L.

When we talked to military families, these are the kinds of stories we heard.

A Christmas to Remember for Our Kids

Loving the Sights and Sounds of Christmas

Spread the Word

Get Your Heroes at Home Badge

Tell a FriendSpread the word by forwarding this page.

Continue

Separate multiple email addresses with commas

Even More Ways You Can Help

Enter email address(es)

What the Military and Their Families Are Wishing For

We asked military families what items they need this holiday season, and here’s what they told us:

Rank Item Popularity

1 Kids' shoes

2 Boy's pajamas

3 Boy's sweater

4 Boy's pant

5 Girl's pajamas

6 Girl's coat

7 Boy's coat

8 Girl's pant

9 Girl's shirt

10 Girl's dress

See the Top 100 Wishes >

Donate Now

Help fulfill the holiday wishes of military families by contributing here.

Amount: $ .00 Proceed With Donation

Post a Message of Support

Tim R. Jose C. Mohammed R.

James X. Mary T. Ulysses T. Wanda S. Kevin E. James E. Derrick R.

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

1

23

4

5

6

7

[CONTINUED BELOW]

Version of holiday navigation without “Don’t Just Give a Gift, Grant a Wish”

DONATIONS MADE TO THE WISH REGISTRY ARE NOT TAX DEDUCTIBLE AND WILL BE USED TO PURCHASE SEARS GIFT CARDS WHICH SHALL BE DISTRIBUTED EQUALLY TO ALL REGISTERED FAMILIES .

22

23

Social Life

24

Social Media

25

Social Media

26

Personal Social Media Usage

My Big Four

Business networking

Keeping track of friendsUX knowledge gathering

Storing and sharing photos

Stalking old girlfriends

Personal Professional




27

Helpful Client Tips

We want to build a community. It should be like the Facebook of risk managers.

…of physicians.

…of travel enthusiasts.

…of ship captains.

28

Social Media in Business

The big idea: Use social media constructs to increase engagement

•Create a place where like-minded individuals can:

– Communicate– Share knowledge– Keep track of each other

•Increase efficiency over old school methods

– E.g., announcement and alerts

•Commerce angle: Keep them coming back, and eventually buy stuff

29

Air Force Portal

• User interface to GCSS-AF and enterprise services

• Enterprise Web content management service

• Enterprise search

• Shared workspaces

• Secure instant messaging

30

The Promise of a “Social” Portal

• Better content– Accurate (self-healing)– Timely– Trusted (auditable)

• Improved discovery– Content, applications, people

• Increased/easier customization

• Maintain and create connections

• Increased/easier sharing

• Engage Gen Y – “Digital Natives”– Tools they are accustomed to and desire– Recruitment and retention– Increased efficiency

31

Air Force Portal 2.0

Social media had been banned from the DoD

• Confidential information• Time waste• Bandwidth waste

32

Air Force 2.0 Portal

33

Comment

Share Links

Update status

“Wall” Concept

Post Messages

Air Force 2.0 Portal

Manage connections

3434

External widgets

External websites

RSS Feeds

AFP Content

AFP Widgets

My Network


35


“Push” communications

Status updates, messages and shared links from across My

Network

36

Air Force Portal

“… Our knowledge operations managers, along with the new tools at their disposal, can significantly enhance support to the warfighter and our ability to leverage data, information, and knowledge to achieve knowledge dominance and information superiority."

Maj. Gen (Ret) John W. Maluda, former Director ofCyberspace Transformation and Strategy,

Warfighting & Integration and CIO

37

Timeline

2007

DoD Ban on Social Media2007?

2008 2009 2010

Portal 2.0 CompletedDec. 2009

Portal 2.0 LaunchedMay 2010

DoD Lifts Ban on Social MediaApril 2010

38

Social Media in Business

Challenges

• Limited perceived usefulness– What’s in it for me?

• Competition from existing social media

– Time and motivation to maintain another presence (integration helps)– Critical mass of friends / connections– Expectations set by other social media

39

Prepared by:

Date / Version:

Document:

John Yesko


July 23, 2010

People Finder UX Design

0.90

Page: 4 7of

Search4

NotesGlobal Navigation

Global Navigation

(Enter name)

All Countries

Find a Colleague

Search

Get Some Help

Location:

(Choose Country First)

All Expertise:

AllBusiness Unit:

AllPractice Area:

Search

Knowledge Ambassadors Only

Search by Name Search by CategoriesOR

(Enter name)

First Name * Last Name / Surname

* Required Field

At least one selection is required.

All Countries

Search

Location:

(Choose Country First)

All Expertise:

AllBusiness Unit:

AllPractice Area:

Search

Knowledge Ambassadors Only

At least one selection or alast name is required.

(Enter name) (Enter name)

First Name Last Name / Surname

Alternate

40

Prepared by:

Date / Version:

Document:

John Yesko


July 23, 2010

People Finder UX Design

0.90

Page: 6 7of

Detailed Profile - Public View6

NotesGlobal Navigation

Global Navigation

Public view of Detailed Profile page, viewable by any employee.

Notes will go here1

George Glass

All 38 Connections >

Connections

Roger ThomasYou

Fred StubbsShared

JuanEpsteinShared

FredWashington

Arnold Drummond

Shirley Wilson

Senior Analyst

Aon Risk Services

Information Technology

Email:

Office:

Mobile:

Fax:

Expertise

[Photo]

Invite to Connect

Headquarters

200 E. Randolph St.

4th Floor

Chicago, IL 60610

It’s 5:32 p.m. here

[email protected]

312-251-9978

312-381-9010

312-251-9114

Title:

Business Unit:

Practice Group:

Actuarial Risk Assessment Knowledge Ambassador

Investment BankingLevel 3

Personal Interests

Statistics

Navigating the company

Manchester United FC

Groups

Footprint Group

Web Workgroup

13 years at [Company]

Male

Birthday: May 11

Status

Trying to finish this report so I can go on vacation! 8 July 2010

Communicator: Available

Reporting Structure

George Glass

Doug SimpsonManager

Keith PartridgeDirect Report

Eddie CorbettAdmin

Lamont SanfordDirect Report

Louise JeffersonDirect Report

Report an Issue with this Profile

Personal Links

LinkedIn Profile

My Facebook Page

Personal Website

Search Component

Invite to Connect X Remove as Connection

Not connected: Connected:

41

The Web 2.0 Junk Drawer

42

Sears Christmas Across America

The big idea: Use the power of the crowd to source popular holiday gifts

•Go around the country asking people about Christmas, and get their thoughts on video

•Want it to “go viral”

•Visitors can rate, comment on, and tag the videos

•The content of the videos can be used to get gift ideas

43


Inspired By:

Advertising Professional Productions

Amateur Content

44


Inspired By

45


With a Dash Of:

TaggingRatings and

Reviews

Recommendations

46

Recommendations

Amazon

47

48

Christmas Across America

Challenges

• Little control over videos– Length– Subject matter– Quality

• Tagging can get out of control, plus many people don’t get it

• What’s the incentive to participate as a content author?

• Converting amateur video into selling stuff

49

Prepared by:

Date / Version:

Document:

John Yesko


July 19, 2010

Holiday 2009 UX Design +

1.09

Page: 8 64of

More Christmas Across America: Main8

Notes

< S E A R S H E A D E R >

< S E A R S F O O T E R >

< H O L I D A Y N A V I G A T I O N >

Narrow Videos by...

Topics:Best Christmas Gift Ever

Wishes for this ChristmasFavorite Christmas Tradition

Age: GenderKids Teens Adults Female Male

Rating:0-1 1-2 2-3 3-4 4-5

Reset Filters

More Christmas Across America

Hit the road to share America’s best Christmas stories.

Click a [pin icon graphic] to see the videos we captured!

Put Yourself on the MapAdd your Christmas video and you could win big prizes!

The main page of the More Christmas Across America experience shows a high-level map of the available videos. Users may filter the list by various means, to get to a smaller subset of videos.

237

84

123

235

89

986

96

89

458

865

125

58

223129

Map Grid

8,400 Videos

MapAll available videos are represented either by a single dot or a “cluster,” which represents an aggregate of multiple vidoes. The individual dots are used in areas where the density of videos is low enough to see individual points on the map. In more dense areas, a cluster is displayed in a “balloon” or similar graphic device. Rolling over or clicking on either a dot or number balloon displays additional information, as shown on following pages. The default view is the full United States.

After the map loads, various random videos will momentarily display popup information, to encourage users to interact with the map (see video rollover style later in this document).

Map/Grid toggleMap view is as shown. Grid switches the view to display a gallery of video thumbnails, as shown on More Christmas Across America: Grid View.

Put Yourself on the MapGoes to Put Yourself on the Map.

FiltersFive groupings of filters are displayed to allow users to narrow down the set of videos currently displayed. Clicking any filter link refreshes the map (or grid) display with the videos meeting that criteria. See Filter Details for more information.

Reset Filters returns all filters and the corresponding map or grid view to their default state.

Need to determine final lists for “Topics” and “Gifts and Wishes.”

Number of videosDynamically displays the current number of videos, according to the selected filters. If no filters are engaged, the number is the total number of videos in the system.

Zoom / pan controlStandard Google Maps-esque slider control. Users may click/drag the slider or click the plus and minus icons to change the zoom level of the map, in pre-defined increments.

The pan controls are used to move the map view up, down, and side to side.

1

2

3

4

5

6

-

+

24

Chicago

New York

Boston

Miami

Atlanta

St. LouisDenver

Houston

Dallas

Los Angeles

San Francisco

Seattle

256

237

Gifts and Wishes:Appliances Clothing Computers Electronics

Family Food Games Health Home Jewelry

Lawn & Garden Music Money Outdoors Peace

Pets Sports & Fitness Tools Toys

All U.S. States

Location:

50

Prepared by:

Date / Version:

Document:

John Yesko


July 19, 2010


1.09

Page: 9 64of

More Christmas Across America: Filter Details9

NotesNarrow Videos by...

Topics:Best Christmas Gift Ever



Rating:0-1 1-2 2-3 3-4 4-5

Reset Filters

8,400 Videos

Gifts and Wishes:Appliances Clothing Computers Electronics




FiltersThe type size of each filter link represents the relative number of videos associated with it.

When a filter is selected:· The current result set of videos (map or grid view) is refreshed to

only show those videos that match the filter. · The number of videos displayed above the filters is refreshed.· The filter no longer functions an active link. · A small “X” icon is displayed next to the selected filter. Clicking

the “X” acts as an “undo” for the filter, returning it to its default state and refreshing the result set accordingly.

Other filters are refreshed. Those that match at least one of the videos in the current result set remain active. If a filter is no longer relevant because it does not match any videos in the current set, it is grayed out / deactivated. The type size of any filter links does not change when filters are selected.

TopicsThe three “Topic” filters are always the same three, in the same order, that are asked of the video participants. These filters are exclusive of each other, i.e., if one is selected all of the others must be grayed out because any given video is only associated with one of the topics.

RatingFive distinct rating ranges are displayed, corresponding to the average of all user ratings for each video. By design, they overlap slightly (e.g., an even”3" rating is included in both the third and fourth ratings ranges.

AgeThree distinct ranges are displayed, relating to the ages of the “stars” of the videos. One video may be associated with multiple ages.

GenderGender relates to the “stars” of the videos. The “Gender” tags are assigned by the administrator during upload. One video may be associated with multiple genders.

LocationThe default is “All U.S. States”; the dropdown contains each state with at least one video in the current results set. Selecting a state narrows the results set to videos whose origin is that state, and (if in “Map” view) pans and scales the map to show that entire state.

Gifts and WishesThis filter set is comprised of the pre-determined list of gift or wish topics, in alphabetical order. Each video is associated with one or more “Gifts and Wishes” tags. The tags include specified product verticals from Sears.com, as well as a few “intangible” wishes, e.g., “peace.”

1

2

3

4

5

1

2

3

45

VARIOUS FILTERSENGAGED

6

Narrow Videos by...

Topics:Best Christmas Gift Ever (390) x



Rating:0-1 1-2 2-3 3-4 x 4-5

Reset Filters

124 Videos

Gifts and Wishes:Appliances Clothing Computers x Electronics



Pets Sports & Fitness Tools Toys7

All U.S. States

Location:

All U.S. States

Location:

6

7

51

52

Prepared by:

Date / Version:

Document:

John Yesko


July 19, 2010


1.09

Page: 11 64of

More Christmas Across America: Grid View11

Notes




Narrow Videos by...

Topics:Best Christmas Gift Ever (390) x



Rating:0-1 1-2 2-3 3-4 x 4-5

Reset Filters

58 Videos

Gifts and Wishes:Appliances Clothing Computers x Electronics




All U.S. States

Location:

More Christmas Across AmericaMore Christmas Across America Main

Worst Christmas Gift EverKevin, Boulder, CO

[Topic][Name] [City, State]

Page 2 of 6

The grid view displays all videos that meet the user’s filter criteria. Pagination allows for display of a high number of results across several pages.









58 Videos

Video gallery8-10 videos are displayed per page. Each video in the grid view includes:· Thumbnail: click goes to individual video page· Topic name· Star(s) of video (first name)· City, State· Static star icons, representing average rating in one-half star

increments

Clicking any of the above goes to the Individual Video page.

The order of videos in the grid view is random (within the selected filter set).

Video count and paginationThe total number of videos in the current result set is displayed as static text. As filters are applied or deactivated, the number is refreshed.

The current page is indicated, followed by “of” and the total number of pages needed to house the current active set of videos. Forward and back arrows / icons are included to the left and right, which move one page forward or back at a time.

FiltersFilters function as they do on the map view, with the exception that the grid view is refreshed with any selection.

OrderOptions within dropdown menu are:· Random (default)· Most recent· Highest rated · Lowest rated· Most active (most ratings submitted)

Selecting an option from the dropdown re-orders the videos and displays the selection in the dropdown.

1

32

2

3

1

Put Yourself on the MapAdd your video on your thoughts about Christmas, and you could win big prizes!

RandomOrder:

4

4

Map Grid

53

Prepared by:

Date / Version:

Document:

John Yesko


July 19, 2010


1.09

Page: 12 64of

More Christmas Across America: Individual Video12

Notes




Gift Ideas

Polaris Edge LX120 12" Bicycle$129.99

More

Mantis Raptor 24" Boys Bicycle$149.99 $129.99

More

Star Wars Clone Wars Blaster Game$47.99

More

Front Porch Classics Baseball$110.99

More

Breaking Away DVD$12.99 $9.99

More

Skechers Boys Phalanx - Black/Silver$24.99

More

More Christmas Across America

Best Christmas MemoryStarring Kevin in Boulder, CO

More Videos with...Best Christmas Gift EverBikesDVDsKidsBoysThis Contributor

Put Yourself on the MapPost a CommentRating: Click to rate!

Views: 467

Joe, Chicago, IL (Today) That’s really funny. Also, I didn’t realize Sears had bicycles. Now I’m definitely going to buy one there. I wonder if they have a service where I can buy it online, and have my nephew in Idaho pick it up at the store...

Maria, Des Moines, IA (8/25/09) I want to adopt Kevin. I would make him get a haircut though. This gives me some great gift ideas for my own friends and family!

Kendra, Los Angeles, CA (8/24/09) I wish I could get some gift recommendations based on the meta data inherent in this video. Oh wait, there’s some off to the right. Sweet!…

…

[Continue with all approved comments]

More Comments

More Christmas Across America Main | Back to Map

This page shows an individual video. Users can get involved by rating or commenting on the video. Additionally, we show related videos and gift ideas based on the content tagged in the video.

Contributed by Erin M. ErinM [MySears icon]

[Sears watermark]

Back to Map / GridThe link reads Back to Map or Back to Grid, depending on how the user reached this video. In either case, the link goes to the most recently viewed instance of the map or grid view.

TitleEach video is listed first with the “topic” title, i.e., one of the five standard questions. The next line shows “Starring” followed by the name or names entered by the submitter. Finally, the city and state.

ContributorThe contributor is listed with the words “Contributed by,” followed by first name and last initial.

MySears community membersIf the contributor is a MySears community member, his or her MySears user name is displayed after the first name / last initial, as a link to her profile page on MySears.com, with a small MySears icon.

Video playerStandard embedded YouTube video player with controls for play, pause, etc. All videos include a Sears and Road Trip watermark. When a video concludes, the Replay button occupies the player area.

RatingGraphic display of average of all ratings, rounded to the nearest half star. By rolling over and clicking a star, the user can submit a rating for the video as well.

ViewsTotal number of views of this video.

Post a CommentLaunches Comments overlay as shown on Ratings and Comments.

Put Yourself on the MapGoes to Put Yourself on the Map page.

CommentsAll comments that have been submitted and approved are displayed, most recent first. By default, the most recent 20 are shown. More Comments adds 20 more to the bottom of the list, etc. going back in time indefinitely. Each comment is preceded by the submitter’s first name, city, and state; as well as either “Today” or the date of publishing if previous to today.

Continued on next page...

1

2

3

4

5

6

7

8

[Program name watermark]

0

54

55


Approach: Include “2.0” elements, but…

• Keep videos focused on a few main ideas

• Do a lot of the work behind the scenes – instead of depending on users– Control tagging

• Offer prizes for the “best” videos

• Match up gift ideas with video content as best we could– Allow for “no matches”—don’t always recommend a gift

56

57

58


Why It Didn’t Work

• Big problem: social media requires people!

– Weren’t able to fund “roving reporter”

– Good idea to off-load the work to the crowd…

– ...but not enough critical mass to make the data smart

• Users weren’t too interested in the videos unless it was someone they knew.

• You can’t make a “viral” site.You can make a really good site, and maybe it will go viral.

59

Wrap Up

60

Considerations

Rich interface elements

• Is it better than the traditional way, or just cool and different?

• Is the audience technically sophisticated enough to “get it”?

• Are there technical limitations that make it inaccessible?

– E.g., plug-ins, browser restrictions, mobile usage, bandwidth, etc.

61

Considerations

Social media

• Does the critical mass of people exist?

• Do they have the time and motivation to participate in another network?

• Is it already being done better with existing sites? Can it integrate with them?

62

Considerations

Other “2.0” elements

• Comments and reviews - can the brand or person withstand flamers?

• Are there enough participants to build aggregate data?

• Are there social, legal, or security ramifications to opening things up?

• Does tagging make any sense?

63

Thank You

John [email protected]: @jyesko

[email protected]