#452: Design Workflow

How to choose the right idea, navigate difficult conversations and communicate design. Issue #452 • Apr 16, 2024 • [View in the browser]( [Smashing Newsletter]( Iyi akşamlar Smashing Friends, Design workflow is always tricky to get right. Despite all the incredible tooling and UX methodologies, finding just the right way to do good work is always challenging. It’s challenging because it involves the way people collaborate, communicate, make decisions, and navigate difficult conversations, among many things. Of course, there is no perfect design workflow. However, the best work doesn’t emerge through an ideal process. Often, it appears when the team has time, space, and a supportive culture that enables and motivates everyone to do their best work. That’s when the design process emerges on its own rather than adopting existing frameworks. In this newsletter, we’ll explore best practices for better design, how to choose the right idea, how to communicate design, and how to find and make time to design. We hope it will help you discover a better design workflow for you and for your team. [Smashing Workshops]( On our end, we warmheartedly welcome you to our upcoming online workshops on design and front-end — with new workshops on [design system process]( with Nathan Curtis, [behavioral design]( with Susan Weinschenk, and [accessibility for designers]( with Steph Walter. Ah, and of course, we have a lovely [SmashingConf Design & UX]( coming up later this year in the beautiful city of Antwerp, Belgium 🇧🇪 — along with waffles, chocolates, and a dash of Belgian fries, of course! We’d be absolutely delighted to welcome you there! [Jump to all speakers and topics](. Bring your friends, colleagues, neighbors, and total strangers — what a remarkable experience it will be! 🎉🥳 — [Vitaly]( --------------------------------------------------------------- 1. Design Good Practices Structure and organization might not sound like the most exciting things, but investing your time in properly arranging and naming your files can prevent slow-downs and unmanageable situations in the long term. To help you name and structure your files and components and organize your design documents, Javier Cuello created [Design Good Practices](. [Design Good Practices]( Design Good Practices features guidelines and practical examples for keeping your design files in order. You’ll learn what makes an effective name, how to organize pages, frames, artboards, layers, and components, and how to document design specifications, practices, and workflows to keep everyone in the team aligned. A great resource to turn a creative mess into a logical, predictable, and scalable way of working. (cm) --------------------------------------------------------------- 2. How To Choose The Right Idea When you’re about to tackle a design challenge, you might need better insight into what brings real value to your end-users. The Kano Model is a great opportunity to prioritize features based on the degree to which they are likely to satisfy and delight customers. If you’re new to the Kano Model, Eva Hörner wrote a [case study]( on how she and the design team at CarePay applied the model to gain a user’s perspective when prioritizing features. [The ultimate guide to the Kano Model]( In the case study, Eva discusses the basics of creating a Kano survey, how they analyzed the results, and the key takeaways from the Kano Model analysis. As it turns out, in the case of CarePay, the analysis revealed that their end-users prioritize differently than the design team had expected. A helpful strategy to gain precious insights into what customers want so you can make the right decisions for your product. (cm) --------------------------------------------------------------- 3. Navigating Tough Conversations “We don’t have time for that.” “That’s just an edge case.” “We’ll focus on that later.” Maybe you’ve heard some of these phrases before in conversations with cross-disciplinary teams. Emma Siegel wrote a [friendly guide on how to navigate tricky conversations](. It focuses on defending accessibility and inclusive design, but some of the ideas can be applied to tough discussions around other topics as well. [Inclusive Design Advocacy: A Guide to Navigating Tough Conversations with Your Teams]( In her guide, Emma shares tips on how to frame the conversation around inclusive design and scenarios you might run into when collaborating with design and product teams. For each scenario, she provides talking points and calls to action to bring up. Practical tips and a great reminder that being an advocate is not just disagreements and being right, but an opportunity for growth and education. (cm) --------------------------------------------------------------- From our sponsor Build Your GraphQL Content API. Instantly. [HYGRAPH]( Define your content schema, create or integrate other content sources, and deliver content to any channel using a powerful GraphQL API. With Hygraph, your content is hosted in your preferred data center and served from the world’s fastest CDN. Plus, Hygraph fits right into your tech stack, supporting your favorite frontend frameworks, systems, and APIs. [Create your free account](. --------------------------------------------------------------- 4. How To Communicate Design “Good design is invisible.” Like many designers, Kike Peña has been practicing this mantra all his career. But after facing unexpected results from users several times, he started to question if the success of a user experience relies only on a good interface design solution. Kike came to the conclusion that you need another layer to make a design even more robust and accepted: a [proper communication plan](. [How To Communicate Design]( Kike advocates for a combination of an invisible design (i.e., a design that should be free of explanation) and effective communication. Of course, not everything needs a communication plan, but it is a part of creating a design strategy to think about how and when to communicate things to make them relevant to users. To give you a better idea of when accompanying communication is necessary — and what it can look like — Kike created a [graphic]( that visualizes design complexity and the level of communication needed. (cm) --------------------------------------------------------------- 5. Upcoming Workshops and Conferences That’s right! We run [online workshops on frontend 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 Workshops]( 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: - [Design System Planning and Process]( workflow with Nathan Curtis. April 18–26 - [Typography Masterclass]( design with Elliot Jay Stocks. May 1–15 - [Behavioral Design Workshop]( ux with Susan Weinschenk. May 6–20 - [Scalable CSS Masterclass]( dev with Andy Bell. May 9–23 - [Design Token and UI Component Architecture]( workflow with Nathan Curtis. June 6–14 - [Accessibility for Designers]( ux with Stéphanie Walter. June 3–12 - [Designing For Complex UI Masterclass]( ux with Vitaly Friedman. June 20 – July 2 - [Advanced Modern CSS Masterclass]( dev with Manuel Matuzović. June 24 – July 8 - [Design Patterns For AI Interfaces]( ux with Vitaly Friedman. July 9–23 - [Jump to all workshops →]( --------------------------------------------------------------- 6. The 11-Star Experience Framework Have you heard of the 11-Star Experience already? Airbnb’s CEO and co-founder Brian Chesky is famous for the exercise. It takes a part of your user experience and extrapolates it to the extreme in both directions to, finally, find the sweet spot: the best feasible UX. If you want to give it a try, Reid Hoffmann [summarized everything you need to know to run the exercise]( with your team. [11-Star Experience]( The idea behind the 11-Star Experience is simple yet effective: Imagine what the worst experience with your product would look like (1-star experience), what the most magical experience would look like (11-star experience), and everything in between. Think big and stretch the limits of what’s possible. The 9-, 10-, and 11-star experiences might not be feasible, but by designing the extreme you can come backward and find the best experience: the one that is delightful and feasible. (cm) --------------------------------------------------------------- From our sponsor Experience Penpot Fest: The Design, Code And Open-Source Event In Barcelona [Penpot Fest]( Calling all Design, Code & Open Source fans! Don’t miss [Penpot Fest]( second edition in Barcelona, June 5–7th. This exciting event is packed with: an evening welcome party; a top line-up of speakers from all around the world (featuring Smashing Magazine’s collaborator Mikolaj Dobrucki); workshops to get from zero to hero in Penpot; coffee breaks & chill-out time to connect with great peers; and a memorable sunset cocktail on Thursday evening. By using the code SMASHMAG, you’ll unlock a 50% discount on the standard ticket price (after Early Bird tickets have sold out). [Get your Penpot Fest tickets]( --------------------------------------------------------------- 7. Creating Space For Effective Work 50-30-20. According to Matt Bond, former Lead Designer at Dropbox, this is the ideal time usage for a designer to avoid burnout, or, at least, to reduce the likelihood of it happening. In his post “[Avoiding burnout at a tech company]( he takes a closer look at design’s involvement during a project and how to create space for effective work. [Avoiding burn out at a tech company]( As Matt points out, to be effective, designers should spend around 50–60% of their time on a single big and impactful project and around 30% of time on a project that helps the greater design org — it could be contributing to pattern libraries, creating a playbook of processes and techniques, or investing time in process overhauls and refinements, culture improvements, or recruiting. The remaining 20% of time are kept free for the things that pop up. Of course, the 50-30-20 allocation is the ideal and not always possible, but it gives you a better idea of what to aim for to give designers the space they need to do good work. (cm) --------------------------------------------------------------- 8. News From The Smashing Library 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Success at Scale]( by Addy Osmani - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Check out all books →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [How To Monitor And Optimize Google Core Web Vitals]( - [Sliding 3D Image Frames In CSS]( - [Penpot’s CSS Grid Layout: Designing With Superpowers]( - [Connecting With Users: Applying Principles Of Communication To UX Research]( - [The Things Users Would Appreciate In Mobile Apps]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](