redesign yahoo

35
Ian Campbell My Site: 4thofficial.com Linkedin: linkedin.com/in/4thofficial P: 312.804.5749 E: ian@4thofficial.com IAN CAMPBELL YAHOO HOMEPAGE REDESIGN

Upload: ian-campbell

Post on 29-Jul-2015

936 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Redesign Yahoo

Ian Campbell My Site: 4thofficial.com Linkedin: linkedin.com/in/4thofficial P: 312.804.5749 E: [email protected]

Ian CampbellYahoo hoMEPaGE REDESIGN

Page 2: Redesign Yahoo

Ian Campbell Email: [email protected]

ThE ASSIGNMENT

how would you evolve that platform and why? Communicate your

vision through at least three pages. These pages could be a Logged

Out homepage, a Logged In homepage and Search Result Page,

but we’re open to your focusing on whatever pages you feel best

communicate your vision.

Yahoo homepage RedesignYAhOO

hOMEPAGE REDESIGN

Page 3: Redesign Yahoo

Ian Campbell Email: [email protected]

Understanding Yahoo

Understanding Yahoo

Why do people use Yahoo?

Design Review

Product Considerations

Trends

Appendix

Page 4: Redesign Yahoo

Ian Campbell Email: [email protected]

ThE YAhOO BUSINESS

YAHOO PRODUCTS (From 2011, visitors a month)

YAHOO REVENUE (From 2011, visitors a month)

