March 7, 2023 Smashing Newsletter: Issue #395

Editorial

How do you design animation? How do you choose your UX research methods? How do you shape your design process? And how do you create an effective onboarding UX? In this newsletter, we explore a few UX gems to help your design workflow.

The wonderful world of design is of course one of the many topics that we’ll cover at SmashingConf Antwerp 2023, fully dedicated to complex UX challenges and interface design. You can check the first speakers already. Ah, and don’t forget that you can save quite a bit by joining our friendly Membership first.

In other Smashing news, we’d love to invite you to the free Smashing Hour with Sara Soueidan to talk about all things accessibility on March 21. And we still have some friendly tickets to SmashingConf Front-End, taking place in San Francisco this upcoming May. We’d love to see you there!

In the meantime, let’s dive into the shiny world of UX!

— Vitaly (@vitalyf)

1. Reconsidering The Design Process

The ideal design process is a never-ending loop of learning and iterating. Sometimes it’s illustrated as a circle or loop, sometimes as a diamond or spiral. Real life often looks different, though. Things can get messy, and the design process doesn’t always go as smoothly as theory implies. So, is the design process a lie? That’s exactly the question that José Torre attempts to answer.

In his article “The design process is a lie,” José explores what causes friction when designing products and shares some things you won’t often see represented in design frameworks but that are important to keep in mind. He concludes that the design process isn’t a rope ladder that leads to the other side one step at a time, as we usually see it.

Instead, he compares designing for digital products to street skateboarding: You use the constraints around you in the best way you can and try to do it with style. A thought-provoking read. (cm)

2. UX Psychology Glossary

The Anchor Effect, Cognitive Load, Framing — many things influence how users and customers experience your product. If you aren’t too familiar with principles and concepts, or if you’re looking for a place to freshen up your knowledge, Peter Ramsey’s UX Psychology Glossary is for you.

The glossary describes psychological terms, design principles, and UX concepts that are useful when designing products. You’ll find each of the terms explained in one sentence for a quick overview. The main summary dives deeper and features an example and how to use it. Short and sweet. (cm)

3. Multi-Platform Design System

How do you build a design system in a company with 150 product teams, 200 designers and 4 platforms? In “How We Built Our Multi-Platform Design System”, Nicole Saidy shares an interesting case study on how the Booking team established a design language, used design tokens and created one source of truth for all themes, tokens and modes by building a Design API.

The team has also released a Figma Kit that demonstrates the process and a checklist to help you design multi-platform products for your team. A wonderful case study worth diving into! (vf)

4. Motion In UX Design

Users these days often seem to expect motion as a part of the user experience, and designers and developers work on more and more creative experiments to include motion in their interfaces. An inspiring post that shows how motion supports web interactions and usability comes from Marina Yalanska.

In “Motion In UX Design”, Marina highlights six effective types of web animation: hero animation, loading animation, accent animation, interactive animation, hover animation, as well as motion for special effects. Each of them is illustrated with creative examples, and Marina takes a closer look at how they help create emotional connections and enable communication with the user. Inspiration is guaranteed. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on front-end and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• The Power of Storytelling UX
  with Chiara Aliotta. Mar 14–28
• Figma Auto Layout Masterclass UX
  with Christine Vallaure. Mar 27
• UX/UI Design & Figma Introduction UX
  with Christine Vallaure. Apr 20–28
• New Front-End Adventures, 2023 Edition Dev
  with Vitaly Friedman. Apr 25 – May 9
• Architecting Design Systems Workflow
  with Nathan Curtis. May 11–19
• Data Visualization Masterclass Dev
  with Amelia Wattenberger. May 4–18
• SmashingConf SF — May 23–26
  With workshops on Front-End, React, Performance, Accessibility, Next.js, HTML Email.
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. June 12–26
• Smart Interface Design Patterns Video Course UX
  9h-video + Live UX Training with Vitaly Friedman
• Jump to all workshops →

6. Qualitative Research Methods

Qualitative research helps us understand human behavior. But how to choose the right qualitative research method for your project? Allison Grayce Marshall takes you through the process step by step — from aligning on the time and scale of research to synthesizing your data into insights.

In her article “How to choose the right qualitative research methods,” Allison discusses when to do qualitative research, the difference between generative and evaluative research methods, and tips for choosing the right one. She also distilled everything into a cheat sheet you can download and refer to when you need something short and sharp to guide you through your next UX research project. (cm)

7. Better Onboarding UX

Onboarding is more than getting your customers up and running on day one of using your product. To help you engage them in the long term, Phil Byrne shares valuable insights into the framework that he and his team at Intercom use: the C.A.R.E. framework.

The C.A.R.E. framework describes how onboarding shapes every stage of the customer lifecycle, with the term “C.A.R.E.” describing the four stages “convert,” “activate,” “retain,” and “expand.” To build a cohesive experience, you send different types of messages in different channels at the various points in the customer lifecycle, all tailored to the customer’s behavior.

In his blog post, Phil explains each stage in detail and shares tips for planning your onboarding strategy as well as mistakes to avoid. (cm)

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).