User Research
Use direct user observation, not just surveys and focus groups.
A product team sent out a survey asking users if they wanted a new “advanced search” feature. 80% of respondents said yes. The team spent months building it. After launch, almost nobody used it. A different team, working on a similar problem, went to their users’ offices and just watched them work. They observed that users weren’t struggling with search, but with organizing their results. Based on this direct observation, they built a simple tagging feature that became the most beloved part of the product.
Stop asking users what they want. Do observe what they do instead.
A team developing a new photo editing app asked users, “What features do you want?” The users, trying to be helpful, listed dozens of complex features they saw in other professional software. The team got overwhelmed. A different designer took a different approach. She gave users a simple task: “Improve this photo.” She then silently observed what they tried to do. She noticed almost everyone struggled to crop the photo correctly. By observing their behavior, she realized the most important feature wasn’t a complex filter, but a simple, intuitive cropping tool.
The #1 secret for getting brutally honest feedback from your users.
The secret is to give them permission to be critical. A designer was testing his new prototype. He asked the user, “So, what do you think of my design?” The user, not wanting to be rude, said, “It’s nice.” For the next test, the designer changed his framing. He said, “I didn’t design this, and we know there are problems with it. Your job is to help me find them. Please be as brutally honest as possible; you can’t hurt my feelings.” The user immediately started pointing out flaws, providing invaluable, honest feedback.
The biggest lie you’ve been told about user personas.
The lie is that user personas are just a made-up, generic description of a fake person. A team created a persona named “Marketing Mary” with a stock photo and a list of clichés. Nobody on the team took it seriously. A better team created a persona based on interviews with ten real customers. Their persona, “Jasmine,” included direct quotes, specific pain points, and real stories from their research. Jasmine felt like a real person, and the team constantly referred to her when making design decisions, ensuring they were building for a real user.
I wish I knew this about the power of ethnographic research when I was a junior designer.
As a junior designer, I designed a new checkout process for a retail website from the comfort of my office. I thought it was perfect. I wish I had known about ethnography. A senior designer went to a customer’s home and watched her try to make a purchase. He saw her get distracted by her kids, lose her internet connection, and struggle to find her credit card. These real-world interruptions and context, which I had never considered, completely changed our understanding of what a truly robust and user-friendly checkout experience needed to be.
I’m just going to say it: You are not your user.
A skilled software engineer designed a new application with a powerful but complex interface. He loved it; he could use keyboard shortcuts and advanced features to work incredibly fast. When they launched the product, their non-technical users were completely lost. They found the interface intimidating and confusing. The engineer had made the classic mistake of designing the product for himself. He had forgotten that he has a level of technical expertise and familiarity with the product that his average user simply does not.
99% of startups make this one mistake when conducting user research.
The most common mistake is only talking to users who love their product. A startup would interview their most enthusiastic early adopters. This felt good and confirmed their biases, but it didn’t help them grow. A smarter startup made a point of seeking out and interviewing people who had tried their product and then stopped using it. These conversations were difficult and ego-bruising, but they provided the most valuable and actionable insights about the product’s fundamental flaws and missing features.
This one small action of testing with just five users will reveal 85% of the usability problems in your design.
A team thought they didn’t have the time or budget for extensive user testing. They were about to launch a product with known issues. A UX consultant convinced them to take one small action: test the design with just five users from their target audience. They were shocked. Within the first five tests, they had identified a clear pattern of the same major usability problems over and over again. This small, quick round of testing gave them a clear, prioritized list of the most critical issues to fix before launch.
The reason your product is failing is because you skipped user research.
A startup spent a year and a million dollars building a sophisticated new social media app. They launched it with a big marketing campaign, and nobody signed up. The product failed. The reason was simple: they had a solution, but they had never validated the problem. They had built the entire product based on the founder’s assumptions, without ever talking to a single potential user. A few weeks of user research at the beginning would have revealed that nobody wanted what they were building, saving them a year of wasted effort.
If you’re still designing based on your own opinions, you’re losing touch with your users’ needs.
Two designers on a team were in a stalemate, arguing for hours about which of their two different designs for the homepage was better. The argument was based entirely on their personal opinions and tastes. The team lead stopped the argument and said, “Let’s test it.” They created simple prototypes of both versions and showed them to five users. Four out of the five users found one of the designs much easier to understand. The argument was settled in an hour with real data, not with opinions.
Wireframing & Prototyping
Use low-fidelity paper prototypes for early ideas, not high-fidelity mockups.
A team spent two weeks creating a beautiful, high-fidelity mockup of a new feature idea. They showed it to their manager, who pointed out a fundamental flaw in the concept. The team was devastated and hesitant to throw away their beautiful work. A different team sketched out five different ideas on paper in one afternoon. They were able to quickly test the core concepts with users and throw away the bad ideas without any emotional attachment. Low-fidelity prototypes are for exploring ideas; high-fidelity is for refining them.
Stop jumping straight into Figma or Sketch. Do sketch your ideas on paper first instead.
A designer stared at a blank screen in Figma, paralyzed by the “blank canvas” problem. She was trying to get the layout perfect before she had even figured out the core idea. Her colleague, meanwhile, took out a pen and paper. He was able to quickly sketch out ten different layout ideas in ten minutes. The freedom of sketching, without the pressure of creating a polished design, allowed him to explore a much wider range of possibilities and find a promising direction before ever opening a design tool.
The #1 hack for creating interactive prototypes in minutes.
The secret is to use a simple “hotspot” prototyping tool. A designer had a series of static screen mockups she had created. She wanted to test the user flow, but she didn’t have time to build a complex, coded prototype. She used a tool like Marvel or InVision. She was able to upload her static images and simply draw invisible “hotspots” over the buttons. When a user clicked a hotspot, it would link to another screen. In less than 30 minutes, she had created a realistic, clickable prototype that she could use for user testing.
The biggest lie you’ve been told about the importance of pixel-perfect wireframes.
The lie is that a wireframe needs to be a perfectly aligned and beautiful document. A junior designer spent a full day meticulously arranging the boxes and lines in his wireframe, making sure everything was “pixel-perfect.” He was missing the point. A wireframe is a communication tool. Its purpose is to communicate the structure, hierarchy, and core functionality of a screen. A messy but clear wireframe that effectively communicates an idea is infinitely more valuable than a beautiful one that doesn’t.
I wish I knew this about the difference between a wireframe, a mockup, and a prototype when I started in design.
When I first started, I used all these terms interchangeably. I would present a static, black-and-white wireframe to a client and they would say, “I don’t like the colors.” I wish I had known the clear distinctions. A wireframe is a low-fidelity blueprint focused on structure. A mockup is a high-fidelity, static visual design that shows what the product will look like. A prototype is an interactive simulation of the product that allows users to actually click through the flow. Understanding these different stages is key to clear communication.
I’m just going to say it: A beautiful design that solves the wrong problem is worthless.
A designer created a visually stunning, award-winning weather app. The animations were beautiful, and the typography was perfect. But the app was a commercial failure. The reason? The users found it confusing to get a simple, at-a-glance forecast. It prioritized beauty over function. A competing app, which looked much simpler, was a huge success because it solved the user’s core problem quickly and efficiently. A good design must first be useful; its beauty is secondary.
99% of designers make this one mistake when presenting their wireframes.
The most common mistake is just showing the wireframes without telling the story. A designer will put a wireframe on the screen and say, “Here is the homepage.” The audience is left confused, with no context. A better designer will frame the presentation as a story. They will say, “This is Sarah, our user. She is trying to achieve this specific goal. This is the journey she will take through our product to achieve that goal, and here is the first screen she will see.”
This one small habit of annotating your wireframes will change the way developers understand your designs forever.
A designer would hand off his wireframes to the development team with no notes. The developers were constantly coming back to him with questions about how a specific feature should work or what an error state should look like. He adopted a new habit: he started adding small, clear annotations to his wireframes to explain the logic, the interactions, and the edge cases. This one small action dramatically reduced the number of questions and resulted in a final product that more accurately matched his design intent.
The reason your design is so confusing is because you didn’t test your prototype with users.
A team designed and built a new application based on their own internal discussions. They all thought the user flow was logical and intuitive. When they launched, users were constantly getting lost and frustrated. The team had made a critical error: they had never created an interactive prototype and tested it with real users. A single day of prototype testing would have revealed the confusing parts of their design, allowing them to fix them before a single line of code was written.
If you’re still sending static JPEGs for feedback, you’re losing the context of the user flow.
A designer emailed a JPEG of a single screen to a stakeholder for feedback. The stakeholder was confused. They didn’t understand how the user got to this screen or what would happen when they clicked the buttons. The feedback was not very useful. For her next design, she sent a link to a simple, clickable prototype. The stakeholder could now click through the entire user journey, understand the context of each screen, and provide much more valuable and informed feedback.
Usability Testing
Use moderated usability testing for deep insights, not just unmoderated tests.
A company used an unmoderated testing tool where users recorded themselves performing a task. They got useful data, but they were left with questions about why the users were struggling. For their next study, they ran a moderated test with a facilitator who could ask follow-up questions in real-time. When a user hesitated, the facilitator could ask, “What are you thinking right now?” This ability to probe deeper and understand the user’s mental model provided rich, qualitative insights that an unmoderated test could never reveal.
Stop defending your design during a usability test. Do stay silent and let the user explore instead.
A designer was running a usability test. When the user started to struggle with a part of the design, the designer jumped in and said, “Oh, you just have to click that button over there!” He had contaminated the test. A good facilitator knows that the most important skill is to be comfortable with silence. They will let the user struggle, because those moments of struggle are where the most valuable insights are found. Your job is not to be a tour guide; it’s to be a quiet observer.
The #1 tip for writing effective usability testing tasks.
The secret is to write tasks that are realistic scenarios, not just simple instructions. A bad task is: “Click on the button to create a new invoice.” A good task is: “You’ve just finished a project for a client. Now, send them an invoice for $500.” The first task just tests if the user can find a button. The second, scenario-based task tests the entire workflow and allows you to see if the user can achieve their actual goal in a realistic context.
The biggest lie you’ve been told about needing a dedicated usability lab.
The lie is that you need a fancy, expensive lab with a two-way mirror and special recording equipment to do usability testing. A startup was putting off usability testing because they thought they couldn’t afford a lab. A UX consultant showed them that they could get 90% of the value by simply sitting next to a user in a quiet conference room with a laptop. The most important part of usability testing is not the room; it’s the conversation with the user.
I wish I knew this about the “think aloud” protocol when I ran my first usability test.
For my first usability test, I just gave the user a task and watched them click around in silence. I could see what they were doing, but I had no idea why. I wish I had known about the “think aloud” protocol. For my next test, I gave the user a simple instruction: “As you go through this task, please try to speak all of your thoughts out loud.” Hearing their continuous stream of consciousness revealed their expectations, their points of confusion, and their mental model, which was the most valuable data of all.
I’m just going to say it: If you’re not doing usability testing, you’re not doing user-centered design.
A team prided themselves on being “user-centered.” They had detailed user personas and customer journey maps. But they never actually sat down and watched a real person try to use their product. They were making all of their design decisions based on assumptions about their users, not on direct observation. User-centered design is not a theoretical exercise. The core activity, the one thing you cannot skip, is putting your design in front of a user and seeing what happens.
99% of teams make this one mistake when recruiting participants for usability testing.
The most common mistake is testing with their own colleagues, friends, or family. A developer asked his co-worker to test his new app. The co-worker already understood the technical jargon and the company’s internal logic. Her feedback was not representative of a real user. To get valid results, you must test with people who are representative of your actual target audience, people who are not familiar with your project and do not have the curse of internal knowledge.
This one small action of recording your usability sessions will change the way you analyze and share your findings forever.
A designer ran a usability test and took frantic, handwritten notes. When she tried to present her findings to the team later, she struggled to remember the specifics. For her next test, she took one small action: she used a simple screen recording tool to record the session. Now, she could go back and re-watch the key moments. More importantly, she could show a short, powerful video clip of a user struggling to the stakeholders. This video clip was far more persuasive than any bullet point in a report ever could be.
The reason your users are getting frustrated is because you’re not testing your designs with them.
A development team launched a new feature and was flooded with support tickets from frustrated and confused users. The team was shocked; the feature had made perfect sense to them. The reason for the frustration was that the feature’s design had never been tested with real users before it was built. A single round of usability testing would have identified the confusing parts of the design and allowed them to fix them, saving the company from a frustrating launch and a wave of angry customers.
If you’re still waiting until the end of the project to do usability testing, you’re losing the opportunity to make critical changes early on.
A team followed a “waterfall” process. They spent six months designing and building a new product. Then, a week before launch, they did their first usability test. The test revealed a fundamental flaw in the core concept of the product. It was too late to make any significant changes. A smarter team integrates usability testing throughout the entire process. They test low-fidelity prototypes early and often, allowing them to find and fix these major conceptual problems when the cost of making changes is still low.
Information Architecture
Use card sorting to design your information architecture, not your own intuition.
A designer was struggling to organize the content on a large website. He tried to create a navigation menu based on his own intuition, but he was just guessing. He decided to run a card sorting exercise. He wrote all the key topics on index cards and asked real users to group them in a way that made sense to them. The patterns that emerged from this exercise gave him a clear, user-driven blueprint for how to structure the site’s information architecture.
Stop designing your navigation menu last. Do make it one of the first things you design instead.
A team designed all the individual pages of their website first. Then, at the very end, they tried to cram all of those pages into a navigation menu. The result was a confusing, disorganized mess. A better approach is to design the information architecture and the navigation structure first. By creating a clear site map and defining the top-level navigation categories at the beginning of the project, you create a solid foundation upon which all the individual pages can be built in a logical and consistent way.
The #1 secret for creating an intuitive and scalable information architecture.
The secret is to ensure that your categories are mutually exclusive and collectively exhaustive. A website’s help section had two overlapping categories: “Billing” and “Payments.” A user looking for information on how to update their credit card was confused about where to look. A well-designed architecture would have clear, distinct categories that don’t overlap. This makes the structure easy for users to understand and easy for the company to add new content to in the future without creating more confusion.
The biggest lie you’ve been told about the “three-click rule”.
The lie is that every piece of content on your website must be accessible within three clicks. This oversimplified “rule” has led to many designers creating massive, overwhelming navigation menus, trying to put everything on the homepage. The reality is that users don’t mind clicking, as long as each click is confident and leads them closer to their goal. A user would rather take six clear, confident clicks than two confusing ones. The goal is not to minimize clicks, but to maximize clarity.
I wish I knew this about the principles of cognitive psychology when I was designing my first website navigation.
When I designed my first website, I created a navigation menu with twelve different top-level items. I didn’t know about the psychological principle of “Miller’s Law,” which suggests that the average person can only keep about seven items in their working memory at a time. My massive navigation menu was causing “cognitive overload” for my users, making it difficult for them to process the options. I wish I had known that a good information architecture respects the limitations of the human brain.
I’m just going to say it: Your hamburger menu is hiding all of your important content.
A website designer, wanting a clean, minimalist look, hid all of the site’s navigation behind a “hamburger” menu icon (three horizontal lines), even on the desktop version. The problem is a concept called “out of sight, out of mind.” A user visiting the site had no idea what content was available because all the navigation options were hidden. By moving the most important, top-level navigation items out from behind the hamburger menu and making them permanently visible, the site’s engagement and user satisfaction increased dramatically.
99% of websites make this one mistake with their site structure.
The most common mistake is creating a navigation structure that perfectly matches the company’s internal organizational chart. A university website had top-level navigation items like “Office of the Bursar” and “Provost’s Department.” A prospective student had no idea what these terms meant or where to find the information she was looking for, which was “Tuition Costs.” A good site structure is organized around the user’s mental model and the tasks they are trying to accomplish, not the company’s internal bureaucracy.
This one small action of creating a site map will change the way you think about your website’s organization forever.
A team was about to redesign their website. Before they started designing any pages, the information architect took one small action: she created a visual site map that showed every single page on the site and how they were all connected. This one document gave the entire team a “10,000-foot view” of the website’s structure. It allowed them to easily identify redundant pages, confusing pathways, and opportunities to create a more logical and user-friendly organization.
The reason users can’t find what they’re looking for on your site is because your information architecture is a mess.
A user went to an e-commerce website looking for “men’s running shoes.” He clicked on “Men,” then “Footwear,” then “Athletic.” He still couldn’t find them. The reason was that the site’s information architecture was both too deep and had confusing labels. A competitor’s website had a clear, simple navigation: “Men > Shoes > Running.” The user found what he was looking for in two clicks. If users can’t find it, they can’t buy it. A clear IA is fundamental to a good user experience.
If you’re still organizing your website based on your company’s internal structure, you’re losing your users’ patience.
A large corporation’s website was a mirror of its internal departments. To find information about a specific product, a user had to know which of the company’s six different business units was responsible for that product. It was impossible for an outsider to navigate. Users don’t care about your org chart. They want to find information based on the topics and tasks that are relevant to them. A user-centered information architecture completely ignores the internal structure of the company.
Accessibility (a11y)
Use semantic HTML for accessibility, not just ARIA attributes as a patch.
A developer built a website using generic <div> elements for everything. He then tried to “patch” it for accessibility by adding a lot of complex ARIA (Accessible Rich Internet Applications) attributes. The site was still confusing for screen reader users. A different developer used semantic HTML from the start. She used a <button> for a button, a <nav> for navigation, and an <h1> for the main heading. By using the correct, native HTML elements, she got a huge amount of accessibility for free, without needing complex patches.
Stop thinking of accessibility as a checklist. Do design for inclusivity from the start instead.
A team treated accessibility as a final “checklist” to be completed before launch. They would go through and make sure they had alt text and met color contrast requirements. This resulted in a product that was technically compliant but still difficult to use for people with disabilities. A better team embraced inclusive design from the very beginning. They considered the needs of diverse users at every stage of the design process, which resulted in a product that was not just compliant, but genuinely usable and welcoming for everyone.
The #1 secret for designing for screen reader users that will surprise you.
The secret is to use clear, well-structured headings. A sighted user can quickly scan a webpage to understand its structure. A screen reader user navigates in a similar way, by jumping between the headings (<h1>, <h2>, etc.) to get an outline of the page’s content. A designer who just makes text bigger and bolder to create visual headings is creating a huge barrier for screen reader users. Using proper, semantic heading tags is the most important thing you can do to make your content navigable.
The biggest lie you’ve been told about accessibility being “too expensive” or “too difficult”.
The lie is that accessibility is a huge, costly extra step that you have to bolt on at the end of a project. The reality is that if you consider accessibility from the very beginning of the design process, it is not significantly more difficult or expensive. In fact, building an accessible product from the start is far cheaper than trying to fix an inaccessible one later, especially if you are faced with a lawsuit. Accessibility is not a burden; it’s just good design.
I wish I knew this about the importance of color contrast when I was a junior designer.
As a junior designer, I loved using subtle, low-contrast color palettes. I would use light grey text on a slightly lighter grey background because I thought it looked elegant. I wish I had known that a huge portion of the population has some form of low vision and that my beautiful, subtle design was completely unreadable for them. I learned to use a simple color contrast checker tool to ensure that my designs were not just beautiful, but also legible for everyone.
I’m just going to say it: Designing for accessibility improves the user experience for everyone.
A designer was asked to add closed captions to her company’s videos to make them accessible for deaf users. She soon discovered that a huge number of their users were using the captions, not because they were deaf, but because they were watching the videos in a loud public place or with the sound off at their desk. This is the “curb-cut effect.” A feature designed for a specific disability, like a curb cut for wheelchair users, often ends up benefiting a much broader group of people.
99% of web designers make this one mistake with their forms that makes them inaccessible.
The most common mistake is not programmatically associating a <label> with its <input> field. A designer will just place some text next to an input box. A sighted user can see the association, but a screen reader user just hears “text input,” with no context. By using the <label> tag correctly, the screen reader will announce what the input field is for, making the form usable for visually impaired users. It’s a simple, fundamental HTML practice that is often overlooked.
This one small habit of testing your design with a keyboard only will change your perspective on accessibility forever.
A developer thought his website was accessible. He adopted a new habit: before every release, he would try to navigate the entire site using only the “Tab” key on his keyboard, without touching his mouse. He was shocked to find that he couldn’t access the dropdown menu or that the focus would get stuck in a “keyboard trap.” This one small test allowed him to experience the web from the perspective of a user with a motor disability who cannot use a mouse, and it gave him a much deeper, more empathetic understanding of accessibility.
The reason your website is not accessible is because you’re not including users with disabilities in your testing.
A team followed all the automated accessibility checklists and thought their site was perfect. They then ran a usability test with a user who was blind and used a screen reader. The user was completely unable to complete the main task on the site. The team had followed the letter of the law but had missed the human element. You can’t know if your site is truly usable for people with disabilities unless you actually include them in your research and testing process.
If you’re still not providing alternative text for your images, you’re losing a huge portion of your audience.
A news website published an article with a critical, informative chart. The <img> tag for the chart was missing its “alt text.” A visually impaired user, using a screen reader to access the site, just heard “image.” The most important piece of information in the article was completely inaccessible to her. By adding a simple, descriptive alt text attribute, like alt=”Bar chart showing a 20% increase in sales in the last quarter,” the website could have made its content accessible to everyone.
UI Design Systems
Use a comprehensive design system, not just a simple style guide.
A company had a “style guide,” which was a PDF that showed their brand colors and logo. Their products were still a mess of inconsistent buttons and form fields. A different company built a true design system. It was a central, living resource that included not just styles, but a library of reusable, coded UI components, design patterns, and clear usage guidelines. This comprehensive system allowed them to build higher-quality, more consistent products at a much faster pace.
Stop creating one-off components for every new feature. Do build reusable and scalable components instead.
A large company had 17 different, slightly-different-looking buttons used across its various products. Every time a new feature was built, the designer would create a new button from scratch. It was an inefficient and inconsistent mess. They decided to create a design system. They built a single, flexible, and reusable “button” component that could be used everywhere. Now, when they needed to update the button style, they could change it in one central place, and the update would propagate across all of their products.
The #1 secret for getting buy-in for a design system from your entire organization.
The secret is to show, not just tell, the value. A design team tried to get buy-in for a design system by talking about abstract concepts like “consistency” and “brand cohesion.” The business leaders were not convinced. The team changed their approach. They built a small prototype of a new feature, first without the design system, which took them two weeks. Then they rebuilt the exact same feature using their new reusable components, which took them two days. This concrete demonstration of a massive increase in speed and efficiency got them the buy-in they needed.
The biggest lie you’ve been told about design systems stifling creativity.
The lie is that a design system, with its rules and reusable components, will restrict designers’ creativity. A designer was initially resistant to using her company’s new design system, feeling like it was a creative straitjacket. She soon discovered the opposite was true. Because she no longer had to waste her time redesigning basic components like buttons and forms, she was free to focus her creative energy on solving the bigger, more complex design challenges. The system didn’t stifle her creativity; it liberated it.
I wish I knew this about the governance and maintenance of a design system when I first started building one.
I led a team that built a beautiful design system. We launched it and declared victory. A year later, it was a mess. Different teams had created their own new components, and the system was out of date. I wish I had known that building the design system is the easy part. The hard part is creating a clear governance model for how the system will be maintained, how new components will be added, and who is responsible for keeping it up-to-date. A design system without a governance plan will quickly decay.
I’m just going to say it: A design system is a product, not a project.
A “project” has a start date and an end date. A team built their design system as a project. They launched version 1.0 and then disbanded the team. The system quickly became obsolete. A design system is a “product” that serves the other product teams in your company. Like any other product, it needs a dedicated team, a product roadmap, and a process for continuous improvement and support. It is a living entity that evolves with the needs of the organization.
99% of design teams make this one mistake when starting a design system.
The most common mistake is trying to build the entire, perfect design system all at once. A team will spend a year trying to create a comprehensive system with every possible component before anyone can use it. A smarter approach is to start small. Conduct an “interface inventory” to identify the most commonly used components in your existing products, like your button styles. Build and release just those first. This allows you to provide value quickly and build the system incrementally.
This one small action of documenting your design tokens will change the way you maintain consistency across platforms forever.
A company had separate teams for their web, iOS, and Android apps. The “primary blue” color was a slightly different hex code on each platform. They implemented “design tokens.” They created a central file that defined all their core design values—like colors, fonts, and spacing—as named tokens (e.g., color-primary-blue: #007bff). This one small action of creating a single source of truth for their design values allowed them to ensure perfect consistency across every platform, because every app was referencing the same set of tokens.
The reason your product is so inconsistent is because you don’t have a design system.
A user was navigating a large company’s website. On one page, the primary button was blue and rectangular. On another page, it was green and rounded. This visual inconsistency made the product feel unprofessional and untrustworthy. It was clear that different parts of the site had been designed by different people at different times. A design system acts as a single source of truth, ensuring that no matter who designs a new feature, the core elements will always be consistent with the rest of the product.
If you’re still redesigning the same button over and over again, you’re losing valuable time and effort.
A design team at a large company calculated that, across all of their projects, they were collectively spending over 100 hours a month just designing and specifying buttons. It was a massive waste of their talented designers’ time. By investing in a design system with a single, reusable button component, they were able to eliminate this redundant work entirely. This allowed their designers to stop reinventing the wheel and to focus on solving unique and challenging user problems.
Microinteractions
Use microinteractions to provide feedback and delight, not just for decoration.
A user tapped a “Save” button in an app. Nothing happened. He wasn’t sure if the app had registered his tap, so he tapped it again. A good microinteraction would have provided immediate feedback: the button could have briefly changed color or shown a small loading spinner, and then displayed a confirmation message like “Saved!” This small bit of animated feedback provides clarity, builds confidence, and transforms a moment of uncertainty into one of clear communication.
Stop adding animation for the sake of animation. Do ensure every microinteraction has a clear purpose instead.
A designer, wanting his app to look “cool,” added a flashy, spinning animation to every single button press. The animations were slow and quickly became annoying to the users. They served no purpose other than to be decorative. A good microinteraction is functional. It should help the user understand what’s happening, provide feedback on their action, or guide their attention. Animation without a clear purpose is not delightful; it’s just noise.
The #1 tip for designing microinteractions that feel natural and intuitive.
The secret is to base your animations on the principles of physics. When a user dismisses a card in an app, it shouldn’t just instantly disappear. It should animate off the screen with a sense of momentum and easing, as if it were a real physical object. When a menu opens, it shouldn’t just appear; it should expand from the point where the user tapped. By making your animations obey the laws of physics, you make your interface feel more tangible, predictable, and natural.
The biggest lie you’ve been told about microinteractions being unimportant.
The lie is that microinteractions are just small, insignificant “polish” that you can add at the end if you have time. A person used two different apps to do the same task. The first one was functional but felt clunky and lifeless. The second one had thoughtful microinteractions at every step: a satisfying animation when she completed a task, a gentle bounce when she pulled to refresh. She couldn’t articulate why, but she loved using the second app. These small moments are what separate a usable product from a delightful one.
I wish I knew this about the four parts of a microinteraction (trigger, rule, feedback, loop) when I started designing.
When I first started, I would just add random animations. I wish I had known about the formal structure of a microinteraction. A “trigger” initiates the action (e.g., a user tap). The “rule” determines what happens (e.g., the item is added to the cart). The “feedback” is what the user sees or hears (e.g., a small animation and a number updating). And the “loop” determines what happens next. Understanding this simple framework transformed the way I designed, allowing me to be much more intentional and effective.
I’m just going to say it: Good microinteractions are the hallmark of a great product.
Think about the satisfaction of “pulling to refresh” and seeing the little animation, or the simple “like” button on a social media app that bursts into a delightful animation. These small, thoughtful moments are often the things that we remember and love about our favorite products. They show a level of care and attention to detail that signals a high-quality product. A product with great microinteractions feels like it was crafted by people who genuinely care about the user’s experience.
99% of designers make this one mistake when designing button states.
The most common mistake is only designing the default state of a button. They forget to design what the button looks like when it’s hovered over, when it’s pressed, and, most importantly, when it’s in a disabled state. A user will be confused about why they can’t click a button because it looks exactly like an active one. A well-designed button has a distinct visual style for each of these states, which clearly communicates its current status to the user.
This one small action of adding a subtle animation to a loading state will change the user’s perception of waiting forever.
A user had to wait three seconds for a page to load. With a static loading spinner, those three seconds felt like an eternity. A designer replaced the static spinner with a more engaging, custom animation. The loading time was exactly the same, but because the user was distracted by the delightful animation, the “perceived” wait time was much shorter. A good loading animation doesn’t make the app faster, but it can make it feel faster, which is just as important.
The reason your app feels lifeless is because it lacks meaningful microinteractions.
An app could be perfectly functional, but if every button press and state change is instantaneous and abrupt, the app will feel cold, robotic, and lifeless. It’s like having a conversation with someone who has a completely blank expression. Microinteractions are the “body language” of your interface. They provide the subtle cues, feedback, and personality that make the experience feel warm, responsive, and human.
If you’re still not designing the “in-between” moments, you’re losing a huge opportunity to improve your user experience.
A designer focused only on designing the different static states of his application: State A and State B. He never thought about the transition between those states. As a result, when the user moved from A to B, the change was jarring and abrupt. A great designer obsesses over these “in-between” moments. By designing a smooth, animated transition, he can create an experience that feels more fluid, polished, and helps the user to understand the relationship between the different parts of the interface.
UX Writing
Use clear and concise language in your UI, not jargon and technical terms.
A software application showed an error message that said, “Error 500: Null Pointer Exception.” The user, who was not a programmer, was terrified and had no idea what to do. A better-designed application showed a message that said, “Oops! Something went wrong on our end. Please try again in a few minutes.” This clear, human-centered language reduced the user’s anxiety and told them exactly what they needed to know, without using confusing technical jargon.
Stop writing “lorem ipsum” as placeholder text. Do use realistic content from the beginning of your design process.
A designer created a beautiful mockup using “lorem ipsum” for all the text. When the real content was added later, it was much longer than the placeholder text, and it completely broke the layout. By using realistic, representative content from the very beginning of the design process, you can ensure that your design is robust enough to handle the complexities of the real world. Designing with real content leads to a more realistic and ultimately more successful product.
The #1 secret for writing error messages that are actually helpful.
The secret is to explain three things: what happened, why it happened, and what the user can do next. A bad error message just says, “Invalid input.” A good one says, “Password must be at least 8 characters long. Please create a longer password to continue.” The good error message clearly explains the problem and provides a constructive, actionable solution, empowering the user to fix the problem themselves instead of leaving them frustrated and confused.
The biggest lie you’ve been told about UX writing being “just words”.
The lie is that UX writing is just about filling in the text boxes after the “real” design work is done. A team designed a complex settings page with a series of confusing toggle switches. They then asked a writer to “add some words.” No amount of good writing could fix the fundamentally confusing design. UX writing is not about decorating a design; it’s a core part of the design process. The words and the visuals must be designed together to create a cohesive and understandable experience.
I wish I knew this about the importance of voice and tone when I was writing my first app’s onboarding flow.
When I wrote the text for my first app, it was very dry and technical. It felt cold and impersonal. I wish I had known about the concept of “voice and tone.” I could have defined a “voice” for my brand—for example, “friendly and encouraging”—and then used that voice consistently throughout the app. This would have given the app a distinct personality and made the experience of using it feel less like interacting with a machine and more like interacting with a helpful guide.
I’m just going to say it: UX writing is design.
An interface is a conversation between the product and the user. The visual elements—the buttons, the layout, the colors—are one part of that conversation. The words on the screen are the other part. A button is not just a blue rectangle; it’s a blue rectangle that says “Get Started” or “Confirm Purchase.” The words are an inseparable part of the button’s design. Thinking of writing as a separate activity from design is a mistake; they are two sides of the same coin.
99% of products make this one mistake with their call-to-action buttons.
The most common mistake is using a generic, non-descriptive verb like “Submit” or “Click Here” for their call-to-action buttons. A user is on a sign-up form. A button that says “Create My Account” is much clearer and more motivating than one that just says “Submit.” The text on a button should describe the specific action that will happen when the user clicks it. This provides clarity and reduces uncertainty.
This one small action of reading your UI text out loud will change the way you write for users forever.
A UX writer had written a paragraph of instructional text for an app. On the screen, it looked fine. She then took one small action: she read the text out loud. She immediately noticed that it sounded robotic, convoluted, and unnatural. The human ear is a powerful tool for catching awkward phrasing. If a sentence sounds strange when you say it, it will be difficult for a user to read and understand it. This simple habit is the best way to ensure your writing is conversational and human.
The reason your users are confused is because your UX writing is unclear.
A user was on a settings page and saw a checkbox with the label “Enable legacy mode.” He had no idea what “legacy mode” meant, so he was afraid to touch it. The product’s design was visually clean, but the unclear language created a huge point of confusion and anxiety. A simple change to the label, or the addition of a small, helpful description, would have solved the problem entirely. Often, the biggest usability problems are not in the pixels, but in the words.
If you’re still using “Submit” for every button, you’re losing clarity and context.
Imagine a webpage with three different forms, and every single button says “Submit.” It’s confusing and generic. A user filling out a form to subscribe to a newsletter should see a button that says “Subscribe.” A user on a checkout page should see a button that says “Place Your Order.” By using a specific, action-oriented verb that describes the outcome, you make the interface clearer, more predictable, and more confident for the user.
Mobile UX
Use a mobile-first design approach, not just shrinking your desktop design.
A team designed a complex, multi-column website for a desktop screen. Then, as an afterthought, they tried to “shrink” it down for a mobile phone. The result was a tiny, cluttered, and unusable mess. A smarter team used a “mobile-first” approach. They started by designing the experience for the small screen of a mobile phone. This forced them to prioritize the most important content and features. It’s much easier to then scale a simple, focused mobile design up to a larger screen than it is to do the reverse.
Stop designing for the “perfect” mobile user. Do consider different contexts of use, like one-handed operation and poor connectivity.
A designer created a mobile app assuming the user would be sitting at a desk with a perfect Wi-Fi connection. The reality is that mobile users are often on the go, holding their phone with one hand while on a crowded train with a spotty internet connection. A good mobile design accounts for this context. It places key navigation elements within easy reach of the thumb, and it has a robust offline mode that allows the app to function even when the connection drops.
The #1 secret for designing for the thumb zone.
The secret is to recognize that the user’s thumb moves in a natural arc across the screen. An app designer placed the most important, frequently-used action button in the top-left corner of the screen. This made it incredibly difficult for a right-handed user to reach with one hand. By understanding the “thumb zone,” she redesigned the app to place the primary navigation and action buttons along the bottom of the screen, where they were easy and comfortable for the user’s thumb to tap.
The biggest lie you’ve been told about mobile users having short attention spans.
The lie is that because mobile users are often on the go, they only want “snackable,” short-form content. This leads to designers being afraid to create in-depth experiences. The reality is that people will happily read a long article, watch a full-length movie, or play a deep, complex game on their phones, as long as the content is compelling and the experience is well-designed. Mobile users don’t have a short attention span; they have a low tolerance for a poor user experience.
I wish I knew this about the different design patterns for iOS and Android when I designed my first mobile app.
When I designed my first app, I made it look and feel the same on both iOS and Android. I used a navigation tab bar at the bottom for both platforms. This felt natural to iOS users, but Android users were confused because they are more accustomed to different navigation patterns, like a hamburger menu. I wish I had known that each platform has its own established design language and conventions. A good mobile app should feel native to the platform it’s on, not like a direct copy from the other.
I’m just going to say it: Your mobile website is more important than your mobile app.
A company spent a huge amount of time and money building a native mobile app. But they neglected their mobile website. The reality is that a far greater number of new users will discover your business through a web search on their phone than will take the time to download your app. For most businesses, having a fast, responsive, and user-friendly mobile website should be a much higher priority than building a native app. Your mobile website is your front door.
99% of designers make this one mistake when designing for mobile forms.
The most common mistake is using the default keyboard for every single input field. A user is filling out a form on their phone. When they tap on the “email” field, they get the standard text keyboard. When they tap on the “phone number” field, they still get the text keyboard. A good mobile design will automatically bring up the correct keyboard for the input type—the email keyboard with the “@” symbol, the numeric keypad for a phone number—making the process of filling out the form much faster and less frustrating.
This one small action of making your touch targets at least 44×44 pixels will change the usability of your mobile app forever.
A user was constantly tapping the wrong link in a mobile app because the links were too small and too close together. It was a frustrating experience. The human fingertip is not a precise pointing device like a mouse cursor. By taking the small action of ensuring that every single button, link, and interactive element had a minimum touch target size of 44×44 pixels (Apple’s recommendation), the designer made the app instantly easier and more pleasant to use, dramatically reducing a major source of user error.
The reason your mobile app has a high bounce rate is because it’s too difficult to use with one hand.
A commuter on a crowded train was trying to use a new app with one hand while holding onto a pole with the other. The app required her to constantly reach for a menu button in the top corner of the screen. It was awkward and difficult. She gave up and closed the app. The app’s high bounce rate was not because the app was bad, but because it was not designed for the reality of mobile usage. Placing the primary interactive elements within the easy-to-reach “thumb zone” is critical for one-handed usability.
If you’re still hiding key features behind multiple taps, you’re losing mobile users.
A mobile banking app hid the “transfer funds” feature inside a “More” menu, which was three taps away from the home screen. A user, wanting to perform this common task, had to hunt for it every single time. A redesign of the app placed this critical feature directly on the main dashboard, one tap away. User satisfaction and engagement with the feature soared. On mobile, every extra tap is a point of friction. The most important and frequently used actions should be the most accessible.
Design Handoff
Use a dedicated design handoff tool like Zeplin or Avocode, not just sending redlined PDFs.
A designer would spend hours creating “redline” documents—static PDFs with arrows and measurements—to specify her design for the developers. The process was slow, and the specs were often out of date. The team switched to a tool like Zeplin. The designer could now export her designs directly from her design tool, and the developers could inspect any element to get its exact dimensions, colors, and assets, and even copy the CSS automatically. This automated the most tedious part of the handoff process.
Stop throwing your designs “over the wall” to developers. Do collaborate with them throughout the design process instead.
A designer would work in isolation for weeks, perfecting a design. She would then “throw it over the wall” to the development team. The developers would often come back and say that the design was technically infeasible or would take months to build. A better approach is collaboration. By involving developers early in the design process, they can provide valuable technical feedback, suggest alternative approaches, and ensure that the final design is not just beautiful, but also buildable.
The #1 secret for a smooth and efficient design handoff process.
The secret is to have the designer and the developer sit down together and walk through the prototype before the developer writes a single line of code. The designer can explain the user flow, the interactions, and the intent behind her choices. The developer can ask clarifying questions and point out potential technical challenges. This one-hour conversation, where both sides build a shared understanding of the project, can prevent weeks of misunderstanding and rework down the road.
The biggest lie you’ve been told about developers not caring about design.
The lie is that developers are just code monkeys who don’t care about a good user experience. The reality is that most developers take immense pride in their work and want to build high-quality products. When a developer pushes back on a design, it’s usually not because they are lazy or don’t care. It’s often because they see a technical constraint or a performance issue that the designer may not have considered. They care deeply about the final product, just from a different perspective.
I wish I knew this about the importance of a design QA process when I was a junior designer.
As a junior designer, I would hand off my designs and assume that the final product would magically look exactly like my mockups. I was often disappointed by the small visual inconsistencies in the final build. I wish I had known about the importance of “design QA.” This is a process where, before a feature is released, the designer reviews the implemented version and works with the developer to fix any small visual bugs or alignment issues. It’s the crucial final step to ensure quality.
I’m just going to say it: A good design handoff is a conversation, not a monologue.
A designer prepared a massive, 50-page specification document and emailed it to the development team. He thought his job was done. This is a monologue. A good handoff is a continuous conversation. It starts with involving developers early, it includes a walkthrough session, and it continues with the designer being available to answer questions and collaborate throughout the development process. The goal is not to create a perfect document, but to create a shared understanding.
99% of design teams make this one mistake that frustrates their developers.
The most common mistake is not designing for edge cases and error states. A designer will hand off a perfect “happy path” design. The developer will then ask, “But what happens if the user’s name is very long and breaks the layout? What error message should we show if the API call fails? What does the empty state of this page look like?” A thorough designer thinks through all of these non-ideal states and provides clear designs for them, saving the developer from having to guess.
This one small action of creating a style guide for your developers will change the quality of your final product forever.
A designer would hand off mockups where the spacing and colors were slightly inconsistent between different screens. The developer would faithfully reproduce these inconsistencies in the code. By taking the time to create a simple style guide that clearly defined the primary colors, the typography scale, and the spacing rules, the designer provided a single source of truth for the developer. This one document ensured that the final product was visually consistent and polished.
The reason your final product looks different from your design is because of a poor handoff process.
A designer was frustrated. The final application built by the developers looked like a distorted version of his beautiful Figma mockups. The reason was not that the developers were bad at their jobs. The reason was that the designer had not provided them with clear specifications. He hadn’t specified the responsive behavior, the different component states, or the animation timings. The developers were forced to fill in the gaps with their own best guesses. A detailed handoff is the bridge between design and reality.
If you’re still not involving developers in your design critiques, you’re losing valuable technical feedback.
A design team would hold their weekly design critiques in a silo, with only other designers present. They would then present a “final” design to the engineering team. By inviting a few developers to participate in their critiques, they gained a huge advantage. The developers could point out potential performance issues or suggest a simpler technical approach that the designers hadn’t considered. This early technical feedback made their designs stronger and much easier to build.