🖐 Friday Five (Biases that lead to poorly designed products, Onboard tips from popular products, & more)
We're back with our 5th issue of Friday Five, a weekly email with our top 5 finds to help you level up as a designer. Here's what we want to share with you this week.
This week's Finds:
1. Onboard Tips: How popular products onboard new users
2. Figma Flow: Get your product team on the same page
3. Color Contrast: A deep dive into colors and accessibility
4. Twitter Redesign: Twitter rolled out their new design direction
5. Breaking Bias: Cognitive biases that lead to poorly designed products
The Growth Design team has a library of onboarding case studies. They're well done and packed with onboarding tips. They use a mix of UX fundamentals and psychology concepts to explain why certain moments in onboarding are positive or negative for the user.
Our favorite case studies?
• How Tinder minimizes task perception during account setup (read Tinder case study)
• How TicTok uses variable rewards to build user habits (read TicTok case study)
This guide covers project structure, naming conventions for components, using version control, and a step-by-step process for taking an idea and turning it into production designs. A good read for teams looking to bring more structure to their Figma design process.
If you hate math, maybe skip this one. Dan Hollick goes deep on how to calculate color contrast and why it's not so straightforward. Turns out the equation involves weighting how people perceive Red, Blue, and Green. These weights are fixed, but not all people see colors the same way (remember the dress test?).
Twitter rolled out new visual design updates including their new font, "Chirp" (gotta love the brand affinity). The new design direction is good. But what caught our eye was key Twitter designers sharing their insights on updating the visual language for a product used by 300+ million people.
• Joey Banks discusses how to create alignment between platforms (read thread)
• Edward Wang shares learnings on using Design Tokens for iOS, Android, & Web (read thread)
• Ashlie Ford breaks down visual principles that inspired the new look (read thread)
Paras breaks down 6 common cognitive biases to avoid when designing products. The most common bias? Confirmation bias during user interviews. It's easy to cherry-pick feedback that confirms our existing ideas on how a new design should work. See what the other 5 biases are and how you can avoid them to design better products.
We wrote a meaty guide on using icons in Figma. It covers everything you need to know about setting up icons, using icons in designs, and handing off icons for development in Figma. It's 🔥. Read the article
Have a great weekend!
Molly and Jake at UI Prep