Collaboration Between

Design and Engineering @ Yahoo!December 2012

+Agenda

About Design

About Engineering

Collaborative Design/Engineering Process At Yahoo!

Use Case 1: Photo Lightbox

Use Case 2: Sentiment Slider

Use Case 3: TW Mobile Front Page

Q&A

+

About Design

+Design As We Know It…

In the early days design focuses on just layout, then comes

Look & Feel, some End-to-End, and lastly UI (User Interface).

Recent trending around UX (User Experience), UCD (User

Centered Design) and Design Thinking (empathy, creativity,

rationality).

Design is a discipline and process that make what the

business produces better for the people who use it.

+Inspired by design leader

Inspiration

I Inspiration is the problem or

opportunity that motivates the

search for solutions.

Ideation

I Ideation is the process of

generating, developing, and testing

ideas.

Implementation

I Implementation is the path that

leads from the project stage into

lives of people.

+Design At Yahoo!

Inspiration

IIdeation

IImplementation

I

Strategic Planning

Inspiration

Build

Evaluate

IdeationProject

PlanningDesign

+

About Engineering

+Engineering As We Know It…

Most companies are running

project with traditional project

management/ waterfall

development methodology.

Tools and processes came

about to standardize on

development. E.g. RUP.

Characteristic are:

Immutable requirements.

Long release cycles.

Little to none business/user

feedback prior to release.

+Engineering At Yahoo!

Yahoo! runs SCRUM.

+

Collaborative Design/Engineering

Process At Yahoo!

+

Joint Design and Development Process

Combine the SCRUM methodology with Design discipline.

Respond faster to user changes while controlling risk.

Increase quality of products/features that meet user needs.

Continuously improving the process and team dynamic.

Work at a sustainable pace.

More predictable delivery.

+

Design & Development Process

Strategic Planning

Inspiration

Build

Evaluate

IdeationProject

PlanningDesign

+Process: Strategic Planning

Strategic Planning

Competitor Insights.

Customer Insights.

Company Insights.

Biz Partnerships.

Biz strategy context.

Business case development.

Business group goals.

Corporate goals alignment.

Opportunity space.

Portfolio planning.

User needs

Solutions

Hypothesize

Design

+Process: Inspiration

Inspiration

Cultural Trends.

Diary Studies.

Ethnographic Research.

Market Analysis.

Market Positioning.

Persona Development.

UX/Brand Metrics.

UX Benchmarking.

User Interviews.

+Process: Ideation

Ideation

Biz strategy context.

Ideation workshop.

IxD principles alignment.

Opportunity landscape.

Prototyping.

User Interviews.

Vision Concepts.

Visual designs.

+Process: Project Planning

Project Planning

Budget planning.

Cross function alignment.

Design Requirements Doc (DRD).

Master project list.

Portfolio planning.

Project space & documents.

Project plans.

Research roadmap & budget.

Resource planning.

Scope planning.

Version planning.

+Process: Design

Design

Concept design.

Design Language alignment and feedback.

IA & IxD design.

Illustrations.

Prototyping.

Research concepts & usability.

User stories & hypothesize.

Visual design.

+Process: Build

Build

Code user stories.

Design QA (tech, Vis, ID).

Production graphics.

Research: Quantitative.

Code QA.

Performance QA.

+Process: Evaluate

Evaluate

Bucket testing.

Customer support metrics.

Data analytics/BI.

Evaluate KPI/goals.

Satisfaction surveys.

UX Benchmarking.

Usability studies.

User feedback.

Heat maps.

+Process: Success Factor

To be successful you need Effective Teams.

Key principles for effective teams.

Single point of contact who is responsible.

Shared understanding at all times.

Always have deadlines.

Collaborate & communicate.

Design/Build/Evaluate.

Get in front of users quickly.

Always have each others back.

+

Use Case 1: Photo Lightbox

+Problem: Yahoo! Photo Is Boring

Limited number of Thumbnails.

User have to constantly paginate to see the photo.

WYSIWYG photo experience.

No high definition version. Uses craving for more

pixels are not satisfied.

Photo asset not fully utilized.

Photo metadata not being surfaced to give user

more context.

+Action: Leverage Feedback

Feedback

User complaints, suggestions

Engineers call out technical requirements,

limitations

Statistically identify what works and what fall short

Original Version (Top Pic).

Square photo display area (3:3).

30 Thumbnails to maximize preview.

Photo description running across asset.

Latest Version, Desktop (Bottom Pic).

Larger photo display area (4:3).

Less number of thumbnails.

Photo description running on bottom of photo.

APR

2JUL

2 Listen

+Result: Photo Lightbox

Maximize user experience/product feature on

given device (Desktop, Tablet, or Smartphone)

based on power, bandwidth, CPU/RAM

restriction as well as platform (iOS/Android)

Graceful degradation of experience

Length of photo title and description

Animation (spinner, fade in/out)

Thumbnail size/count

Friendlier to user

Improved (speedier) navigation via short-cuts

Preload lower resolution image to give quick view and

improve perception

+

Use Case 2: Sentiment Slider

+Problem: Over Design

Slider designed to solicit user interaction with

Advertising campaign providing data that are

reflection to emotion.

Actual votes tend to lean towards left and

right option.

Advertising logo deliberately sized to fit the

small space and meant to be non-intrusive.

+

Iterative Fast on following Design/Engineering themes:

Increase engagement.

Why? Makes it an interesting offering for advertisers.

How? Simplified design.

Get more coverage.

Why? improves our sell through for C1.

How? Make it really easy for editors to program the module.

Get better distribution.

Why? brands get earned media. That’s how it gets sold.

How? Enable frictionless share

Get better advertiser metrics

Why? brands get feedback on how

their campaign is doing.

How? Better instrumentation.

Action: Fast and IterativeDesign 1

Design 2

Design 3

Final Design

+Result: Sentiment Slider

New Slider works better on fewer scales. Design taken cue from user data/study

and is field tested via bucket.

Advertiser display with bigger logo. Which is visually more appealing and draws

more CTR.

Consistent emotion. Note the Slider color matches the Advertiser color. Support for

Theme is built in the new design.

+700 Sliders programmed during 2012 Olympics period

APR

2JUL

2

+

Use Case 3: TW Mobile Front Page

+Problem: Older Than Now

Basic HTML

Dinosaur age technology. Not much different than

the early days of Internet.

Minimal User Interaction

On click action. No interactive user experience

and animation.

Poor Layout

Although text is easy to read, layout is not optimal.

APR

JUL

HTML

+Action: Be Playful

Be Playful - Scenario Play

3 Teams, 5 Hours, 3 Areas

Workshop 1: Observation + Understanding

Workshop 2: Synthesis + Brainstorm

Workshop 3: Rapid Prototyping

Be The User

Current mobile FP experience and expectation

Survey loyal Yahoo! PC FP users, but 4 light and 4 heavy mobile FP users

+Result: TW Mobile Homepage

Slide-out menu

Navigation is the feature people use the most. It

should be clear and efficient.

Weather background

Weather-based background gives users

contextual emotions

The new old

Keeping the original sky blue theme and visual

treatment for familiarity

Readability & Density

Maximize content readability & density for mobile

reading

APR

2JUL

3 Months TTM