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

Key phrases

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

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget