process book

26
PROCESSBOOK REVAMPING YAHOO!’S WEBSITE

Upload: sarah-peng

Post on 29-Mar-2016

213 views

Category:

Documents


0 download

DESCRIPTION

Process Book for revamping Yahoo!'s website and mobile app.

TRANSCRIPT

Page 1: Process Book

PROCESSBOOKR E V A M P I N G Y A H O O ! ’ S W E B S I T E

Page 2: Process Book
Page 3: Process Book

3STRATEGY

4DESIGN

1

2

PROBLEM

RESEARCH

Page 4: Process Book

1PROBLEM

According to Business Insider, Yahoo!’s search market is “dropping like a stone.” The site has been described as “outdated and stale, lacking in its mobility to keep up with current web trends.”

Yahoo!’s website is outdated.

“OUTDATED AND STALE, LACKING IN ITS MOBILITY

TO KEEP UP WITH CURRENT WEB TRENDS.”

Page 5: Process Book

Yahoo! Inc. operates a web portal that provides digital services for users ranging from news, to mail, finance reports, chat messaging and online shopping. The site grew rapidly in the 1990s for it was way ahead of its time when first launched, but it has not been updated since.

2RESEARCH

Who, what, when, where, why?

Page 6: Process Book

3STRATEGY

Make Yahoo! more efficient by optimizing its interactivity, enhancing user engagement, and modernizing its visual content.

Transform Yahoo!’s interface to be more personable. Empower the user with customization tools and connecting them to their social media sites. Yahoo!’s platform would cater to users more intimately, having everything they would need conveniently displayed on their dashboard.

GETT

ING

STAR

TED

SITE MAP

Page 7: Process Book

Feature changes include setting up a sign-in account, adding customization pages that allow users to decide which site portals they want displayed on their page, and connecting social networking accounts to allow interaction with friends, follower and connections through Yahoo!’s platform.

Note: This site map accounts for the sites and pages that were redesigned. Only select portal site were chosen to be redesigned.

SITE MAP

configure what sites/news departments you want available on your dashboard

SIGN IN

s ign- in .yahoo .com

set up your social media accounts(Facebook, Twitter, Instagram)

ACCOUNT SET UP

YAHOO! HOME

FLICKR

PHOTOSTREAM

PHOTOPREVIEW

SHOPPINGLANDING PAGE

WOMEN’S CLOTHES

WOMEN’SOUTERWEAR

FINANCENEWSLANDING PAGE

ARTICLECHAT

PREVIEW

BASIC FACEBOOK

PROFILE

CHATMAIL (INBOX)

MAIL PREVIEW

CUSTOMIZE

Page 8: Process Book

CORPORATE, CLEAN, ORGANIZED

This look would utilize the content to emphasize Yahoo’s identity. The design is quiet and the information is the primary focus.

INFORMATION-HEAVY, TECHY, SLEEK GRAPHICS, FUTURISTIC

This look and feel caters to those who enjoy working with heavy content and information (programmers, analysts, reporters). This look reinforces the multifacted functions of Yahoo! with an updated futuristic approach.

The structure of this look would work best for Yahoo Finance and News/Information.

MOOD BOARDS

The voice for Yahoo!:

informativeorganized modern

Page 9: Process Book

FLAT GRAPHICS, PRIMARY COLORS, BOLD, VISUAL

Appealing to a wide mass audience. Design is refreshed and constrasts Yahoo’s current site which is stale and outdated.

After researching Yahoo!’s current target audience, it’s became clear that their audience is business savvy, work in office environments, and use primarily PC operating systems. These people need to be up to date with news, media and information.

Page 10: Process Book

INSPIRATION

What are the significant features on other websites?

Page 11: Process Book
Page 12: Process Book

WIRE FRAMES

< Current Yahoo! home page layout as of 1/24/13.< Annotations of things that need to be changed

Page 13: Process Book
Page 14: Process Book
Page 15: Process Book
Page 16: Process Book
Page 17: Process Book
Page 18: Process Book

4DESIGN

Welcome to Yahoo!’s newly designed site. We are delivering the same service with a refreshed interface.

CONTINUE TO YAHOO!

Bringing ideas to life. Yahoo!’s trademark purple is used as the primary color for the site. To give Yahoo! a stronger and modern presence, bright colors are used and assigned to different portal sites. It amplifies Yahoo!’s liveliness and dynamism.

Every page is carefully inspected to optimize the users’ experience. Cusomization sytems were designed to allow users to have full control of what they want on their Yahoo! platform. So, when signing in, the user’s dashboard would show the portals they want to use, and hide the ones they don’t. News and information are filtered to cater the user’s interests. And with Facebook and Twitter connected, users can share and access information with friends from their Yahoo! account.

Page 19: Process Book
Page 20: Process Book

Chat with friends from your Facebook! Once you connect your social media sites, Yahoo! will import your friends list onto your chat list.

Page 21: Process Book

Prioritize mail with the “high priority” inbox. Now you won’t miss important messages. Don’t go too crazy with the color labeling!

Page 22: Process Book

Site portals have been designed to be more interactive and have a striking liveliness with bold graphics and bright colors.

Page 23: Process Book
Page 24: Process Book
Page 25: Process Book
Page 26: Process Book