Vitaly Friedman

Smashing Media AG

Creator of the video library on “Smart Interface Design Patterns”, with practical tips around UX and interface design, along with a live UX training taking place twice a year.

Video Course + Live UX Training

UX consultant and UX lead working with mid-size and large organizations on improving clarity, accessibility, performance and conversion of digital interfaces. Worked with: European Parliament, OTTO, Zalando, Marc O'Polo, Axel Springer SE, REWE Digital and many others.

UX Lead, Senior UX Designer/Consultant

Smashing Conferences

A curator of Smashing Conferences, friendly and inclusive in-person and online events for designers and developers who design and build the web. Taking place in San Francisco, New York, Freiburg, Antwerpen and Barcelona.

Curator, Creative Lead

Smashing Magazine

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine for professional designers and front-end engineers.

Editor-in-chief, Founder

Speaking with love and passion about the techniques and strategies that help designers and front-end engineers get their work done better, and faster.

Speaker

Freelance

Freelance Web Designer

As a UX Lead, I’ve been working with mid-size and large organizations for over 19 years, helping improve UX of complex systems, accessibility, performance and design of their digital experiences. Among many others, I’ve been working with the European Parliament, OTTO, Zalando, Marc O'Polo, Axel Springer SE, and REWE Digital.

I’m also the founder and editor-in-chief of SmashingMag, a popular online magazine and platform for designers and developers, where I help curate and organize friendly and inclusive conferences, such as SmashingConfs, and run video courses and live UX training (Smart Interface Design Patterns linked above).

I am incredibly passionate about writing, speaking, running workshops, and sharing what I’ve learned on UX. I love complex UX challenges, intricate processes, and difficult stakeholders, and my goal is to design digital experiences that people understand and can fall in love with.

If you are interested in working together, feel free to drop me an email at vitaly[@]smashingconf.com — I will do my best to help in every possible way!

UX Designer, Creative Lead, Front-End Performance Lead 

