Smashing Magazine - #395: UX and Design Process

Multi-platform design system, UX psychology glossary, motion in UX design and qualitative research methods. Issue #395 Mar 7, 2023 View in the browser

Smashing Newsletter

He lā maikaʻi Smashing Friends,

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.

SmashingConf Antwerp

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.

The design process is a lie

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.

UX Psychology Glossary

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.

Multi-Platform Design System

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)

From our sponsor

36 Dev & Design Talks, Workshops & Networking: The Awwwards Community Awaits!

Awwwards
Gain key learnings to help reach your goals as a developer, and expand your network with the best digital creatives in the industry. Connect with the global community and stay up-to-date with the trends and technologies shaking the web right now — get your tickets here.


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.

Motion In UX Design

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.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:


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.

How to choose the right qualitative research methods

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)


From our sponsor

Collect, Clean & Act On Your Customer Data With $50K Segment Credits

Twilio Segment
Learn analytics best practices, assemble your tech stack, and build a data-driven organization using Segment as your customer data platform. Segment helps over 15,000 startups get analytics right. Get $50k in Segment credits with Smashing Magazine!


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 complete guide to onboarding customers for long-term success

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)


8. New On Smashing Job Board


9. Recent Smashing Articles


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).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#394: Better Meetings and Career Paths

Tuesday, February 28, 2023

With a little surprise, better meetings, career paths, design critiques and product management. Issue #394 • Feb 28, 2023 • View in the browser Smashing Newsletter Goeije 'n avend Smashing Friends,

#393: Useful CSS Techniques

Tuesday, February 21, 2023

With CSS toggles, CSS attribute selectors, cascade layers, blend modes and conditionally adaptive CSS.Issue #393 • Feb 21, 2023 • View in the browser Smashing Newsletter Aazaard Smashing Friends, We

#392: Design Inspiration From Remote Corners Of The Web

Tuesday, February 14, 2023

Design inspiration with music charts galaxy, interactive maps, historical illustrations and iconographic encyclopaedia.Issue #392 • Feb 14, 2023 • View in the browser Smashing Newsletter Goedemiddag

#391: Privacy and Security

Tuesday, February 7, 2023

Deceptive patterns, privacy UX, website tracking flowcharts, authentication UX and behavioral insights. Issue #391 • Feb 7, 2023 • View in the browser Smashing Newsletter He lā maikaʻi Smashing Friends

#390: Little Helpers

Tuesday, January 31, 2023

With AI helpers, toggle optimization, better SVGs, useful PDF tools, generating spreadsheets and automating meeting notes. Issue #390 • Jan 31, 2023 • View in the browser 💨 Smashing Newsletter Dear

You Might Also Like

At Home With Gloria Steinem

Thursday, December 26, 2024

View in your browser | Update your preferences ADPro Glory, Gloria Every year our AD100 honorees fill out a survey of projects that they're working on. A year or so ago, longtime AD100 designer

Celeb Homes at the Holidays—and a Few More Things to Make You Merry

Tuesday, December 24, 2024

View in your browser | Update your preferences ADPro Holiday Cheer Whether your taste leans traditional, modern, or all-out extravagant, AD is rife with inspiration for your holiday. In the spirit of

#488: Fun And Useful Gems

Tuesday, December 24, 2024

Radio garden, Zoom backgrounds, visual history of the alphabet and fun interactive experiences. Issue #488 • Dec 24, 2024 • View in the browser Smashing Newsletter Hello Smashing Friends, As we are

Accessibility Weekly #428: Putting AI to the (Accessibility) Test

Monday, December 23, 2024

December 23, 2024 • Issue #428 View this issue online or browse the full issue archive. Hey accessibility friends! It's the time of year where news and information slows down as many people take

2024 magic moments

Sunday, December 22, 2024

Issue 225: The year from my personal lens ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Planning mode

Friday, December 20, 2024

Lessons from our first-ever annual planning sprint ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

We Co-Sign This AD100-Approved Trend

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Emboldening the Bath Marble, marble, everywhere, and every drop is chic. According to AD100 designer Jake Arnold, “material drenching”—that is,

177 / Keep calm by listening to these ambient sounds

Thursday, December 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Dec 2024 • Part 1 View in browser Welcome to Issue 177 Lately, I've been driving a lot of inspiration from the things I see in real life. The range

The Year in Color: Hella Jongerius, Mocha Mousse, and More

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Color Our World Since the summer, AD PRO has kept its finger on the pulse of color predictions. Overall, the vibe right now is down to earth,

🐺Get Media Features in 2025

Thursday, December 19, 2024

A BIG Wolf Craft announcement!! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