collaboration between design and engineering
TRANSCRIPT
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