Design System Generator (Figma Plugin) (https://lnkd.in/eWjn3VnA), a neat little helper for a quick design system setup with Figma variables — to generate basic color, typography, spacing, grids, radius and shadows.

I would love to see the option to apply an existing or a custom typographic scale to typography, but also review the design against accessibility requirements and remove the components that you don’t need. A neat starter kit for quick scaffolding without the need to define Figma variables manually, put together by Moksh Garg. 👏🏼 👏🏽 👏🏾

#ux #design #designsystems

Designing For Users With ADHD (https://lnkd.in/ePw8THBg), a practical guide on how ADHD (Attention-Deficit/Hyperactivity Disorder) manifests itself, and design patterns to help neurodivergent users accomplish their tasks. An honest and personal article, kindly shared by Eva Katharina Wolf. 👏🏽

✅ ADHD affects around 5% of children, 2.5% of adults.
✅ Shows in forgetfulness, time-blindness, impulsivity, hyperactivity.
✅ Have trouble sitting still, racing thoughts, hyperactive mind.
✅ Hard to handle unstructured situations that need reflection.
✅ It’s challenging to listen to others while holding a thought.

✅ Remind people about key events and unfinished drafts.
✅ Display recently opened files, used filters, payments, drafts.
✅ Improve password recovery: reduce lock-outs and log outs.
🚫 Don’t renew contracts without a series of reminders.
🚫 Avoid auto-playing videos, animations (e.g. posts using GIFs).

✅ Show progress, chunk everything, allow to continue later.
✅ For forms, more simpler pages are better than 1 long page.
✅ Disclose details, filters, options gradually, not all at once.
🚫 Don’t make users rely on working memory to complete tasks.
🚫 Avoid jargon, internal abbreviations, dense business-speak.

I might sound like a broken record, but the best way to improve design is to test with a wide range of people as a part of the design process. Whenever possible, involve people with ADHD in your research, design and usability sessions.

Not only will it make it easier for people with ADHD to complete tasks — it will help *everyone* reduce distraction, avoid frustration and make fewer mistakes. Said it once, will say again: accessibility is better for everyone, independent of their skills, conditions, age or level of expertise.

Useful resources:

Neurodiversity Design System, by Will Soward
https://lnkd.in/edBzmUT8

Writing Small: Readability Guidelines, by Intuit
https://lnkd.in/eMqmPGdp

Humane Design Guide Worksheet, by HumaneTech
https://lnkd.in/e6t2ibP3

Inflow: Neuroinclusive Design for ADHDers, via Tamara Sredojevic
https://www.getinflow.io/

Living With Adult ADHD, by Ana Krajinović
https://lnkd.in/emKQxYVY

How To Design For ADHD And Everyone, by Penelope
https://lnkd.in/eieb86zZ

How My ADHD Makes Me A Better Designer, by Sarah Mohs
https://lnkd.in/eMAxj8Jn

My ADHD Diagnosis Took Nearly 30 Years, by Diamond Sharp
https://lnkd.in/evJ3V5ZB

✂️ Accessible Numbers: How To Design With Numbers
https://lnkd.in/e8wyMWp4

#ux #accessibility

🔖 UX Glossaries (PDFs), a fantastic series of glossaries explaining key terms and concepts related to UX, research, agile — in one single place, for quick summaries and look-ups ↓

UX Research Methods Glossary (image attached), by Raluca Budiu
Article: https://lnkd.in/eGNtg9Ye
PDF: https://lnkd.in/eU8MuKef

UX Quantitative Research Glossary, by Raluca Budiu
Article: https://lnkd.in/eTxFKeEj
PDF: https://lnkd.in/e_AFNwTd

Lean UX & Agile Glossary, by Anna Kaley, Rachel Krause
Article: https://lnkd.in/epaQPGEw
PDF: https://lnkd.in/eud3J6g9

AI Glossary, by EveryPixel
https://lnkd.in/eVCssUWx

Data Visualization Glossary, by Financial Times
https://lnkd.in/erY2NQSR

UX Psychology Glossary, by Peter Ramsey
https://lnkd.in/ek9Pi-CG

UX Lexicon, by Michele Ronsen
https://lnkd.in/eWKJ5eff

UX Dictionary, by Nick Groeneveld
https://lnkd.in/evjm5Gyb

UX Glossary, by Christopher Nguyen
https://lnkd.in/em9v2zbS

Marketing Glossary, by Gartner
https://lnkd.in/erCcz9wy

Assistive Technology Glossary, by Fable
https://lnkd.in/exwegbGk

Front-End Glossary, by Jens Oliver Meiert
https://webglossary.info

Typography and Fonts Glossary, by Elliot Jay Stocks
https://lnkd.in/eH-MSykU

A *HUGE* thank you to the wonderful team for putting the glossaries together — useful for both newcomers to the industry and seasoned designers to have a shared understanding about UX terms and what they actually mean. 👏🏼👏🏽👏🏾

#ux #design #research

💎 Accessibility For Designers Checklist (PDF: https://lnkd.in/e9Z2G2kF), a practical set of cards on WCAG accessibility guidelines, from accessible color, typography, animations, media, layout and development — to kick-off accessibility conversations early on. Kindly put together by Geri Reid.

WCAG for Designers Checklist, by Geri Reid
Article: https://lnkd.in/ef8-Yy9E
PDF: https://lnkd.in/e9Z2G2kF
WCAG 2.2 Guidelines: https://lnkd.in/eYmzrNh7

Accessibility isn’t about compliance. It’s not about ticking off checkboxes. And it’s not about plugging in accessibility overlays or AI engines either. It’s about *designing* with a wide range of people in mind — from the very start, independent of their skills and preferences.

In my experience, the most impactful way to embed accessibility in your work is to bring a handful of people with different needs early into design process and usability testing. It’s making these test sessions accessible to the entire team, and showing real impact of design and code on real people using a real product.

Teams usually don’t get time to work on features which don’t have a clear business case. But no manager really wants to be seen publicly ignoring their prospect customers. Visualize accessibility to everyone on the team and try to make an argument about potential reach and potential income.

Don’t ask for big commitments: embed accessibility in your work by default. Account for accessibility needs in your estimates. Create accessibility tickets and flag accessibility issues. Don’t mistake smiling and nodding for support — establish timelines, roles, specifics, objectives.

And most importantly: measure the impact of your work by repeatedly conducting accessibility testing with real people. Build a strong before/after case to show the change that the team has enabled and contributed to, and celebrate small and big accessibility wins.

It might not sound like much, but it can start changing the culture faster than you think.

Useful resources:

Giving A Damn About Accessibility, by Sheri Byrne-Haber (disabled)
https://lnkd.in/eCeFutuJ

Accessibility For Designers: Where Do I Start?, by Stéphanie Walter
https://lnkd.in/ecG5qASY

Web Accessibility In Plain Language (Free Book), by Charlie Triplett
https://lnkd.in/e2AMAwyt

Building Accessibility Research Practices, by Maya Alvarado
https://lnkd.in/eq_3zSPJ

How To Build A Strong Case For Accessibility,
↳ https://lnkd.in/ehGivAdY, by 🦞 Todd Libby
↳ https://lnkd.in/eC4jehMX, by Yichan Wang

#ux #accessibility

🔬 UX Concept Testing. How to test your UX design without spending too much time and effort polishing mock-ups and prototypes ↓

✅ Concept testing is an early real-world check of design ideas.
✅ It happens before a new product/feature is designed and built.
✅ It helps you find an idea that will meet user and business needs.
✅ Always low-fidelity, always pre-launch, always involves real users.
🚫 Testing, not validation: ideas are not confirmed, but evaluated.

✅ What people think, do, say and feel are often very different things.
✅ You’ll need 5 users per feature or a group of features.
✅ You will discover 85% of usability problems with 5 users.
✅ You will discover 100% of UX problems with 20–40 users.
🚫 Poor surveys are a dangerous, unreliable tool to assess design.

🚫 Never ask users if they prefer one design over the other.
✅ Ask what adjectives or qualities they connect with a design.
✅ Tree testing: ask users to find content in your navigation tree.
✅ Kano model survey: get user’s sentiment about new features.
✅ First impression test: ask to rate a concept against your keywords.

✅ Preference test: ask to pick a concept that better conveys keywords.
✅ Competitive testing: like preference test, but with competitor’s design. 
✅ 5-sec test: show for 5 secs, then ask questions to answer from memory.
✅ Monadic testing: segment users, test concepts in-depth per segment.
✅ Concept testing isn’t one-off, but a continuous part of the UX process.

In design process, we often speak about “validation” of the new design. Yet as Kara Pernice rightfully noted, the word is confusing and introduces bias. It suggests that we know it works, and are looking for data to prove that. Instead, test, study, watch how people use it, see where the design succeeds and fails.

We don’t need polished mock-ups or advanced prototypes to test UX concepts. The earlier you bring your work to actual users, the less time you’ll spend on designing and building a solution that doesn’t meet user needs and doesn’t have a market fit. And that’s where concept testing can be extremely valuable.

Useful resources:

Concept Testing 101, by Jennifer Lee
https://lnkd.in/egAiKreK

A Guide To Concept Testing in UX, by Maze
https://lnkd.in/eawUR-AM

Concept Testing In Product Design, by Victor Yocco, PhD
https://lnkd.in/egs-cyap

How To Test A Design Concept For Effectiveness, by Paul Boag
https://lnkd.in/e7wre6E4

The Perfect UX Research Midway Method, by Gabriella Campagna Lanning
https://lnkd.in/e-iA3Wkn

Don’t “Validate” Designs; Test Them, by Kara Pernice
https://lnkd.in/eeHhG77j

UX Research Methods Cheat Sheet, by Allison Grayce Marshall
https://lnkd.in/eyKW8nSu

#ux #testing

🍱 Design Patterns For Effective Dashboards. Practical guidelines for designing better dashboards and UX patterns to keep in mind ↓

🚫 Don’t destroy user value by oversimplification.
✅ Oftentimes life is complex and tools must match life.
✅ Dashboard value is measured by useful actions it prompts.
✅ Aim to create understanding, rather than showing raw data.
✅ Start by studying audience, tasks and decisions to make.

✅ Choose what data is important for a user in each task.
✅ Choose a structure: single page, parallel pages, drill-downs.
✅ Select charts depending on data + level of detail to show.
✅ Then set layout density: open, table, grouped or schematic.
✅ Design interactions for exploration, filters, personalization.

✅ More data → more filters/views, less data → single values.
✅ Design for interface expertise levels: low, medium, high.
✅ Low: large text size, progressive disclosure, extra spacing.
✅ Medium: regular size/spacing, more data cards, shortcuts.
✅ High: small text size, heavy data, customization, filters.
✅ Support user’s transition between levels of proficiency.

Dashboards are often seen as a way to organize and display data at a glance. And as such, too often it shows a lot of data without being actionable or meaningful. Yet the main task of a dashboard isn’t that — it’s to explain trends and communicate insights.

Start by studying levels of user’s expertise. Segment the audience and explore what data they need to make decisions. Think carefully what charts would be both accurate and meaningful — rather than being an oversimplification or guide to misleading interpretations. 

Review defaults, presets and templates. Allow users to re-arrange and customize data density and widgets. Explore where a data table might help draw better conclusions. Most importantly: test your charts and dashboards meticulously.

We don’t need to reveal all raw data at once, to everyone, and at the same scale and pace. But we need to support pathways for people to face complexity when they must, and discover only a set of actionable insights when they need.

✤ Useful Resources

Dashboard Design Patterns & Workflow, by Benjamin Bach
https://lnkd.in/ed6Rr_sC

Practical Guide For Dashboard UX, by Taras Bakusevych
https://lnkd.in/e5gMMgXv

FT Visual Vocabulary (PDF), via Stéphanie Walter
https://lnkd.in/ezu2w8Vr

How To Design A Dashboard (free book), by Matt David
https://lnkd.in/enU-CxwU

UX Efficiency Frontier, by Morgane Peng
https://lnkd.in/ezbyuMBT

Data Dashboards UX Benchmarking, by Creative Navy
https://lnkd.in/eticxU-N

You Might Not Need A Dashboard, by Irina Wagner, PhD
https://lnkd.in/eBSEkCyb

#ux #design

📣 Intuit Content Design System (https://lnkd.in/eGyBUrZ2), a comprehensive system for content designers, UX writers and IA architects that covers voice and tone, accessibility and inclusion, style, wording, AI, marketing and how to talk to customers. Neatly put together by fine folks at Intuit. 👏🏼👏🏽👏🏾

Words matter. The way how they are spoken matters, too. The voice and tone. The rhythm and pace. The words underlined. The words not said. And in a digital product, there is rarely anything that guides people in the right direction better than a well-crafted messaging.

Too often, content design is seen merely as embellishment. As a play of words. As a way to make people chuckle, or smile, or pause for a moment. Yet it’s one of the most impactful assets you can use to improve clarity, reduce errors and streamline flows.

One of the very first things I do when reducing abandonment and churn is to refine and test error messages. The way we ask questions and how we manage answers. How we talk to customers in support, emails, app stores and blog posts.

Designing a product also means choosing the right words, finding the right voice, and adapting the tone to the situation in which a user finds themselves. Spend just enough time with content design, and you might be surprised about the impact a few words and their design can make at scale.

✤ Content Design in Design Systems

Atlassian: https://lnkd.in/eGpzQqm4
Amplitude: https://lnkd.in/eaB85T7n 👍
Buffer: https://lnkd.in/e3P_EZFN
DHL: https://lnkd.in/eF494fkT 👍
Duolingo: https://lnkd.in/egCSX9At
Girlguiding: https://lnkd.in/eEBiXX6d 👍
Goldman Sachs: https://lnkd.in/e5x7BuPt
Gov.uk: https://lnkd.in/ekRadXad
JSTOR: https://lnkd.in/eAnyrtcu 👍
MetLife: https://lnkd.in/evVE8sqf
Monzo: https://lnkd.in/edVV8QWz
NASA: https://lnkd.in/eM637kfD
NHS: https://lnkd.in/eYK3QMa2 👍
Progressive’s: https://lnkd.in/evx_8bzY 👍
Schibsted: https://lnkd.in/et_BXg6R
Shopify: https://lnkd.in/eAKgEHNW
Skrill: https://lnkd.in/e2HGTq4q 👍
Slack: https://lnkd.in/ejZ2QtJa
Zendesk: https://lnkd.in/euxijT5m 👍
Wise: https://lnkd.in/eWk-Mvf9

✤ Useful resources

Embedding Content Design In Design Systems, by Bobbie Wood
https://lnkd.in/eu3EjgZg

Embedding UX Writing In a Design System (+ Scorecard Template), by Mélanie Michou
https://lnkd.in/eXXbRyQq

Setting Up Content Design Systems, by Michael Lawrence, PhD
https://lnkd.in/eC-67BnZ

Content Strategy in Design Systems, by Pete Zogas
https://lnkd.in/eWhUphBm

Tone and Voice Workshop (Miro, PDF), by Antonia Horvath
https://lnkd.in/epNJmp5B

Designing Voice and Tone In UX Writing (+ PDF Worksheets)
https://lnkd.in/e6r4cC8Y

✤ Books

– Strategic Writing for UX from Torrey Podmajersky
– Content Design by Sarah Winters
– Nicely Said, by Nicole Fenton, Kate Kiefer Lee
– Everybody Writes, by Ann Handley
– Conversational Design by Erika Hall
– Writing Is Designing, by Michael Metts, Andy Welfle ✏️

[continues in comments]

🛡️ How To Defend Your Design Decisions. With strategies to protect your work, avoid design by committee and pick battles wisely ↓

🚫 Avoid any big surprises when presenting your work.
✅ Ask for feedback gradually, at different stages of the design.
✅ Strong decisions rely on data and research, not hunches.
✅ Attach your decisions to a goal, metric, or a problem.
✅ Show what’s possible short term, and your plan for the future.

✅ Re-iterate business goals before showing any of your work.
✅ Show the process that led you to your current design.
✅ Explain how your current decision impacts business goals.
✅ Highlight key takeaways from previous rounds of feedback.
✅ Highlight advantages and risks to show they’ve been considered.

🚫 Don’t fight an argument: find the problem brought into spotlight.
✅ You might be wrong: defend the project goals, not your work.
✅ Ask to articulate and explain the argument in detail.
✅ Have alternatives ready, and explain why they were discarded.
✅ Defer the decision: request to review it with your team.
🚫 One suggestion is a goldmine of other ideas waiting to be excavated.

Good design isn’t about being the winner in the big meeting. It’s about finding the flaws and wrong assumptions to make sure your work matches business goals while supporting user’s needs. So be deliberate and meticulous explaining how your decisions impact business goals.

Nothing diffuses argument like agreement. Don’t get defensive — as Tom Greever said, when we become defensive, we fail to focus on the real issues. So avoid big public debates. Avoid speaking about your personal preferences, what you like or dislike.

Don’t ask “What do you think?” as it prompts personal opinions. Instead, ask if attendees agree with the direction (yes/no), and if not, why not. Most importantly, defend your design decisions when you know it’s right, but leave your ego aside when you feel you aren’t.

✤ Useful resources:

Defending Design Decisions, by Chris Kiess
https://lnkd.in/erMUpKj8

The Tyranny of Collaborative Ideation, by Lars Jerichau
https://lnkd.in/e-JGNqNN

Articulating Design Decisions To Stakeholders, by Uxcel
https://lnkd.in/eWfT4kGh

Strategies To Deal With Design By Committee
↳ https://lnkd.in/evacmmHd, by Jennifer Lee
↳ https://lnkd.in/ew5nE6Zy, by Paul Boag

How To Deal With Difficult Coworkers
https://lnkd.in/eVCUvz8Q

☔ A Designer’s Guide To Protect Against Layoffs, by Vitaly Friedman
https://lnkd.in/eikHzA2n

Articulating Design Decisions (Book), by Tom Greever
https://lnkd.in/efmNb2Mr

#ux #design

Practical insights for better UX • Running “Smart Interface Design Patterns” • Founder of SmashingMag • Speaker • Loves writing, checklists and running workshops on UX. 🍣

Why is articulating design decisions important?

What are some strategies to deal with design by committee?

✍🏾 UX Writing vs. Content Design. How they are different, what responsibilities and deliverables they entail — and the expectations that companies have ↓

✅ UX WRITERS work in a design team, writing and refining UI copy.
– Their primary focus is on the way copy looks and sounds.
– Responsible for translating an organisation’s tone of voice into copy.
– Work on all customer-facing copy: from large blocks of text to microcopy.

✅ CONTENT DESIGNERS work in a design team on content structure/design.
– Work with designers to identify/meet user needs and ensure consistency.
– Focus on how content is structured on pages.
– Works on making content accessible from a design perspective.

✅ COPYWRITERS sit in a marketing team to prompt users to take action.
– Product content to engage and attract new customers.
– Edit, refresh and update existing content to ensure it remains relevant.
– Short game: prompt people to take an immediate business-critical action.

✅ CONTENT MARKETERS sit in a marketing team to grow brand awareness.
– Produce content to establish trust with an audience.
– Measure the success of their content through metrics and analytics.
– Long game: the focus isn’t on selling, but on overall brand awareness.

✅ CONTENT MANAGERS organize, maintain, archive and repurpose content.
– Work with individual content writers to keep content up-to-date.
– Skilled in IA, metadata, taxonomies, CMS, analytics and SEO.
– Mostly plan and oversee content, rather than producing new content.

✅ CONTENT STRATEGISTS set content priorities to meet business goals.
– Set the vision and parameters for their organisation’s tone of voice.
– Lead content audits and quality analyses to identify gaps.
– Usually they aren’t writing copy as a part of their work.

✅ INFORMATION ARCHITECTS work in a UX team to organize information.
– Build out complex structures to help users navigate them.
– Develop taxonomies, hierarchies and categorization schemes.
– Design navigation systems, run card sorting and tree testing.  

Many companies are very confused about the difference between all these roles. It’s not surprising to have just one person taking care of pretty much most responsibilities above, which is almost an impossible task to do. Larger organizations break down roles more granularly — sometimes with a “Search Content Designer” or a “Dashboard IA Architect”.

Content should be a part of the design process early on. We might not have the “final” content delivered, but we can get started by understanding the *type* of content we’ll be dealing with, the amount of data, the languages to support, the data types to visualize — to develop a strategy for publishing and presenting it clearly.

Ah, and if you’re looking for an overview of content-related roles and deliverables, Rachel McConnell has kindly put together an overview of how and where content fits in the design process: https://lnkd.in/gssnhq7w 👏🏽

#ux #design

😊 How To Capture Users’ Emotions In UX. With practical guidelines and toolkits to better understand people‘s emotions and act on them ↓

✅ What people think, do, say and feel are usually very different things.
✅ We aren’t good at explaining where our emotions come from.
✅ Sympathy is the acknowledgement of the suffering of others.
✅ Empathy is the ability to fully understand/share person’s needs.

✅ For most people, it’s much easier to agree than disagree.
✅ Users often hide criticism and exaggerate positive feedback.
✅ Empathy relies on open-ended questions in UX research.
✅ There is nothing more powerful than silence in a conversation.

🚫 Don’t ask what people like or dislike: it rarely matches behavior.
🚫 Asking a question directly is the worst way to get useful answers.
🚫 Don’t mistake smiling and nodding for support or agreement.

Many people assume that they can read people’s emotions fairly well. However, while it’s easy to “read” a response based on voice, tone, loudness and pace, it's often very hard to spot underlying emotions, thoughts and feelings that another person is experiencing.

We often map our view and understanding of the world on how others experience the world. But more often than not, it’s inaccurate, and it’s shaped by our biases and stereotypes. We just know too little about what another person’s life is like.

The best way to capture emotions is to speak less and listen more. Don’t corner people with close-ended questions, leading questions, endless surveys or feedback forms. Establish trust and safety to open up first.

Give people time and space to express their doubts and thoughts. Acknowledge what they’ve said. Ask politely and respectfully for more details. And: there is rarely anything more revealing in a conversation than a moment of silence.

✤ Useful resources

The Spectrum Of Empathy in UX (attached visual), by Sarah Gibbons, NN/g
https://lnkd.in/d-kj3hmr

Emotion Wheel Toolkit (PNG), by Geoffrey Roberts
https://imgur.com/q6hcgsH

Scale of Negative UX Impact, by Indi Young
https://lnkd.in/eg2FiRSE

How To Ask The Right Questions In UX Research, by Fabricio Teixeira
https://lnkd.in/eCBrf_tS

How To Ask Good Questions (Cheat Sheet), by Krisztina Szerovay
https://lnkd.in/eUYSPX8g

How To Avoid Bias In UX Research, by Genís Frigola 
https://lnkd.in/eG8atWHw

The 9 Rules Of Design Research, by Erika Hall
https://lnkd.in/e3WJ6rh5

Human Connection Toolkit (+ Method Cards), via Rosie Sherry
https://www.deepr.cc/tools

Belonging Design Principles, by Othering & Belonging Institute at UC Berkeley
https://lnkd.in/eudUfAd2

#ux #research

🎢 100 Figma Design Tips (https://lnkd.in/eeF-yNCh), a huge (!) deck with practical design techniques — from file organization and structure to libraries, components, variables, auto layout and prototyping, along with nifty keyboard shortcuts and helpful tips and recommendations. Neatly put together by Nitish Khagwal (discovered via Adham Dannaway). 👏🏼👏🏽👏🏾

Useful recent posts on Figma:

Figma Learning Journey For Product Designers (Syllabus + Videos), by Kaitie Chambers and Lauren Byrne (Andres).
https://lnkd.in/epsVYvfu

Figma Components Checklists, by Javier Cuello
https://lnkd.in/eNfcj6JQ

Figma Tips To Work More Efficiently, by Allie Paschal
https://lnkd.in/eBPbEEeW

Useful Figma Prototyping Resources For Bookmarks, by Ana Boyer
https://lnkd.in/evQYTiXa

The Only Figma Plugins I Actually Use, by 🟦 🟠 🔺Christine Vallaure
https://lnkd.in/eaUQXKJu

How To Create Data Tables in Figma (+ Figma file), by Jordan Hughes
https://lnkd.in/eAVuzbfw

A Gude To Figma Migration, by Clara Ujiie
https://lnkd.in/eghzWeDC

How To Optimize Your Design System With Figma’s Variables, by Nana Chon 🧙🏻‍♀️
https://lnkd.in/euAAmNkZ

Advanced Figma Tips & Tricks 2024, by 🟦 🟠 🔺Christine Vallaure
https://lnkd.in/eiCN7KPN

Happy reading and studying, everyone — and yet again, a huge thank you to all the wonderful people sharing what they’ve learned for all of us to learn and grow together! 🙏🏾

#ux #figma

How To Launch Design System Components (+ Figma template) (https://lnkd.in/egTZnbvW), a practical case study by Washington Post on how to avoid mismatched expectations around components, flag technical limitations early and prevent frequent overrides and change requests. Neatly put together by Brian Alfaro and Victor Aguilar.

📋 Set up a components board ← Keep candidates as Jira tickets.
🗓️ Component sprint runs for 10 days ← From discovery to docs.
🧱 Map impact vs. effort ← Prioritize components to work on.
🕹 Pair designer and engineer ← They take charge of delivery.
🕵️ Run a broad discovery ← 2h-meeting to define scope/reqs.

🐑 Shepherding ← discuss behavior, accessibility, variants etc.
🛠 Work in progress ← designer and dev work asynchronously. 
🥔 Hot potato process ← they quickly throw ideas back and forth.
🗄 Document before launch ← design/code must exist in docs.
🚀 Sync launch ← work must be delivered in Figma and in code.

Component Sprint Figma Template:
https://lnkd.in/eAiSKZpy

The most impactful way to avoid confusion, tension and miscommunication down the line is to establish mandatory overlaps between designers and developers — before a component is fully designed, built or even signed off.

The entire sprint runs for 2 weeks. First, all candidate components are stored as tickets on a shared board. The WP team starts by mapping the impact vs. effort for these candidate components, conducted by key stakeholders, PMs, designers and engineers.

Once a component is prioritized, the team pairs a designer and a developer to take charge of its delivery. Next, the team schedules a 2h-meeting to kick off a sprint with the wider team and define scope, requirements and relationships with other components.

That’s also the time to discuss API, behavior, accessibility, animation, options or variants, localization and general requirements — but also add screenshots, links, reference code snippets, and other artifacts relevant for the component.

Eventually, the funnel for participation narrows. After the first sprint meeting, the designer-developer pair work asynchronously, throwing mock-ups, ideas and reviews back and forth — similar to the Hot Potato process by Dan Mall.

Components are designed and built in parallel. But they are delivered in Figma and as a code library at the same time. And: before going to production, they both must exist in the design system — even if the docs are preliminary and incomplete.

✤ Useful resources:

How To Launch Design System Components (+ Figma Kit)
https://lnkd.in/edNacHw7

“How We Organize Design Files in Figma” (+ Figma Kit)
https://lnkd.in/eSPuhDSK

How To Clean Up A Messy Figma File
https://lnkd.in/eFciDnwe

#ux #design

🎢 Onboarding UX Playbook (https://lnkd.in/eiKcTgZd), a practical guide on how to design better onboarding, common mistakes to avoid and some practical guidelines — along with decision trees and Figma templates below. Neatly put together by Ben Shih.

Ben highlights a few valuable points that are often forgotten or overlooked. In many interfaces, onboarding ends after just a few of tooltips or onboarding tutorials, leaving people on an empty page without guidance. Yet good onboarding shouldn’t end until the user forms a habit of using the product.

Wes Bush noted that the main goal of onboarding is to help users hit their first strike — to get to the first success moment and understand the value quickly. That means balancing different cases and customizing onboarding for user’s needs.

Good onboarding can’t be generic. It has to be relevant and valuable. So define your user segments and profiles first. Design presets to help them get to success moments faster. Think of the questions you need to ask to customize their experience. Think about defaults, filters and presets they might need.

Onboarding tutorials often appear once and get instantly dismissed, nowhere to be found again. So allow users to find them when they need it. Bring them up when users make mistakes.

And: test the discoverability of your features continuously. If a feature is obvious, you might not need to explain it at all. And if it isn’t, perhaps onboarding won’t solve this problem either.

Useful resources:

Complete Onboarding UX Guide (free eBook), by Intercom
https://lnkd.in/eAxT6ZM4

Choosing Onboarding Methods and Components, by NewsKit
↳ Figma: https://lnkd.in/eWn5FPWA
↳ Docs: https://lnkd.in/ed7HjzkW

Onboarding Case Studies, by Andrew Pacholik
https://onboarding.study

Onboarding UX Decision Tree, by NewsKit
https://lnkd.in/e8TmMDFf

Product Onboarding UX Playbook, by Eleana Gkogka
https://lnkd.in/edcDfMFG

UX Onboarding Patterns, by Eve Weinberg https://lnkd.in/e7_M4kDv

User Onboarding Best Practices, by Taras Bakusevych
https://lnkd.in/eRwr2tEc

Guide to Onboarding, by Phil Byrne
https://lnkd.in/esEavgw7

How Spotify Organizes Onboarding in Figma
https://lnkd.in/ei434tqq

Mobile App Onboarding Practices, by Alita Joyce
https://lnkd.in/eaKF3Crq

Mobile Onboarding Wireframe Flows (Figma template)
https://lnkd.in/eAzAA3bU

#ux #onboarding

🌳 DesignOps Guides and Starter Kits (Figma). Practical guides and templates for DesignOps, including hiring, design process, onboarding, career frameworks, building teams and success metrics ↓

✤ DesignOps Templates and Starter Kits

DesignOps Template For Design and Research, by Ben Shih
https://lnkd.in/e7yVeAbU

DesignOps Starter Kit, by Michelle Chin
https://lnkd.in/eCNGmWEy

DesignOps Kick-Off Workshop Template (Figma), by Farid Sabitov https://lnkd.in/ePJiHEcT

DesignOps Workbook (FigJam), by Samlam
https://lnkd.in/eQ7n3pux

DesignOps 101 Cards Deck (Figma), by Iram Khan https://lnkd.in/e3upgvXs

✤ Guides and Glossary

DesignOps Guide and Glossary, by Meredith Black
https://lnkd.in/ecaUJrvQ

Navigating The DesignOps Wilderness, by Jake Geller
https://lnkd.in/ePZ2ybbx

What DesignOps Is And Isn’t, by Rachel Posman https://lnkd.in/erVt4mRt

DesignOps: Small Team Starter Guide, by Futurice https://lnkd.in/euppc9dS

When Is The Right Time To Think About DesignOps?, by Patrizia Bertini
https://lnkd.in/e9i5FpUC

DesignOps Guide For Early Startups, by Emrah Kara
https://lnkd.in/ehg_Aaeh

A Practical Guide To DesignOps, by Patrizia Bertini
https://lnkd.in/eebQJB6G

Zalando DesignOps Case Study
https://lnkd.in/e8bJ8u_t

AirBnB DesignOps Case Study
https://lnkd.in/eU5NyG5N

The State of DesignOps Report (PDF) https://lnkd.in/ex52TwVY

DesignOps Community + Newsletter, by Ch'an Armstrong
https://lnkd.in/ebSg6UDe

✤ Free eBooks

Why Your Organization Needs DesignOps (PDF), by Abstract
https://lnkd.in/enCdJBx6

DesignOps Handbook (PDF), by DesignBetter
https://lnkd.in/eECasgjE

✤ Books

– Org Design for Design Orgs, by Peter Merholz, Kristin Skinner
– DesignOps: Managing Chaos, by Lisa Welchman
– Orchestrating Experiences, by Chris Risdon, Patrick Quattlebaum
– Thinking in Systems, by Donella Meadows

Happy designing, everyone! 🎉🥳

#ux #design

🐝 How To Write Effective UX Research Invite Emails (https://lnkd.in/eWGer4bi), a practical guide on how companies across B2B and B2C write invite emails for UX research to get more useful responses. By Rosie Hoggmascall.

🚫 Avoid generic, vague, company-focused subject lines.
✅ Good subject line: “What do you think of [X] so far?”.
✅ Better subject line: “👋 Can you answer one quick question?”.
✅ For subject lines, try a direct question that is easy to answer.

✅ Introduce yourself in the very first line of body copy.
✅ Explain how long the survey will take (5–10 mins max).
✅ Include a survey link in the top 50% of the email.
✅ Be specific and explain why you’re inviting that person.
✅ If needed, add a Calendly link to choose a time slot.

✅ Good copy comes from a real person, not a big company.
✅ Include an authentic email signature from a real person.
✅ Show how many people joined already as social proof.
✅ Put company’s logo at the bottom of your invite email.
✅ Test plain text format: no imagery vs. branded template.

Some emails prompt users to participate to get a chance to win a $250 prize for their time. In my experience, giving a guaranteed $50 voucher works better. Reward doesn’t have to be cash: it must be meaningful. Suggest to plant trees, or support initiatives, or donate funds to a charity of their choice.

We don’t want generic responses. We want honest, constructive, helpful insights — and they aren’t coming from generic emails from corporate research initiatives. So the more an invitation feels like an invite from a colleague who is genuinely interested, the more likely users are to respond. 

Show yourself, your name and your title, and perhaps even your work phone number. Explain how customer’s insights will help you and your team. As a result, you might not only get helpful insights, but bring people on your side, willing to participate and help for years to come.

Useful resources:

How To Write Compelling UX Research Invite Emails (+ Templates), by Lizzy Burnam 🐞
https://lnkd.in/erfKiCHi

Email Templates To Recruit All The Users You Need in 24 Hours, by Chuck Liu
https://lnkd.in/ev6MhEGT

UX Research Participants Handbook, by Gitlab
https://lnkd.in/ezFWEc-E

UX Research Recruiting Email Tips, by Annegret Lasch, David DeSanto
https://lnkd.in/eY-XMwqd

Research Recruitment Email Strategies, by Lauren Gibson
https://lnkd.in/e2xBk6MZ

How To Recruit UX Research Participants By Email, by Olivia Seitz
https://lnkd.in/eJFZT6Qf

#ux #design

25 Free PDF Posters To Boost Learning (https://lnkd.in/eQhiBHTH), a fantastic collection of 25 one-page posters for feedback, mentoring, cognitive load, memory, understanding — to help learners grow and improve conversations between teachers, mentors and students. Kindly put together by Jamie Clarke (and please support Jamie with a coffee if you can).

If you are designing digital experiences for learners, be it EdTech, learning platforms, courses, trainings programs, educational programs, schools or universities, that’s a fantastic set of research-based helpers with plenty of things to keep in mind to improve and maximize learning.

💎 Free Teaching UX Toolkits

How I Teach Design (free eBook + Print), by Jon Kolko
https://lnkd.in/eGTCC6XB

Free Toolkits For Teaching UX, by Interaction Design Foundation (IxDF)
Toolkits: https://lnkd.in/eePCwgAt
Literature: https://lnkd.in/eqS62gSu

Free UX Database: Resources For Learning + Curriculum
https://lnkd.in/e-JMwUjy

🪴 How To Design For Motivation (Notion + Templates), by Anamaria Dorgo
https://lnkd.in/e4CQqUVg

Teaching UX Toolkits and Design Worksheets (free eBook + PDF/Word worksheets), by yours truly Vitaly Friedman
https://lnkd.in/eXz7i_Ke

UX Challenges and Product Design Exercises, by yours truly
https://lnkd.in/efurVtEJ

🪂 UX Mentorship Guides

Getting Started as a UX Mentor, by Amanda Spilchen
https://lnkd.in/eiYGESHJ

Mentorship 101: How to Mentor New UX Designers, by Uxcel
https://lnkd.in/eETURjQh

How To Design An Internship From Scratch, by yours truly
https://lnkd.in/e_9HfP8h

#ux #design #teaching

🗃️ How To Organize Your UX Research Project (https://lnkd.in/esX-puyW), a practical guide on how to document your findings in Notion — from a landing page to project details with the brief and deliverables, to case study tasks and embeds. A fantastic format, kindly shared by Steffan Morris Hernandez. 👏🏼👏🏽👏🏾

✅ Add collaborators, duration and type on landing page.
✅ Add project deliverables as a checklist on the page.
✅ Break down research structure by scheduled stages.
✅ Stages: Planning, Surveys, Testing, Analysis, Reports.
✅ Each stage has its own Notion sub-pages and structure.

✅ Outline business challenges, plan and client’s assumptions.
✅ Embed Figjams with research plan, ideation, brainstorming.
✅ Use tags to structure questions, responses, user segments.
✅ Bring data into Figjam to analyze and synthesize insights.
✅ Add images and videos from interview into your final report.

I love how simple and systematic Steffan’s approach to using Notion is. Although the research requires plenty of different tools, ultimately the entire project lives in one place — structured with tags, phases, and interactive embeds for deep-dives.

One benefit is that stakeholders always have access to the work that's happening right now. The other is that they stumble upon actual people using the product or service, with video clips that support insights and recommendations.

Whenever possible, I would try to include these snippets of the actual experience of real users into research reports. There is nothing more powerful to support your argument than visualizing the struggle customers go through with a product or a service.

✤ Useful resources

🔎 UX Research Templates (Notion), by Odette Jansen BSc MEd
https://lnkd.in/ezvK_4GS 

How To Write Better UX Research Reports, by Allison Grayce Marshall
https://lnkd.in/eZ2aGwkU

How To Organize UX Research (+ PDFs), by Daniel Pidcock
https://lnkd.in/emPrnUmf

Glean.ly: UX Research Knowledge Repository Tool, by Daniel Pidcock
https://glean.ly/

How To Build Up UX Research From Scratch (+ Templates), by Ori Dar
https://lnkd.in/eV533Qkt

UX Research Bookmarks (Notion), by Gregg Bernstein
https://lnkd.in/eBahY3_n

✤ UX Research Books:

– Research Practice, by Gregg Bernstein
– Impact: A Complete Guide To Creating A Research Practice, by Nikki Anderson, MA
– Interviewing Users, by Steve Portigal
– Think Like a UX Researcher, by David Travis, Phil Hodgson
– Just Enough Research, by Erika Hall

Happy researching, everyone! 🎉🥳

#ux #research

Typography Variables Figma Starter Kit (https://lnkd.in/e8xrxR9M), a neat little helper with an example of a type scale and variables for font family, font size, line height and font weight — for display text, headings, sub-headings, subtitles, body copy and captions. Very thorough, very detailed and very helpful! Kindly put together and shared by Luis Ouriach.

Useful type tools:

User Interface Typography (free eBook), by Alex Baranov
https://lnkd.in/dxQNvjwz

The Good Line-Height, by Fran Pérez
https://lnkd.in/e_dbaJ2A

Google Font Pairing Palettes (Figma kit)
https://lnkd.in/ekNXpxqC

Font Pairing Guide, by Connary Fagen
https://lnkd.in/eHJ7z3dd

What Can My Font Do?, by Roel Nieskens
https://wakamaifondue.com

Combining Typefaces, wonderful (!) free eBook by Tim Brown
https://lnkd.in/g-Tgbzqt

What The Font? allows you to search for a font by uploading an image
https://lnkd.in/erXWbAyF

Golden Rules of Web Typography, by Vitaly Friedman
https://lnkd.in/eXj3ZX7g

What’s The Right Font Size For the Web?, by Oliver Schöndorfer
https://lnkd.in/e6GqEbPn

The Dictionary of Typography, by Nicholas Rougeux
https://lnkd.in/enpCcsEV

Type Design Knowledge Hub, by Justin Penner
https://lnkd.in/e2S7X229

Happy designing, everyone! 🎉🥳

#ux #design #typography

🌧️ How To Merge Design Systems (https://lnkd.in/ehZd-UGQ), a practical guide with strategies, potential benefits and quick wins for merging existing design systems. Shared by Evgeny Khoroshilov.

🚫 In many companies, not every design system is the same. 
✅ Design teams have different needs, budgets, size, skills.
✅ They often see “design system” projects very differently.
✅ It could be a style guide, UI kit, product, process or service.
✅ Audit what kinds of “design systems” your company has.

✅ A: Keep all systems as is, but add a shared practices layer.
🤔 Each brand maintains its main focus, but duplication is likely.
↳ Set up community of practice without changing structure.
↳ Useful when teams have very different needs and priorities.

✅ B: Identify shared practices and move them into subsystems.
🤔 Priorities might be misaligned, risk of poor collaboration.
↳ Involve all teams to shape subsystem for efficiency gains.
↳ Helpful when shared practices are duplicated or differ a bit.

✅ C: Slowly retire old systems and launch a shiny new one.
🤔 Very expensive, with a risk of disruption and poor adoption.
↳ Run a pilot to test and refine, involving key stakeholders.
↳ Good choice with a legacy system that’s falling apart.

✅ D: One system stays and others gradually retire.
🤔 Streamlines operations, but requires re-training + retooling.
↳ Respect needs and work by other teams, and migrate them. 
↳ Helpful if one system can be extended to meet all needs.

Often the main reason for consolidation of design systems is the need of consistency. It is of course important, but sometimes the cost of enforcing consistency might be very high, disrupting everything from workflows and tooling to culture and team spirit.

I always try to keep in mind that in the end a design system is just a product that we use to build the actual product across teams and brands. Merge design systems if you must, but always involve and support teams behind them as much as you can.

Useful resources:

Multi-Brand Design System (Figma Kit), by Pavel Kiselev
https://lnkd.in/eShgnPnW

Six Different Types of Design Systems, by Dan Mall
https://lnkd.in/ennktfmg

How To Organize Design System At Scale, by Jérôme Benoit
https://lnkd.in/e89Qht76

“How We Organize Design Files in Figma” (+ Figma kits), by Lee Munroe
https://lnkd.in/eSPuhDSK

How To Organize 1250+ Design Screens in Figma (+ File examples), by Lorenzo Palacios Venin
https://lnkd.in/eEYjT667

Booking.com: How We Built Our Multi-Platform Design System, by Nicole Saidy
https://lnkd.in/ejFGB7wx

#ux #designsystems

Taplio

Vitaly Friedman's Linkedin Analytics

Vitaly Friedman

What is Vitaly talking about?

Vitaly Friedman's Best Posts (last 30 days)

Want to drive more opportunities from LinkedIn?

Taplio

.css-1jgreyo{background-image:linear-gradient(284deg, rgba(39,43,72,1) 0%, rgba(33,47,183,1) 100%);color:transparent;-webkit-background-clip:text;background-clip:text;}Vitaly Friedman's Linkedin Analytics

Vitaly Friedman

What is Vitaly talking about?

Vitaly Friedman's Best Posts .css-qqfgvy{font-size:var(--chakra-fontSizes-md);}(last 30 days)

Want to drive more opportunities from LinkedIn?

Vitaly Friedman's Linkedin Analytics

Vitaly Friedman's Best Posts (last 30 days)