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

My Yahoo Refresh

March 06, 2022

My Yahoo Refresh


March 06, 2022

More Decks by SherryWoo

Other Decks in Design


  1. 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.
  2. 3 solutions I landed on… Strategy Redesign based card layout

    a. Card info quality re-org b. Text color accessibility c.
  3. 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
  4. “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.
  5. 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
  6. “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
  7. 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.
  8. 4. Sub nav states 1. Default 2. Drag & Remove

    3. Hover_Editing 4. Editing Refresh
  9. 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
  10. 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