Thank you for being here.
Please use wider screens for a better experience.
Yahoo has a variety of brands including Yahoo, AOL, TechCrunch, etc. All of these brands share the same membership system
🧾 - so in this project, I led the redesign of the design language 🖌 for membership products for the next generation of Yahoo.
The key challenge for this project is to accommodate the visual languages to different brands, devices and scenarios - and also make it easy to implement.
🕒 6 months, 2021
📱 Lead designer, Yahoo
🏷️ Design System, Visual Design, Illustrations
Accessible and consistent experience across all the device types
Mobile-first visual styles and alignments with new illustrations
Informative animations to help users understand important issues
Consistent UI components with unique CSS style sheet for different brands
Previously, membership products in Yahoo are lacking consistency and well-thought design principles. Especially for our visual language.
Check out what previous interfaces look like ↓
I did a detailed analysis of current interfaces of different brands and experiences - then summarized 4 key problems for the design language and general experience beyond the UI.
♿ Not accessibility compliant
💢 Inconsistent visual elements
☝️ Poor usability
🎃 Old visuals and lack of aesthetics
Therefore, based on the problems and membership's characteristics, I decided on 3 key principles to help guide the overall membership experience design when we try to update the design system.
🎴 Simplifying the complexity.
Use suitable visual structure and nuances to make the complex membership experience easier.
🧘 Establishing a sense of trust and control.
Provide intuitive and in-context design to let users feel secured about their accounts.
👐 Feel the flow, rather than see the flow.
With vivid information display, help users easily understand the everything around their activities, subscriptions, account status etc.
With the design principles, I created the design system based on real-world scenarios of membership - Also, I referred to the brand guidelines of Yahoo, AOL, TechCrunch, etc. to make our visual experience consistent.
Check out how I establish the design system from the scratch ↓
One of the big change when I establish this design system is to accommodate mobile context.
For girds, since membership products are all web-based, I tried to incorporate fixed margins/gutters 🔲 and flexible columns 🟦 on mobile web for different devices - then extend these standards to desktop web experience.
For typography 🔤, with each brands' assets, I introduced a general font size system that fits mobile context. Also, I introduced two font weights for desktop titles only.
🦾 Accessibility-compliant
Another big issue for the previous design is that a lot of design is not accessible, especially visually.
For colors 🚦, I used
WCAG 2.0 Compliance ↗ to make sure the both light and dark mode color palettes accessible enough - and meets AA level standards all the time (AAA level for small text).
Examples of color palettes (Yahoo)
Also, for bottoms and links 🔗 , I optimized the design to make sure everything's accessible in contexts.
Also I redesigned the text alignments 🔣 to guarantee the readability for different languages.
Examples of bottom sizing and spacing
Examples of different languages
Another big issue for previous interfaces is the old and ugly aesthetic styles - especially for the illustrations. Therefore, I tried to redesign some of the illustrations that accommodate all brands and make them feel more modern.
🎈 Illustration principles:
Friendly, Trustworthy, Accurate
For the membership design system, the users are our Yahoo designers as well as developers. Therefore, I also designed for them -
For designers, I created an all-in-one design file 📝 to guide the design.
For developers, I collaborate with our front-end team and make a themeable components library 📦 for each brand to reduce their workload for later membership projects.
I created a Figma file as well as a website to document the design system for designers.
With different brand assets, I emphasized on the dos / don'ts / special notices as well as some real-world examples.
For different brand assets, I tried to design with the similar language but with different themes - I collaborated with the front-end team and helped them create unique CSS sheet for each brand.
I finished the version beta 1.0 to beta 1.5 for the design system.
New design language was deployed in the new projects and increased ⬆️ 8.3 NPS comparing to the old experience.
If I had more time, I would keep iterating on the system and start to create more standard for animations 🌀.
ƒ.ℓ. All rights reserved.
