Collaboration BetweenDesign and Engineering @ Yahoo!December 2012
+    Agenda       About Design       About Engineering       Collaborative Design/Engineering Process At Yahoo!       ...
+    About Design
+    Design As We Know It…       In the early days design focuses on just layout, then comes        Look & Feel, some End...
+    Inspired by design leader                       Inspiration is the problem or          I      Inspiration           ...
+    Design At Yahoo!                    I                 Inspiration                                 I                  ...
+    About Engineering
+    Engineering As We Know It…       Most companies are running        project with traditional project        managemen...
+    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 ...
+    Design & Development Process                                                               Build     Strategic       ...
+    Process: Strategic Planning                    Competitor Insights.                    Customer Insights.          ...
+    Process: Inspiration                           Cultural Trends.                           Diary Studies.           ...
+    Process: Ideation       Biz strategy context.       Ideation workshop.       IxD principles alignment.       Oppo...
+    Process: Project Planning       Budget planning.       Cross function alignment.       Design Requirements Doc (DR...
+    Process: Design       Concept design.       Design Language alignment and feedback.       IA & IxD design.       ...
+    Process: Build       Code user stories.       Design QA (tech, Vis, ID).       Production graphics.       Researc...
+    Process: Evaluate       Bucket testing.       Customer support metrics.       Data analytics/BI.       Evaluate K...
+    Process: Success Factor     To   be successful you need Effective Teams.     Key   principles for effective teams. ...
+    Use Case 1: Photo Lightbox
+    Problem: Yahoo! Photo Is Boring                     Limited number of Thumbnails.                         User have...
+    Action: Leverage Feedback                             APR                               JUL                          ...
+    Result: Photo Lightbox                     Maximize user experience/product feature on                      given de...
+    Use Case 2: Sentiment Slider
+    Problem: Over Design                     Slider designed to solicit user interaction with                      Adver...
+    Action: Fast and Iterative                                                      Design 1     Design 2               ...
+    Result: Sentiment Slider                                                APR                                          ...
+    Use Case 3: TW Mobile Front Page
+    Problem: Older Than Now                              APR                                JUL                          ...
+Action: Be Playful    Be Playful - Scenario Play        3 Teams, 5 Hours, 3 Areas            Workshop 1: Observation +...
+    Result: TW Mobile Homepage                            APR                              JUL                           ...
Upcoming SlideShare
Loading in …5
×

Collaboration between design and engineering

529 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
529
On SlideShare
0
From Embeds
0
Number of Embeds
89
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Collaboration between design and engineering

  1. 1. Collaboration BetweenDesign and Engineering @ Yahoo!December 2012
  2. 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. 3. + About Design
  4. 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. 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. 6. + Design At Yahoo! I Inspiration I Ideation I Implementation Build Strategic Project Design Inspiration Ideation Planning Planning Evaluate
  7. 7. + About Engineering
  8. 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. 9. + Engineering At Yahoo!  Yahoo! runs SCRUM.
  10. 10. + Collaborative Design/Engineering Process At Yahoo!
  11. 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. 12. + Design & Development Process Build Strategic Project Design Inspiration Ideation Planning Planning Evaluate
  13. 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. 14. + Process: Inspiration  Cultural Trends.  Diary Studies.  Ethnographic Research.  Market Analysis.  Market Positioning. Inspiration  Persona Development.  UX/Brand Metrics.  UX Benchmarking.  User Interviews.
  15. 15. + Process: Ideation  Biz strategy context.  Ideation workshop.  IxD principles alignment.  Opportunity landscape.  Prototyping.  User Interviews. Ideation  Vision Concepts.  Visual designs.
  16. 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. 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. 18. + Process: Build  Code user stories.  Design QA (tech, Vis, ID).  Production graphics.  Research: Quantitative. Build  Code QA.  Performance QA.
  19. 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. 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. 21. + Use Case 1: Photo Lightbox
  22. 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. 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. 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. 25. + Use Case 2: Sentiment Slider
  26. 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. 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. 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. 29. + Use Case 3: TW Mobile Front Page
  30. 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. 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. 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

×