21 UX Design Examples That Work and Why
A good UX design helps to make your product easier to use and create a delightful experience. In this article, we’ll go over 21 good user experience (UX) design examples used in popular SaaS tools and show you:
- The elements they use
- Why they work and how
TL;DR
A good UX design follows design principles that make it easy to use, help you complete key tasks easily, have a crisp and colorful design, and are accessible and inclusive.
Here are the best examples of good B2B SaaS UX designs and why they work:
- Userpilot breaks down long processes onto multiple screens to prevent overwhelming users with too many options.
- Trello uses placeholder text to make using its key features easier.
- Miro uses banners to show helpful tips in user onboarding to prevent interrupting users.
- Asana uses gamification, in the form of a unicorn, to delight users when they have completed a task.
- Zoom uses a simple UI to limit user distractions and make it simple to find key features.
- Slack’s empty state helps to show its features and minimize the user’s cognitive load.
- Airtable uses a simplified sign-up form to collect customer data and avoid overwhelming users with too many questions.
Good B2C UX design examples:
- Grammarly uses a demo document as a demonstration to give users a hands-on experience with their product.
- The design of Nike’s website improves the customer experience by reducing the actions needed for a user to buy.
- Airbnb’s UX design immediately gets users to reach the Aha! moment by showing available places they can rent.
- Netflix offers an autoplay feature so users can continue watching the next episode without taking any action.
UI vs UX design
UI, which stands for User Interface, refers to the process of designing complete interfaces that allow users to interact with your product. This includes buttons, toggles, or icons. UI is, in fact, a part of UX.
UX, which stands for User Experience, is the entire experience of the user’s interaction with your product. It includes the design of the UI but also elements such as usability, accessibility, performance, and user satisfaction.
Both UI and UX design are part of PX (Product Experience).
What makes a good UX design?
When creating a good UX design, you need to keep in mind some of the following design principles:
- Usability: Your product’s important areas and features should be easy to locate and move to with the help of a search with filters.
- Functionality: A good UX should make it easy for users to complete key tasks.
- Visual design: You should use high-definition images, clean and simple elements, and colors to make your UX design compelling.
- Accessibility: A thoughtful UX design should do its best to cater to everyone and be inclusive.
B2B SaaS UX design examples
The following seven examples are good UX designs from B2B SaaS companies to help inspire your UX designers.
1. Userpilot uses progressive disclosure to avoid overwhelming users
Progressive disclosure is a design pattern that gradually shows users information over multiple screens.
Using progressive disclosure decreases the time it takes for a user to take action while minimizing the cognitive load, making engagement with the UI much easier.
For example, you can break up a multi-step process into multiple screens, just like Userpilot uses when building a checklist.
2. Trello’s enhanced UX with placeholder text
Using placeholder text is a good UX practice because it’s an excellent tool for guidance. It’s a visual or textual cue that sits in the interface showing the context of the action a user should do.
Placeholder text removes the thinking from the user so they can take action the first time.
Trello uses placeholders to highlight key actions in the interface, guiding users by using “add a card” and “add a list” as placeholders.
3. Miro’s user onboarding process
Using banners is a great example of good UX design. It allows you to display information to the user based on what they are doing within your product.
The benefit of using banners is that they minimize disruption while providing the user with additional guidance and helpful tips.
You can trigger these banners based on the user’s actions so the information shown is relevant and personalized.
Miro offers users helpful advice on pop-up banners during onboarding, adding additional support to any new features a user might use for the first time.
4. Asana’s unicorn that celebrates your wins
Gamification is a way to engage users with your product and encourage them to return. It can use game elements such as checklists, leaderboards, badges, and levels to motivate users.
You can use gamification to entertain your users and to celebrate users succeeding with your product.
Asana adds an element of gamification when a user completes a task. A flying unicorn moves across the screen when a user completes a task, adding a touch of delight and motivation for repeated engagement with the tool.
5. Zoom’s simplified user interface
A simplified user interface is a UX design where you minimize the number of UI elements and interactions to core actions. You should aim only to display a limited number of options and make buttons and icons large so they sit prominently on the screen.
Keeping to a simple UI makes it easy for a user to navigate and use your product, especially for those who might not be familiar with your product. The easier users find your product, the better the user experience.
Zoom is so successful because of how simple its design is. There are no cluttered menus or interfaces. None of its options make you think about what to do next.
6. Slack’s empty states that prompt action
An empty state is when a user reaches a moment in a product where there is nothing to display. It could be because there is a lack of user data or when a users encounter an error.
Empty states can become a problem if left blank as they cause the user to freeze.
Slack utilizes empty states to its advantage to provide value to a user by using tooltips to show how to use the product and get users started.
7. Airtable’s balanced usability
Balanced usability is when you create a UX design that balances great usability for a user and still achieves a business goal, such as collecting customer data.
The benefit of balanced usability is that users and businesses get what they want in an agreeable state. The user completes their actions and progresses to the next step without being overwhelmed.
Airtable balances the need for data and reduces customers’ effort to enter their details by using a simplified sign-up form
B2C UX design examples
A SaaS that sells directly to consumers can have a different experience than B2B. Here are some good UX examples to be inspired by.
1. Grammarly’s demo document
A product tour is an interactive guide showing new users how to use your product. It should give them a hands-on experience of how the product can be valuable to them.
Using a product tour helps users to reach activation, and once activated, they are more likely to stay a user because they understand the value of your product.
Grammarly uses a demo document as a product tour so users get a hands-on experience of how it works to stop users from getting bored.
2. Nike’s selling experience
You should simplify the actions a user takes to complete a goal.
Nike has a brilliant UX design made to anticipate user needs. They have placed the important elements needed to buy all on the same screen, so the user only needs to make a few clicks to complete their order.
3. Airbnb booking experience
An Aha! moment is when the user grasps the value your product could offer and makes them want to engage so they get the value and their job done.
The beginning of the booking experience for Airbnb lets users instantly get the Aha! moment by seeing the available places to rent even before they started the search process.
4. Netflix’s autoplay feature
An autoplay feature is a UX design example that automatically plays media content, such as audio or video, without a user having to take action.
Using an autoplay feature helps the user’s jobs to be done without asking or prompting, resulting in a greater user experience.
Netflix implements a UX design that auto-plays the next episodes and trailers, taking advantage of that “just one more” action, keeping users on the app longer.
5. Canva’s contextual guidance
Contextual guidance is where you present information to users at a relevant and timely point when using your product.
Contextual guidance aims to improve the user experience by reducing confusion, frustration, or errors and increasing efficiency and satisfaction.
Canva uses contextual guidance to showcase its different features using tooltips to show relevant information to support the action the user did.
6. Asos’s visually appealing UX
A visually appealing UX is pleasant to look at, engaging, and aesthetically attractive to users. It considers graphic design principles, such as color theory, layout, and visual hierarchy, to create a visual composition for the user.
Using a visually appealing UX helps increase user engagement and retention, as users are more likely to spend time on your product.
Asos uses visually appealing UX to grab users’ attention with the image of people wearing Asos clothes but also provides informative elements clearly for when users want to start shopping.
7. Fenty Beauty’s accessible design
Accessible design is where you create user interfaces that are easy to use and understand. It could include simplified navigation, different media formats (video or images), and interactive content.
Accessible design helps to improve the overall user experience, making it easier for all customers to use your product and increase engagement and satisfaction.
Fenty Beauty has a good accessible UX design because they:
- Show items in the correct currency of the user.
- Enable users quickly see what colors they can choose for a certain item.
- Have a feature that lets users experience what a product looks like on them.
Mobile apps UX design examples
The UX design examples can be different on a mobile device. Here are some examples of good UX to inspire your UX designer.
1. Duolingo’s simplified user flows
A user flow can take new users through the main product feature so they understand the value your product can offer them.
You can use a simplified user flow by breaking down the flows into single steps to create a seamless user experience. A simple flow helps to lower cognitive load as they only have one thing to concentrate on.
Duolingo does it during their onboarding flow and as part of their mobile product experience.
2. Calm’s sign-up flow minimizes users’ cognitive load
Reducing cognitive load is a design method that reduces the mental effort for users to understand and interact with your product. It helps users focus only on the important information to stop confusion or frustration.
Calm shows us a great UX design example for mobile devices where they’ve broken down a sign-up flow into sections rather than presenting new users with one long form.
3. Spotify’s end-of-year wrapped stories
Using user data in design is a great way of creating a personalized experience. You can use data collected directly from the user or their in-product behavior.
Using customer data allows you to tailor the experience for each user, helping to increase user engagement.
Spotify leverages the user’s own data into its design, creating content tailored to the individual user. Spotify adds appealing visuals and lets users share their wrapped stories with a click of a button.
The end-of-year wrapped stories are successful, with 60 million people in 2021 sharing their version.
4. Twitch’s uninterrupted videos
Being able to cater to your user’s needs even when they want to do something else on their mobile devices helps create a great user experience.
One way you can achieve this is by creating a seamless experience where a user can still use your product while using their mobile device for something else.
Twitch does this by letting users still watch whatever video they are watching outside of its app. The user doesn’t have to feel stuck watching the video in the app, giving them more control over their actions and improving the customer experience.
5. Revolut makes the user the UX designer of its app with its customization options
Letting users adjust a product’s interface or functionality to suit their needs and preferences is a good UX design example of customization.
Adding this to your product helps to increase user engagement and satisfaction, as the user can become their own UX designer and create an app tailored to them.
Revolut shows off this good UX design example by allowing users to choose different widgets on the home page to show information that is important to them.
6. Twitter’s accessibility in product UX
Accessibility in UX design is creating a user interface that people with various abilities, including those with disabilities, can use.
Creating inclusive interfaces means that more people can get value from your product, making it easy for all users to use.
Twitter gives the user control of important accessibility settings to improve the user experience, such as VoiceOver functionality and color contract options.
7. Glovo’s great navigation
Great navigation is where a user can move through your product easily and intuitively to find the information or perform an action.
Excellent navigation means a user can move through your product without confusion or frustration, achieving the value your product offers.
Glovo, a popular food delivery app, makes its navigation simple and clear to use. It combines images and text to help make the options clearer, speeding up the entire app experience.
Conclusion
After reading this article, you should have plenty of inspiration for UX design to take in your product to improve your customer experience and encourage users to stay around for longer.
If you want help to create a better UX experience with your product, Userpilot can help. You can build in-app experiences to guide users and use segmentation to provide each user with a personalized product experience. Book a demo call with our team and get started.
