My Yahoo Refresh

Transcript

1. 4 weeks Duration Design System Implementation; Themeing My Focus My Yahoo Refresh my.Yahoo.Com
2. my.yahoo.com Status quo context
3. Challenge Why refresh? Project Goal Refreshing the website to improve user experience and adapt new visual language but remain the most user habit. The My Yahoo users are old, who are hate to be changed. From company perspective, we care bringing more younger user group in the future my.yahoo.com was designed tons of years ago, the font, the visual style are outdated and conservative.
4. MVP product requests 1. Columns switchover 2. Modal windows 3. Theme 4. Sub nav tab
5. Design challenge #1 Old design Columns Switchover Modules responsiveness The page supports 2, 3, and 4 column layout
6. Design challenge #1 4 Columns 2 Columns 3 Columns Columns Switchover
7. “Today” 2 Columns “Today” 3 Columns “Today” 4 Columns Design challenge #1 Columns switchover
8. 3 solutions I landed on… Strategy Redesign based card layout a. Card info quality re-org b. Text color accessibility c.
9. a. Base card Detail info Old base-card essentials layout 1. Card Title 2. Menu Title 4. Setting 3. Read more Detail info Columns Switchover
10. “Base-card” After Detail info Detail info “Base-card” Before 1. Card Title 2. Menu Title 4. Setting 3. Read more a. Base card Columns Switchover Improving space-saving and better leverage of the white space.
11. “Bookmarks” after (3 columns style) “Bookmarks” Before (3 columns style) Columns Switchover b. Card info quantity re-org
12. Columns Switchover 10 is not a proper amount to present “Bookmarks”’s information. 
 
 So abridging the card content and con fi rming with our PM to prioritize the highest click rate among 5-6 icons within each card b. Card info quantity re-org
13. Columns Switchover “Bookmarks” refreshed 2 Columns design b. Card info quantity re-org
14. “My Mail” Before (3 columns style) “My Mail”After (3 columns style) Columns Switchover 55–60 characters (including spaces) per line could be considered an appropriate line length. Narrower lines would cause the reader to have to switch from line to line unnecessarily often. UXR learning: b. Card info quantity re-org
15. Contrast checker “My Mail”After (3 columns style) Columns Switchover c. Text color accessibility Ensure we are checking colored text decisions against our WCAG standard. Particularly when using gray text, ensure the chosen the gray color is accessible.
16. Modal Add content; Choose Themes and Edit layout Design challenge #2
17. 2.1 Add Content Before Refresh
18. 2.2 Edit layout Before Modal
19. 2.3 Choose Theme Before Modal
20. Homepage Theme: Dark mode Design challenge # 3
21. Layer diagram for the dark mode
22. 6 8 12 14 16 24 10 2 4 2 3 4 DP 0 1
23. 6 8 12 14 16 24 10 2 4 4 DP 0 1
24. 6 8 12 14 16 24 10 2 4 0 3 4 DP 1
25. 6 8 12 14 16 24 10 2 4 4 4 1 5 DP 0
26. 3 Columns
27. Sub nav The page supports addition of tabs Design challenge #4
28. 4. Sub nav states 1. Default 2. Drag & Remove 3. Hover_Editing 4. Editing Refresh
29. My work Impact #1 The refreshed My Yahoo design provided the design baseline to the next generation yahoo.com. Stay tune! Next Generation of Yahoo Summary
30. Impact #2 The cards has been shipped on yahoo.com's right rail, where we provide an integration for people to quick access their needs yahoo.com old right rail design Summary