1. Collaboration Between
Design and Engineering @ Yahoo!
December 2012

2. +
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

3. +
About Design

4. +
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.

5. +
Inspired by design leader
 Inspiration is the problem or
I
Inspiration
opportunity that motivates the
search for solutions.
 Ideationis the process of
I
Ideation
generating, developing, and testing
ideas.
 Implementation is the path that
I
Implementation
leads from the project stage into
lives of people.

6. +
Design At Yahoo!
I
Inspiration
I
Ideation
I
Implementation
Build
Strategic Project Design
Inspiration Ideation
Planning Planning
Evaluate

7. +
About Engineering

8. +
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.

9. +
Engineering At Yahoo!
 Yahoo! runs SCRUM.

10. +
Collaborative Design/Engineering
Process At Yahoo!

11. +
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.

12. +
Design & Development Process
Build
Strategic Project Design
Inspiration Ideation
Planning Planning
Evaluate

13. +
Process: Strategic Planning
 Competitor Insights.
 Customer Insights.
 Company Insights.
 Biz Partnerships.
 Biz strategy context.
Strategic  Business case development.
Planning
 Business group goals. User needs
Solutions
Hypothesize
 Corporate goals alignment. Design
 Opportunity space.
 Portfolio planning.

14. +
Process: Inspiration
 Cultural Trends.
 Diary Studies.
 Ethnographic Research.
 Market Analysis.
 Market Positioning.
Inspiration
 Persona Development.
 UX/Brand Metrics.
 UX Benchmarking.
 User Interviews.

15. +
Process: Ideation
 Biz strategy context.
 Ideation workshop.
 IxD principles alignment.
 Opportunity landscape.
 Prototyping.
 User Interviews.
Ideation
 Vision Concepts.
 Visual designs.

16. +
Process: Project Planning
 Budget planning.
 Cross function alignment.
 Design Requirements Doc (DRD).
 Master project list.
 Portfolio planning.
 Project space & documents.
Project
 Project plans. Planning
 Research roadmap & budget.
 Resource planning.
 Scope planning.
 Version planning.

17. +
Process: Design
 Concept design.
 Design Language alignment and feedback.
 IA & IxD design.
 Illustrations.
 Prototyping.
 Research concepts & usability.
Design
 User stories & hypothesize.
 Visual design.

18. +
Process: Build
 Code user stories.
 Design QA (tech, Vis, ID).
 Production graphics.
 Research: Quantitative.
Build
 Code QA.
 Performance QA.

19. +
Process: Evaluate
 Bucket testing.
 Customer support metrics.
 Data analytics/BI.
 Evaluate KPI/goals.
 Satisfaction surveys.
 UX Benchmarking.
 Usability studies.
 User feedback.
Evaluate
 Heat maps.

20. +
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.

21. +
Use Case 1: Photo Lightbox

22. +
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.

23. +
Action: Leverage Feedback
APR
JUL
2
2 Listen
 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.

24. +
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

25. +
Use Case 2: Sentiment Slider

26. +
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.

27. +
Action: Fast and Iterative Design 1
Design 2  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.
Design 3  How? Enable frictionless share
 Get better advertiser metrics Final Design
 Why? brands get feedback on how
their campaign is doing.
 How? Better instrumentation.

28. +
Result: Sentiment Slider
APR
JUL
2
2
 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

29. +
Use Case 3: TW Mobile Front Page

30. +
Problem: Older Than Now
APR
JUL
HTML
 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.

31. +
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

32. +
Result: TW Mobile Homepage
APR
JUL
2 3 Months TTM
 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