Collaboration between design and engineering
Transcript of Collaboration between design and engineering
![Page 1: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/1.jpg)
Collaboration Between
Design and Engineering @ Yahoo!December 2012
![Page 2: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/2.jpg)
+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
![Page 3: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/3.jpg)
+
About Design
![Page 4: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/4.jpg)
+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.
![Page 5: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/5.jpg)
+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.
![Page 6: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/6.jpg)
+Design At Yahoo!
Inspiration
IIdeation
IImplementation
I
Strategic Planning
Inspiration
Build
Evaluate
IdeationProject
PlanningDesign
![Page 7: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/7.jpg)
+
About Engineering
![Page 8: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/8.jpg)
+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.
![Page 9: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/9.jpg)
+Engineering At Yahoo!
Yahoo! runs SCRUM.
![Page 10: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/10.jpg)
+
Collaborative Design/Engineering
Process At Yahoo!
![Page 11: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/11.jpg)
+
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.
![Page 12: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/12.jpg)
+
Design & Development Process
Strategic Planning
Inspiration
Build
Evaluate
IdeationProject
PlanningDesign
![Page 13: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/13.jpg)
+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
![Page 14: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/14.jpg)
+Process: Inspiration
Inspiration
Cultural Trends.
Diary Studies.
Ethnographic Research.
Market Analysis.
Market Positioning.
Persona Development.
UX/Brand Metrics.
UX Benchmarking.
User Interviews.
![Page 15: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/15.jpg)
+Process: Ideation
Ideation
Biz strategy context.
Ideation workshop.
IxD principles alignment.
Opportunity landscape.
Prototyping.
User Interviews.
Vision Concepts.
Visual designs.
![Page 16: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/16.jpg)
+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.
![Page 17: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/17.jpg)
+Process: Design
Design
Concept design.
Design Language alignment and feedback.
IA & IxD design.
Illustrations.
Prototyping.
Research concepts & usability.
User stories & hypothesize.
Visual design.
![Page 18: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/18.jpg)
+Process: Build
Build
Code user stories.
Design QA (tech, Vis, ID).
Production graphics.
Research: Quantitative.
Code QA.
Performance QA.
![Page 19: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/19.jpg)
+Process: Evaluate
Evaluate
Bucket testing.
Customer support metrics.
Data analytics/BI.
Evaluate KPI/goals.
Satisfaction surveys.
UX Benchmarking.
Usability studies.
User feedback.
Heat maps.
![Page 20: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/20.jpg)
+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.
![Page 21: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/21.jpg)
+
Use Case 1: Photo Lightbox
![Page 22: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/22.jpg)
+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.
![Page 23: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/23.jpg)
+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
![Page 24: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/24.jpg)
+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
![Page 25: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/25.jpg)
+
Use Case 2: Sentiment Slider
![Page 26: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/26.jpg)
+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.
![Page 27: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/27.jpg)
+
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
![Page 28: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/28.jpg)
+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
![Page 29: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/29.jpg)
+
Use Case 3: TW Mobile Front Page
![Page 30: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/30.jpg)
+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
![Page 31: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/31.jpg)
+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
![Page 32: Collaboration between design and engineering](https://reader033.fdocuments.us/reader033/viewer/2022052909/5598aa951a28abb93f8b45e2/html5/thumbnails/32.jpg)
+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