Upgrade to Pro — share decks privately, control downloads, hide ads and more …

My Yahoo Refresh

Dc9d3d8370a9655046689bfb5a8c086d?s=47 SherryWoo
March 06, 2022

My Yahoo Refresh

Dc9d3d8370a9655046689bfb5a8c086d?s=128

SherryWoo

March 06, 2022
Tweet

More Decks by SherryWoo

Other Decks in Design

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