+ 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 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.
+ Design At Yahoo! I Inspiration I Ideation I Implementation Build Strategic Project Design Inspiration Ideation Planning Planning Evaluate
+ 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.
+ 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 Build Strategic Project Design Inspiration Ideation Planning Planning Evaluate
+ 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.
+ 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.
+ 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 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.
+ 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
+ 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.
+ 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.
+ 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
+ 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.
+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 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