YAHOO MEDIA DESTINATIONS (From 20011, visitors a

MailGroups

IMFlickr

TumblrAnswers

Maps

Display AdvertisingSearch Advertising

Other

Yahoo generated about $5.57B in revenue in the last year. From the following sources:

Yahoo homepageNews

FinanceSports

ShoppingWeather

94 million 140 million81 million 25 million74.3 million (June 2014)206 million?

43%38%19%

150 million (US visitors a month)110 million50 million 50 million18 million?

• 48% of the people in the world who use the web use some Yahoo service every month.

• Is the third most visited site in the US with 4.7 billion visits (Dec 2010).

• Yahoo mail is the second most popular email service in the world, and in the US was the most popular email service (94m versus Gmail’s 51. December 2011).

• Flickr has 3 million photos uploaded per day (Jan 2011)

• Yahoo news is the #1 in the sports, news and finance content categories.

• Yahoo’s new weather mobile app was a hit with target downloads met within 4 days of launch.

• Yahoo buys Tumblr, Qwiki and several other mobile and social companies.

SOURCE

http://www.quora.com/Who-uses-Yahoo

Page 5: Redesign Yahoo

Ian Campbell Email: [email protected]

Q&A

When was the last time you used a Yahoo service or product?

Who is Yahoo’s biggest competitor?

I surveyed 100 people (40% male and 60% female) to learn about how they use Yahoo. The demo broke down as follows: 43% are over 55, 35% are 35 to 54, 22% are 18 – 24.

2

1

Page 6: Redesign Yahoo

Ian Campbell Email: [email protected]

Q&A

Would you use Yahoo if it turned into a social network like Facebook?

If you had to use Yahoo which service would you use?3

4

Page 7: Redesign Yahoo

Ian Campbell Email: [email protected]

Q&A

What does the Yahoo brand mean to you?

Would you watch hBO movies and content on Yahoo.com?

5

6

Page 8: Redesign Yahoo

Ian Campbell Email: [email protected]

COMPETITON + BENChMARkS

TO COME TO COME TO COME

BENChMARkS

Page 9: Redesign Yahoo

Ian Campbell Email: [email protected]

PROBLEM STATEMENTS

People will watch and pay for

premier content from Yahoo. Can

Yahoo create and sign new content

deals?

Maybe there is no competition. It’s more about

the next web and how Yahoo can

define it.

how canYahoo become relevant to new younger Internet

users?

Go from offering a world of

search results to a world of context driven services.

New sources of revenue require

new thinking around

advertising and sponsorships

Current products and features are not integrated

to work together. Can UX strategy

help with the tran-sition of the user

experience?

Is there one unique feature that redefines

Yahoo? Consider Google

hangout as part of the Google+

redesign.

Page 10: Redesign Yahoo

Ian Campbell Email: [email protected]

Why do peopleuse Yahoo?

Understanding Yahoo

Why do people use Yahoo?

Design Review

Product Considerations

Trends

Appendix

Page 11: Redesign Yahoo

Ian Campbell Email: [email protected]

WhICh DEMOGRAPhIC IS MOST IMPORTANT TO YAhOO? The three personas below represent variety of new and potential Yahoo homepage users. The first is a millennial and is a challenging demographic to market to. The second is a mother who spends a lot of time on social media and ecommerce sites. The third is part of the baby boomer generation. They are heavy desktop users and have been us-ing Yahoo since the early days of the Internet.

YAhOO USER: 9 yearsLikes the content on OMG!, Yahoo fashion and Yahoo Shopping. She clicks through to them from linsk shared by friends and from her favorite blogs.

She has a Yahoo email address, but it’s not her primary one anymore. She sometimes uses Yahoo Answers when researching day-to-day questions.

She uses 2/3 apps on her phone for keeping track of tasks and from her favorite brands. She can’t remeber when she last cliecked on a banner ad, and would use Yahoo more if they offered the fun and coupons that she get from brands on Facebook.

YAhOO USER: 12 yearshe’s been using Yahoo since the early days. The Yahoo homepage is how he starts each day. he likes the finance; sports and general news right on the-homepage. Thinks the Spam filter is too severe.

he’s started using Facebook to connect with friends and family recently. he’s still not sure about how much he wants to share with Facebook.

his sales job is starting to use a lot of new digital tools. They have a smart phones app that he uses a lot.

Loves to watch sports and TV in the evening.

YAhOO USER: 2 yearsSpends most of his time on his smart phone. Connects with his friends through SMS, Twitter, Snapchat, Facebook and Tinder. he uses and likes Tumblr a lot and is curious about Yahoo buying them.

he played Yahoo Fantasy football for a couple of seasons because he had heard it was the best product/brand out there.

he has downloaded a lot of digital music and movies, but thinks the future will be just like paying for Spotify through a subscription service. he knows Yahoo has been around a long time so he has no problem paying for content from them.

DIGITAL LIFE DIGITAL LIFEDIGITAL LIFE

50% mobile, 30% tablet, and 20% desktop. 40% mobile and 60% desktop. 80% mobile, 20% Xbox, and 10% desktop.

Name: Mary MurphyAge: 35Location: ChicagoOccupation: Working mum

Name: Joe RightAge: 55Location: MinneapolisOccupation: Sales

Name: Paul JonesAge: 23Location: San FranciscoOccupation: Student

MOST IMPORTANT TO YAhOO

MILLENNIAL GEN X BOOMER

Page 12: Redesign Yahoo

Ian Campbell Email: [email protected]

MAPPING PAUL’S NEEDS TO ThE NEW YAhOO

ENTERTAINMENT

COMMUNICATION

INTERESTS SOCIAL & COMMUNITY

SEARCHIt’s 7 PM. The green circles reflect what Paul’s doing right now.

UTILITY

MOVIESEMAIL

SPORTS

VIDEOS

DAY-TO-DAY NEEDS

PAY BILLS

MUSIC

MOBILE FIRST

ShARING IS PART OF MY

IDENTITY

I DON’T VISIT hOMEPAGES

ARE MY FRIENDS hERE TOO?

UI EXPECTATION: ChALLENGE ME

NEWS COMES ThROUGh

BLOGS

ADVERTISERS OFFER VALUE

RELEVANT FEATURES

IM

JOBS

SOCIAL MESSAGING

AUTOS

DATING

PhOTOS

BLOGS

ShOPPING

ShOPPING

12

PM

6

39

T I

ME O F D

AY

O

R NIGHT

PAUL’S EXPECTATIONS

PM

AM

PM

Page 13: Redesign Yahoo

Ian Campbell Email: [email protected]

PAUL IS YAhOO’S FUTURE

Yahoo needs to take a giant step

forward or risk being irrelevant soon.

They were the first search engine, start

page and email address for many

people, but Paul’s demographic is

what their future needs to built on.

he uses technology and the Internet

differently, and has a more advanced

understanding of design (UI), content

and advertising.

Page 14: Redesign Yahoo

Ian Campbell Email: [email protected]

ThE NEW YAhOO hOMEPAGE

REVIEW PANE‘View’ content

lives here too‘Do’ content lives here too

DO PANE

SEARCH + NAVIGATION

AC

TIVITY

CREA

TE

><

VIEW OR DO CONTROLCick the arrows or use your voice to slide the UI over to reveal the full view of the rev do content.

ACTIVITY, TRACK AND STATUSThese panes open as a layer above the page content.

To capture people like Paul’s interest Yahoo will have to create a new approach to UI design. This interface works by splitting content (articles, news, etc.) on one side and products and services on the other. I’ve named them ‘Review’ and ‘Do’. Both sides of the interface inform the other. For example: Interacting with Yahoo Autos in the Do pane will trigger auto related content in the Review pane. The grey circle in the middle triggers the UI to slide to the right or left to reveal that full sides content. The audio control is a key utility that can be used across many different pieces of functionality on Yahoo properties.

UI will fit to any screen size

STATUS

Page 15: Redesign Yahoo

Ian Campbell Email: [email protected]

DO PANE

SEARCH + NAVIGATION

STATUS

14 people have checked out your job profile and you

have one new message.

Batman is on at 8 PM. Consider going to the

movies at 4 PM after lunch with John. Get Tickets.

Jason watched your hobbit game play on Flickr and added you as a friend. Invite Jason to play Hobbit.

Fare watch: We believe the Jet Blue flight reservation for

LA has now hit the lowest price. Book it.

Mary Jo would love to meet you. how’s Wednesday?

Meet at 6Meet at 8

What should I do for this trade?

Answer John’s question

appointment: John MurphyTime: 2 PM

Location: Lucky Bob’s Get there.

Upload your photo titled: kids Party to Pinterest?

To John’s ‘Birthday‘ boardTo Mary’s ‘Fashion’ board

The tags ‘Dog Parks in NYC’ just got a response.

View the answer

JOBS

MOVIES

GAME REQUEST

TRAVEL

DATING

SPORTS

CALENDAR

FLICkR

ANSWERS<

CREA

TE

AC

TIVITY

< ‘REVIEW’ PANE

hi Paul, What would you like to do?

Mon, July 5 PM

<

<

These services have a Yahoo brain

that thinks in the background on

Paul’s behalf. It seamlessly

connects all of the Yahoo

services and products together

and understands the context of

what Paul is doing now (+ past

and future).

The goal is to not present app

updates, but focus more on the

key actions. They could even

become smarter. For example: A

users Flickr photos are relevant to

most services.

The dotted line attempts to

connect two services in real-time.

It would be interesting if Paul

could drag lines between boxes

to see how the context could

change. For example: Connect

Jason’s game request to play

Fantasy football.

Minimize the individual brand

identities of products and

package them as the new Yahoo.

A voice activated UI.

Page 16: Redesign Yahoo

Ian Campbell Email: [email protected]

REVIEW PANE

SEARCH + NAVIGATION

News feature 2

News feature 2

Videos

Ticker

Tumblr Tumblr Tumblr Tumblr

Social news

News feature 1

Flickr Gallery 1

AC

TIVITY

<

CREA

TE

> ‘DO’ PANE

I’m trying to imagine a way to

interact with content that’s a

fun/game like experience (Flip-

board?). Working through visual

design would make that ideas

clearer.

Clearly Yahoo spends a significant

amount of time curating social

sites like Buzzfeed and seeing

what’s trending in real-time and

blending that content into their

content strategy. They’re generat-

ing clicks but not revenue. They

can generate more social con-

tent from within their network from

Tumblr. Getting high profile con-

tent (personalities, celebs etc.) on

Tumblr. I can also see Flickr and

Tumblr being put together in some

interesting ways for new content

ideas that are focused on travel,

sports, fashion, etc.

The Yahoo IM product should

evolve into a short form blogging

tool (Twitter and Vine).STATUS

Page 17: Redesign Yahoo

Ian Campbell Email: [email protected]

STATUS

SEARCH + NAVIGATION

AC

TIVITY

CREA

TE

STATUSMESSAGES6 new email messages

EBAY Auction watch 1

NETFLIX RELEASESFavorite movie 1

SHOPPINGShopping watch 1Auction watch 2

MOVIESLatest Releases

AUTOSPrice change from Ford.com

DATING6 people have checked you out.

Checked: Today at 6:08 PM

FINANCECheck the latest rates.

FACEBOOKSeveral friends have status uodates.

TUMBLRYou have 6 comments on your Smiling Dogs Tumblr.

Status aggregates updates from

around the Yahoo network, social

networks and around the web.

With all the different activities that

are going on in different panes it

will be important for users to know

exactly where to go for the latest

updates.

Yahoo’s killer feature could be a

redefined role for email and IM

products. Create a new product

that’s works across all devices and

platforms.

Page 18: Redesign Yahoo

Ian Campbell Email: [email protected]

SEARCh

AC

TIVITY

CREA

TE

To come.SEARCH + CORE NAVIGATIONSEARCh

Search: The Web Yahoo Content Network

Twitter | Facebook | Autos | Ebay | Amazon.com | WSJ.com

Mail Settings Mobile

VIEW PANE DO PANENYT.com hBO NFL.COM TUMBLR iTunes

SEARCh

STATUS

Page 19: Redesign Yahoo

Ian Campbell Email: [email protected]

FEATURES: YAhOO MOBILE INTEGRATION

SEARCH + NAVIGATION

STATUS

14 people have checked out your job profile and you

have one new message.

Batman is on at 8 PM. Consider going to the

movies at 4 PM after lunch with John. Get Tickets.

Jason watched your hobbit game play on Flickr and added you as a friend. Invite Jason to play Hobbit.

Fare watch: We believe the Jet Blue flight reservation for

LA has now hit the lowest price. Book it.

Mary Jo would love to meet you. how’s Wednesday?

Meet at 6Meet at 8

What should I do for this trade?

Answer John’s question

When you see the icon beside content on Yahoo you can hold your cursor over it and this box will appear. Drag the icon to the box below to create your own app.

JOBS

MOVIES

GAME REQUEST

TRAVEL

DATING

SPORTS

CREATE YOUR OWN YAHOO MOBILE APP

<

CREA

TE

AC

TIVITY

hi Paul, What would you like to do?

Mon, July 5 PM

<

<

This idea here is to allow users

of the desktop site to grab their

favorite Yahoo content and cre-

ate their own Yahoo mobile site.

It’s working in reverse where us-

ers determine their own content,

features and functionality versus a

prescribed Yahoo experience.

Yahoo can insert new styles of

ads. Several sponsors can share

entire site sponsorships.

Download your app by visiting this URL on your mobile:

Yahoo.com/SomeUrl

DRAG hERE

Page 20: Redesign Yahoo

Ian Campbell Email: [email protected]

FEATURES: MOVIE NIGhT (MODE: DATE NIGhT)

STATUS

SEARCH + NAVIGATION

CREA

TE

AC

TIVITY

BEN & JERRYS AD

Thumbnail Thumbnail Thumbnail

Time for kisses!

Thumbnail Thumbnail

ShARE

NEW AD FORMATBetter sponsor integration that’s aligned to context. For example:

TV mode > Romance > Sat-urday night > Users (We know who the 2 users are - Age, in-terests, movie title, etc.).

Contextual sponsor integration: Ben & Jerry’s ice creamhow to order: It’s voice activated (or clicked)Real-time: Delivered by the local retailer within 30 minutes and charged to your Yahoo account.

MODEThe UI is now in a TV mode. Share the UI with another device, monitor or TV (Similar to the new WII). The red frame background is for sponsor integration.

Date night mode introduces several romance related features. For example: Create social content (personalized sharing moments) that can be shared with friends and then they auto-delete after several seconds. It should be fun. Partner with Snapchat to capture a frame from a movie and add a personal message (It’s date night so use your imagination).

Page 21: Redesign Yahoo

Ian Campbell Email: [email protected]

DESIGN REVIEW

Understanding Yahoo

Why do people use Yahoo?

Design Review

Product Considerations

Trends

Appendix

Page 22: Redesign Yahoo

Ian Campbell Email: [email protected]

hOMEPAGE REVIEW

Trending NowI really like ‘Trending Now’; it’s the closest ‘real-time’ style feature. Is it possible to see more information about what the trends are? Perhaps fans can sign-in with social site accounts (Facebook Connect, Twitter, etc.) or Yahoo can partner with other content sites (Buzzfeed) to feature their content and trends.

Search + Mail + News + AdtThe model and experience is clear to see. A repositioning of Yahoo requires rethinking of the model. Search the web? Perhaps it’s more about searching across the Yahoo network of content and sites.

Creating contextThis menu of products and services could be presented in a different way. If Yahoo understands how people are using them they can be integrated and intertwined into the experience differently. For example: If I’ve searched for a subject related to automotive then offer features and content related to that search.

Page 23: Redesign Yahoo

Ian Campbell Email: [email protected]

hOMEPAGE REVIEW

Navigation designAlthough I don’t agree with it I’m assuming the repeating of the primary navigation at the top of the page and the left menu are to facilitate a mobile view of the page. Also, there are three ‘Mail’ buttons at the top of the page. Weather

The strategy behind the new Yahoo IOS mobile app should continue into this experience. For example: brining in the relevant photography from Flickr to set content on location, weather, interests or news. It’s also worth promoting and linking through to the app here.

Page 24: Redesign Yahoo

Ian Campbell Email: [email protected]

hOMEPAGE REVIEW

Hidden ContentMany pieces of content are hid-den with menus and arrows (+email alerts are hidden). The reality is that most people don’t click on things that they can’t see. It’s unlikely a news headline will catch someone’s attention if they have to click to find it. The most valuable content that’s validated through social media and general analytics should be present.

Page 25: Redesign Yahoo

Ian Campbell Email: [email protected]

hOMEPAGE REVIEW

Social Relevance There’s no social call-to-actions or context for what your friend’s are liking/sharing for any of the content featured on the page.

ADIt’s time for a new and more innovative ad platforms versus a display ad that has a minimal click-through. New ad models are directly integrated within the content and have a smarter context.

Page 26: Redesign Yahoo

Ian Campbell Email: [email protected]

PRODUCTCONSIDERATIONS

Understanding Yahoo

Why do people use Yahoo?

Design Review

Product Considerations

Trends

Appendix

Page 27: Redesign Yahoo

Ian Campbell Email: [email protected]

DETAILED USER JOURNEYS

TYPICAL WEEkDAY hOMEPAGE INTERACTION TYPICAL WEEkEND hOMEPAGE INTERACTION

TASKSEmail/IMSearch

CONTENTTrendsNewsWeatherSportsFinanceCeleb/social

ADS

PRODUCTSNewsSportsFinanceWeatherGamesGroupsAnswersFlickrJobsAutosShoppingTravelDating

TASKSEmail/IMSearch

CONTENTTrendsNewsWeatherSportsFinanceCeleb/social

ADS

PRODUCTSNewsSportsFinanceWeatherGamesGroupsAnswersFlickrJobsAutosShoppingTravelDating

08 10 12 02 04 06 08 10 12 08 10 12 02 04 06 08 10 12AM AMPM PMFREQUENCY FREQUENCY

P

P P

P P

P

P P

P P

P P

P P

P P

P P

M

M M

M M

M M

M M

M M

M M

J

J J

J J

J J

2

Page 28: Redesign Yahoo

Ian Campbell Email: [email protected]

ASSUMPTIONS

BRAND hOMEPAGE USER EXPERIENCE REVENUE

To come To come To come

Page 29: Redesign Yahoo

Ian Campbell Email: [email protected]

OUR MVP

This is the beginning of a new Yahoo digital ecosystem that works across platforms, screens and touch devices. Yahoo will be a media company

with innovative new forms of advertising products that work across TV, desk-top, social and mobile. To a fan the experience will feel like there’s a smart skin around them that is aware of their location and the context of what’s

going on around them.

Going forward Yahoo will be creating content and partnering with premier content creators like hBO and _______. They’ll use Tumblr as the primary so-cial mechanism to create user generated content. Services and products

will be updated and some will intertwined to create new experiences.

Page 30: Redesign Yahoo

Ian Campbell Email: [email protected]

Trends that are helping define the next generation of digital products and services

Understanding Yahoo

Why do people use Yahoo?

Design Review

Product Considerations

Trends

Appendix

Page 31: Redesign Yahoo

Ian Campbell Email: [email protected]

DIGITAL TRENDS: PhOTOS & VIDEOS

Taking a photo or video captures a moment. We now capture ev-ery moment (Even easier than making a phone call)

VIDEO: 100 hours per minute uploaded to YouTube

SOURCE: MARY MEEkER INTERNET TRENDS

ShARING: Photos

Page 32: Redesign Yahoo

Ian Campbell Email: [email protected]

DIGITAL TRENDS: ShARING

ShARING: Tumbr is moving fast ShARING: People are sharing more and more content

SOURCE: MARY MEEkER INTERNET TRENDS

Sharing every many aspects of our lives is how we stay connected with each other. Brands need to create that context for

their fans to engage with them and their friends.

Page 33: Redesign Yahoo

Ian Campbell Email: [email protected]

DIGITAL TRENDS: WhY MOBILE?

COMMUNITY: People are helping each otherMOBILE: Connected, excited, curious and connected

SOURCE: MARY MEEkER INTERNET TRENDS

Smart phones help us stay connected, give us found time, and al-low us to be productive and multitask. Mobile apps allow to create

content and then add a layer of community to the experience.

Page 34: Redesign Yahoo

Ian Campbell Email: [email protected]

DIGITAL TRENDS: CONNECTED DEVICES & WEARABLE

SENSOR: Connecting experiencesWEARABLE: The next stage of the Internet

SOURCE: MARY MEEkER INTERNET TRENDS

A competitor of Yahoo’s made Google Glass and software that can drive a car. Smart phones have been the perfect education for the upcoming smart devices. All kinds of brands and services are about

to change.

Page 35: Redesign Yahoo

Ian Campbell Email: [email protected]

Appendix

Understanding Yahoo

Why do people use Yahoo?

Design Review

Product Considerations

Trends

Appendix