What makes a good UX design?
One thing we can say about UX (user experience) these days is that it has been developing significantly. It is because many businesses are offering the same products; therefore, they try to offer a customer-centric and engaging experience right on their website. A good UX interface will likely retain existing customers, attract new and potential customers, and convert traffic. It also guides and ensures customers’ journey through the website is both functional and pleasant. To understand what a good UX design is, let’s look at some considerable criteria.
- The website has visual and functional simplicity for easy web navigation;
- Delivers appealing user interface (UI);
- Provides an adequate amount of essential information to clear out customers’ confusion;
- Eliminates potential obstacles in customer flows;
- Integrate opportunities for customer satisfaction;
- The website can respond well to customer behavior and their ever-changing needs;
- Develops a continuous customer service and feedback system to hear customer opinions and improve the website based on the opinions.
A business needs to keep its website usable, simple, aesthetically pleasing, and customer centric. By achieving those characteristics, the website’s UX design is ready to present to the customers and get into service.
What is a bad UX design?
Contrary to good UX design, bad UX design prevents customers from having a smooth experience. Consequently, customers need to be more informed on the website and with adequate information they need. They are likely to get frustrated after hours of searching for what they need. We can tell a UX design is bad if it:
- Neglects UX research and is built solely based on assumption;
- Heavily biases aesthetics over usability and accessibility;
- Makes no progress and does not change in response to evolving user expectations and needs;
- Bombards users with irrelevant and disorganized information and options;
- Haves no attractive features to keep customers interested in products and the website.
- Suggested for you: 15 Bad UI Design Mistakes and Examples: What should we avoid
List of 20 most brilliant UX design case studies
Let’s take a look into some examples of good UX design:
1. Netflix’s autoplay features
Netflix is quite well-known for its UX design, especially its auto-play feature and the controversy surrounding it.
What’s good about Netflix’s auto-play button is that it appears right after each episode ends. The “Play Next Episode” helps Netflix users binge-watch their favorite show without asking or going back to the menu to find the next episode.
This feature was also integrated into Netflix’s media library as the customer can glimpse their favorite shows briefly. The preview of each movie would be played automatically while users browse the website and couldn’t be turned off then. This was where controversy sparks, as many users of this streaming service found the feature quite disturbing. After receiving customer feedback, Netflix has adapted and delivered a new setting in which its user can adjust the auto-play preview based on their preference.
What we can learn: Easy of use is a huge advantages, but it’s not always the best case. Testing new features before integrating them into the mass must be done. Maintain a customer-centric, rather than a product-centric user experiences.
2. Todoist’s task management
Todoist is a website specified for managing personal work and team tasks. This website has numerous features to make the task-managing experience usable and convenient. Users can drag and drop and easily navigate what type of tasks they have. Seeing another complete task scratched off the list is also quite satisfying.
The recurring due dates notification makes the experience on Todoist stand out. It’s a basic feature that demonstrates Todoist’s thorough user research and identification of one of their users’ primary chores when they use Todoist.
What we can learn: Investigate users’ recurring tasks to determine their needs—design in such a way that a critical task can be simplified or automated.
3. Mailchimp’s password setting
Mailchimp has been one of the top brands not only for its recognition but also for its functionality and innovative UX design.
Mailchimp’s password guidance in their welcome form is an excellent example. Setting up a password for a new account is usually unpleasing for most people. Nobody loves being told that their go-to password must be stronger and meet standards they have never met before. Mailchimp, on the other hand, pleasantly advises users to create a stronger password. Plus, toward the end, you get this good checkbox popup. Once the procedure is finished, you can access the website.
What we can learn: Good UX design can lessen the complexity and tension of unpleasant tasks. Sign-up forms and profile set-up with good UX design and guidance can offer the customer the best online experience.
4. Spotify’s year wrapped
One of the prime UX design examples is Spotify. This giant music streaming service shows how powerful data is and what data can do for your content. Sticking the UX design to the familiar format recognized by users and creating potential experiences have been the trait of Spotify.
In late 2021 and early 2022, Spotify’s Year Wrapped has been flooding stories and newsfeeds of social media. Spotify listeners share the recap of what they have been listening to in the last year in the form of a story, one that Instagram popularizes. Even though this innovative UX design was viral in early 2022, Spotify has been doing year wrapped since 2014.
What we can learn: Surprise your user with unique and personalized content
5. Google’s search engine
The list of good UX design examples will not be complete if we don’t mention Google’s search engine. UX Google Search Engine becomes successful not because of a marketing strategy but of its simplicity in function. Users can insert the keyword they want to search, hit Enter, and the results appear within seconds.
In over 20 years, this key function of Google has been retained. Even though Google has made numerous upgrades throughout its development, like additional links and visual aesthetics, the tool stays simple and only gets faster.
What we can learn: Deliver the UX design that match exactly the user intent in an easy and pleasurable way.
6. Grammarly’s step by step guidance
Many know Grammarly as a website that check your English grammar and correct it for a perfect writing. People use Grammarly to correct grammar, spelling mistakes, and more. Besides its main function, Grammarly deserves praise for its guidance.
With its user-friendly interface, the user can see their grammar mistakes and guide to fix it all at one side. Meanwhile, the other side shows how your documents will change with the new suggestions. At the same time, Grammarly sends achievements at certain time stones to motivate and encourage them to use the software. This simple act helps first users easily understand the software and draws them closer to the brand.
What we can learn: UX design is only sometimes an in-product. It should also be about the customers and what kind of experience a business can offer them.
7. Airbnb’s robust web experiences
As an application dedicated to travel and accommodation, the Airbnb platform mixes usability and style into one app. It helps users find suitable accommodations for their vacation or rent their homes and apartments as hosts.
When customers first enter Airbnb, they shall encounter a simple yet useful search bar. They can apply the filter for their desired accommodation based on price range, room type, and additional amenities.
A distinctive UX feature of Airbnb is its integrated side-by-side map view. This map will show properties in interactive mode and the price of every accommodation available at a specific destination. This feature has fulfilled the customers’ need to see everything on one page to make a quick comparison.
Moreover, Airbnb provides its customers with insight into the vacation rental site. It puts most essential information, like prices, amenities, and free days left for a property, in a responsive design to help customers read through them easily.
What we can learn: Offer your customers all the best and relevant information about the product they are searching for. Try to make everything simple and integrated on the same page so customers can read the information easily.
8. Babbel’s gamification
Babbel offers a simplified language learning interface that aids with user concentration. Babbel is categorized as one of the top UX design examples since the application introduces its customers to an immersive and interactive sequence.
Learning can be boring. So to increase the user engagement, a learning platform such as Babbel has leverage UX to make the learning more “fun”. Throughout the learning process, targeted scores are given to the users to motivate them to continue improving their skills. The lessons are also designed to be challenging enough to keep learners engaged without discouraging them.
What we can learn: Enhance your user experience with fun and engaging activity when using your app or website.
9. ASOS’s engaged and interactive UX
ASOS is a fashion eCommerce platform offering an enticing online shopping experience. ASOS’ landing page has bright and dynamic images, while navigation buttons and call-to-action (CTAs) are perfectly placed to help customers find their needed products in categorized sections. Advanced product filters are also equipped so customers can get close to their desired clothes.
What makes ASOS’s UX design remarkable is that the website encourages its customers to explore visual and written information in several ways. Customers can view the product from many angles once clicking on it. ASOS’ “Virtual Closet” feature shows clothes on a model as they move on video. This is a great way to get users excited about the product and address their desire to know how it looks in real life before purchasing.
What we can learn: We have passed the day of traditional website that provides static and basic information. Users nowadays want to explore the products and find more in-depth information. By making your site interactive, you keep your user engaged and eventually, increase the chance of sales.
10. Starbucks’s personalization
Not just Starbucks’ mobile app, their website also support great ordering process. The online ordering employs smart customization to understand the customer better by analyzing users’ purchasing histories and trends.
For regular customer, in the Starbucks web, the “Featured” tab mostly includes new items on the menu, while the drunk customer who previously ordered will appear in the “Recent” tab. Customers also can add their frequently consumed items to “Favorite” tabs. By selecting everyday items directly from “Recent” and “Favorite,” customers can cut time browsing the whole menu for their favorite drink.
Meanwhile, for the newcomer, you can entirely create a new favorite menu of your own. From adding topping, size, adjust sweetening to many more
What we can learn: Utilize data about customer behavior to offer them the customization and the preference they need.
11. Yelp’s location search
Yelp’s outstanding UX design has made its name findable on the market. The technology offered by Yelp allows customers to find frequently searched options based on their location. A combination of reviews and helpful filters on the search results page guides the user to the ideal venue.
For consumers with a specific geographic region, Yelp also uses Google Maps to narrow their search for suitable restaurant options. Integration of Google Maps also helps Yelp users feel familiar. Customers can instantly find all the information they need on the location detail page, including hours, menus, directions, top ratings, and tips.
Furthermore, Yelp is now allowing users to order pickup or delivery. This feature is believed to be developed soon in the future.
What we can learn from the UX design examples: Offer more than one suitable option for the customers to help them diversify their choice. Make sure everything is customer-centric and serves customers’ needs well.
12. Target’s online product showcase
We can find UX design inspiration everywhere, even on well-known electronic commercial websites like Target. Here is how a certain product uploaded on Target will appear on the screen.
When customers need to look up information about a product (“stand mixer”), the title highlights its essential characteristics. The essential feature (“5-quart”) appears immediately after the product title in the headline.
There is also a clickable image of “Included Accessories.” Knowing what’s included might be a decisive purchasing factor when included accessories significantly contribute to the product’s benefits or are expensive to acquire separately. Target also includes a video within the image gallery with a “Play” icon so users can watch product videos next to the images.
What we can learn: Highlight important details of the product and group relevant information together so that the customers can grasp the key point of the products without missing the essential additional details.
13. Apple’s cart and checkout
Among the examples and inspiration for UX design, Apple is the name that no one could miss.
Before finishing the checkout process, customers are likely to recheck their cart and total estimated costs. Apple initiates this step neatly as it provides in the “Cart” step the cost of full order with shipping and tax included instead of moving it to another pages like many website do.
Along with that, omnichannel delivery alternatives are clearly labeled and described so that users can understand them easily with just a quick glimpse. For example, if the user chooses the “Pickup in-store” option, the location and the earliest time for in-person pickup will appear.
What we can learn: Opt for a simple yet comprehensive design, especially for the billing process, so that customers can review it before they finalize their purchase.
14. Userpilot’s page loading
Here is another example of UX design example regarding the loading page
Since most users have lower and decreasing attention spans, long loading times can cause them to lose the chance to use the product. Understanding this situation, Userpilot has been attempting to keep users engaged with its loading page. This applies to both the Userpilot website and its Chrome extension.
Users are shown different interactive illustrations and inspirational quotes on a simple and effective loading screen that keeps their minds off waiting.
What we can learn: A good UX design will make the most boring step engaging and eye catching
15. Duolingo’s visual design
More than a meme, Duolingo’s UX design is worth learning from. It’s a free gamified language-learning application that helps millions stay on track with their goals.
The overall interface of Duolingo is kept simple and clear to understand, and all the processes are easy to follow. All the course of Duolingo is well delivered so that app users can learn the language easily without being overwhelmed with the complexity of a new language course.
On both mobile and desktop UX design, it is clear to recognize that each lesson is sorted into the category and put into the visual hierarchy. Each procedure step is easily identified with 2D icons and drawings of a green owl – Duolingo’s mascot. Users can also track their progress with the always-available progress bars.
What we can learn: Optimize users’ in-app experience with a simple design and illustrative images. Motivate and keep them engaged with the app with customer-centric statistics.
16. Amplitude’s cookies policies
Cookie policy design has never been the center of the user interface. Most users find it mundane and quite annoying. However, at Amplitude, the company has elevated the experience with a bit of creativity to make the even most boring part of the website can be engaging to customers.
What we can learn: Keep the customers engaging even to the smallest details to integrate your brand’s image.
17. Asana’s celebration when finishing a task
UX design at Asana has shown that a little celebration feature can brighten up the experience of users on the website.
This UX feature is enabled whenever a user finishes a task on the website. Once the work is done, a mythical animated animal like a unicorn appears across the screen. Although this feature has no contribution to the user’s productivity, it still brings some fun after a long hard-working day.
What we can learn: Keep the customers engaged and motivated with the smallest UX features while using the business’s product.
18. Zoom’s experience
We already know about Zoom as a virtual meeting app that has been the top choice during the pandemic years. A reason for this is behind its UX design.
Zoom’s pop-up contains simplified options for making immediate meetings, scheduling upcoming meetings, joining an existing one, or sharing the screen. Each option has a follow-up window for users to complete the task. The app highlights the most likely actions users will want to do using Zoom and makes it simple to get started.
What we can learn from the UX design examples: Understand what the customers want to do with a product and draw out the common task they use the product for. Keep everything simple, and UX designers should always be aware of the tasks that users will want to do on the product they are building.
19. Disney+’s landing pages
Disney‘s streaming service assembles all the company’s movies and TV shows from different catalogs. After logging into the website, users will be presented with a Netflix-similar landing page. Here, users find a large featured area at the top and horizontal rows of shows sorted into different genres. Additionally, viewers can find the other famous branches of Disney shown in 5 logos. Each brand offers users different types of content, which can be told directly from their well-known logo. For example, the Marvel section offers superhero movies; National Geographic brings nature documentaries to your screen.
Disney+ provides a new approach for users to rapidly access the movies and series they’re looking for by figuring out that the content accessible on this streaming platform can be categorized in a unique way that communicates something useful to viewers.
What we can learn: Optimize UX design in information grouping based on their established interaction patterns. Innovative upgrade in communication with information categories can elevate user experience and is likely to be praised when integrated into the final design.
20. Threadless’s add to cart experiences
To summarize the list of UX design examples, Threadless has excelled in upgrading its user experience with its shopping cart by adding a few unique touches and creativity to the design.
Threadless design is regarded as responsive and delightful. A pop-up window opens when a user clicks the “Add to Cart” button on a product page. This is meant to confirm the addition to the user’s shopping cart and display the added items’ price. With this feature, users can review what they have put in the basket and how much they will spend on a specific number of purchases. It is helpful for people who are on a budget and need to control their spending.
Furthermore, the cartoon of the cart at the top of the pop-up adds whimsy and delight to the experience, which is consistent with the Threadless brand and makes the experience more enjoyable.
What we can learn: Communicate with customers throughout their website journey. In the eCommerce context, make sure that customers have chosen the right product with the right quantity. Add in several fascinating details throughout the communication for a better user experience.
Wrapping up
There are many successful lessons that designers can learn from these brilliant UX design examples to upgrade their game and meet customer’s satisfaction. Staying customer-centric, sticking to simplicity and core value, constantly upgrading the interface, and so on are typical methods for getting customer’s need met and further improving your website. It is best for companies to gradually keep up with the trends and listen to customers’ feedback to improve the website performance.
More related posts from Web Development blog you shouldn’t skip:
