{"id":7858,"date":"2023-02-01T15:24:21","date_gmt":"2023-02-01T15:24:21","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7858"},"modified":"2024-01-16T11:28:49","modified_gmt":"2024-01-16T11:28:49","slug":"examples-of-good-digital-ux-design","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/examples-of-good-digital-ux-design\/","title":{"rendered":"7 Examples of good digital UX design"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Good digital user experience (UX) design is essential for the success of any website, application, or digital product. Not only does it offer an intuitive and enjoyable experience to end-users, good UX also promotes loyalty and trust\u2014two essential pillars of any good business strategy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Effective digital UX design is as much an art as it is a science. Getting the balance right between aesthetics and usability isn\u2019t always easy\u2014but with the sheer number of websites and apps available for users, usability is what sets some digital experiences apart from the rest.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this blog post, we&#8217;ll share some inspiring examples of good digital UX design in action; from sleek mobile apps to engaging websites.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s what we\u2019ll look at:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#babbel\"><span style=\"font-weight: 400;\">Babbel\u2019s personalised onboarding flow<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#doordash\"><span style=\"font-weight: 400;\">DoorDash\u2019s guest view<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#evernote\"><span style=\"font-weight: 400;\">Evernote\u2019s feature release<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#airbnb\"><span style=\"font-weight: 400;\">Airbnb&#8217;s booking system<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#grammarly\"><span style=\"font-weight: 400;\">Grammarly\u2019s demo document<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#reddit\"><span style=\"font-weight: 400;\">Reddit\u2019s redesign<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#semrush\"><span style=\"font-weight: 400;\">Semrush\u2019s light-to-dark mode toggle<\/span><\/a><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Here we go!<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&utm_medium=blog_panel_pdux&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"babbel\"><strong>1. Babbel\u2019s personalised onboarding\u00a0<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7859\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-01-at-14.57.05.png\" alt=\"babbels onboarding experience\" width=\"954\" height=\"548\" title=\"\"><\/p>\n<p><a href=\"http:\/\/babbel.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Babbel<\/span><\/a><span style=\"font-weight: 400;\"> offers users an intuitive UX experience that helps learners of all levels quickly find their footing, whether you&#8217;re a seasoned linguist or just beginning your language-learning journey.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s common practice for apps to take your information first and personalise your experience upon sign-up. Babbel makes personalisation a priority by instead offering users a selection of quick upfront options that help them understand:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The users&#8217; motivations behind learning a new language<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How they learn best (e.g., live lessons or on-demand tutorials)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How many hours per week they can commit to learning a new language<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u2026all before they\u2019ve even typed in their name or email address. This way, the app can curate a bespoke experience upon sign-in\u2014with everything ready to go following the users&#8217; personal preferences.\u00a0<\/span><\/p>\n<h3><strong>Why is this good UX?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">So much of good UX is about trust. Users are often apprehensive about committing to a new app because they have no idea if it\u2019ll even be right for them. By presenting clear, personalised choices related to the users&#8217; learning experience, they\u2019re much more likely to trust that Babbel has their best interests in mind.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Indicating where they are in the sign-up process with the progress bar also gives users more control and information.\u00a0<\/span><\/p>\n<h2 id=\"doordash\"><strong>2. DoorDash\u2019s guest view<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7860\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-01-at-15.08.21.png\" alt=\"doordash&#039;s guest view\" width=\"434\" height=\"894\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Like Babbel, one of the most common pain points users have with apps is the pressure to submit their personal information before they\u2019ve had a chance to explore the product and assess its value. And also like Babbel, popular food delivery app <\/span><a href=\"http:\/\/doordash.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">DoorDash<\/span><\/a><span style=\"font-weight: 400;\"> has a solution.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Alongside the usual sign-in options, DoorDash gives new users the option to continue as a guest. Once they\u2019ve browsed the food options in their local area and made their choice, they can place the order by submitting their personal and payment details (or, in other words, signing up).\u00a0<\/span><\/p>\n<h3><strong>Why is this good UX?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Studies have shown that <\/span><a href=\"https:\/\/www.forrester.com\/blogs\/12-02-20-have_you_signed_in_with_facebook_recently\/?cm_mmc=RSS-_-MS-_-1711-_-blog_2684\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">around 11% of users abandoned their purchase<\/span><\/a><span style=\"font-weight: 400;\"> after being asked for too much information upfront. DoorDash\u2019s guest option means users can discover the product&#8217;s value, and confidently sign-up knowing the app has what they\u2019re looking for.\u00a0<\/span><\/p>\n<h2 id=\"evernote\"><strong>3. Evernote\u2019s feature release\u00a0<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7861\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-01-at-15.09.30.png\" alt=\"evernote&#039;s feature release\" width=\"616\" height=\"820\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">New feature releases can be disruptive\u2014especially if it includes multiple and significant changes to the platform. To avoid inconveniencing users mid-flow, it\u2019s essential to keep users in the know so they can adjust to the changes quickly.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Note-taking app <\/span><a href=\"http:\/\/evernote.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Evernote<\/span><\/a><span style=\"font-weight: 400;\"> has set the bar high with its user-centric approach to feature releases and updates. The platform has a \u2018what\u2019s new\u2019 tab on the sidebar which provides an overview of the latest updates and changes.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once clicked, a tooltip will come up with a short explanation of how each new feature works. Users can also click on \u2018release notes,\u2019 which provides additional context into why each update exists\u2014and how it\u2019ll help users improve their activity.\u00a0<\/span><\/p>\n<h3><strong>Why is this good UX?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Rather than being caught off-guard by a new feature, Evernote drives feature adoption by providing a permanent place on the platform for new updates to live. This way, users explore the feature in their own time rather than feeling pressured to learn it straight away. The release notes also help users understand how the feature directly relates to them, subtly encouraging them to try it.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"airbnb\"><strong>4. Airbnb\u2019s booking system<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7863\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-01-at-15.13.22.png\" alt=\"airbnbs booking system\" width=\"492\" height=\"684\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Organising a trip can be stressful\u2014and <\/span><a href=\"http:\/\/airbnb.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Air<\/span><span style=\"font-weight: 400;\">bnb<\/span> <\/a><span style=\"font-weight: 400;\">understands this better than most. On a mission to create a world where anyone can belong anywhere, Airbnb has developed an intuitive platform that caters to all your travel and accommodation needs. One of the platform&#8217;s stand-out features is its user-friendly booking process, which makes booking a reservation simple and pleasurable.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The booking system is designed to display only the necessary information, with users given helpful previews of all inputted data before committing. In addition, one clear CTA (call for action) indicates that nothing is final until the booking is approved, putting the user at ease.\u00a0<\/span><\/p>\n<h3><strong>Why is this good UX?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Airbnb prioritises convenience and simplicity on the crucial booking page; reducing friction with minimal steps, straightforward navigation, and clear indications of what\u2019s coming next. The simple layout also means users don&#8217;t have to sift through paragraphs of unnecessary information.\u00a0<\/span><\/p>\n<h2 id=\"grammarly\"><strong>5. Grammarly\u2019s demo document<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7864\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-01-at-15.13.51.png\" alt=\"grammarly demo product\" width=\"1030\" height=\"608\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Sometimes, onboarding with new applications can feel like a chore. Users can get frustrated by lengthy, confusing product tutorials\u2014especially when they\u2019re keen to get started.\u00a0<\/span><\/p>\n<p><a href=\"http:\/\/grammarly.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Grammarly\u2019s<\/span><\/a><span style=\"font-weight: 400;\"> onboarding process explains each of its features in an intuitive, step-by-step way, allowing novice users to get onboarded and start using the app immediately.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once users sign up for the app, they\u2019re taken to a demo document filled with pre-generated text. Using various phrases as examples, the tool highlights notable features with dynamic pulsations and underlines, which expand into quick explanations and tooltips upon interaction. This logical, guided walkthrough of how each feature works allows users to get to know the tool in a contextualised way.\u00a0<\/span><\/p>\n<h3><strong>Why is this good UX?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">As the Aristotle quote goes, \u201cFor the things we have to learn before we can do them, we learn by doing them.\u201d This hands-on onboarding approach contextualises the key features and allows users to get comfortable with the tool\u2014even if they don\u2019t necessarily have a pre-written document to get started with yet.\u00a0<\/span><\/p>\n<h2 id=\"reddit\"><strong>6. Reddit\u2019s redesign<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7865\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-01-at-15.14.24.png\" alt=\"reddits redesign\" width=\"910\" height=\"580\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">A website redesign is no small feat. Even if a website needs a facelift, it\u2019s hard to make wide-scale changes to an interface users know and love.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Popular forum website <\/span><a href=\"http:\/\/reddit.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Reddit<\/span><\/a><span style=\"font-weight: 400;\"> introduced an array of new changes in their site redesign, including multiple options for users to customise and personalise their profiles. Rather than getting users to click through a series of tooltips (which would take a very long time, given the number of new features), Reddit kept it simple by presenting the essential components of the redesign in one complete window.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Redditors then have the choice of being shown each feature through a dynamic product tour, customising their profiles, or closing the window and navigating the new and improved site on their own.\u00a0<\/span><\/p>\n<h3><strong>Why is this good UX?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">This clear pop-up provides a snapshot of key information, with multiple CTAs that allow users to choose how they want to explore the new site.\u00a0<\/span><\/p>\n<h2 id=\"semrush\"><strong>7. Semrush\u2019s light-to-dark mode toggle\u00a0<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7866\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-01-at-15.15.11.png\" alt=\"semrush light mode to dark mode\" width=\"1218\" height=\"340\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Once hailed as a \u2018nice to have,\u2019 UX designers are beginning to recognize the increasing importance of dark mode when designing interfaces. It&#8217;s no secret that dark mode makes digital interfaces easier on the eyes, but the benefits go beyond aesthetics: Dark mode can reduce eye fatigue and accessibility issues for visually impaired users who struggle to read text on a light background. It can also contribute to better battery life by putting less stress on the device\u2019s display.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The option to switch to dark mode is usually found in device display settings or software applications. <\/span><a href=\"https:\/\/www.semrush.com\/blog\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">The Semrush Blog<\/span><\/a><span style=\"font-weight: 400;\"> provides a rare example of dark mode in websites, with a toggle that allows users to browse the site in light or dark mode depending on their needs.<\/span><\/p>\n<h3><strong>Why is this good UX design?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">This feature is a prime example of how subtle UI elements can make a huge impact. With a toggle switch that allows users to choose their display, users have much more autonomy over how they interact with the site and interpret the content. The result? They\u2019re more likely to stay on the site for longer rather than click off due to eye strain or issues with brightness.\u00a0<\/span><\/p>\n<h2><strong>Round-up<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Good digital UX design doesn\u2019t need to be complex or fancy. As we\u2019ve seen from these examples, sometimes the simplest solution is the most effective.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s all about finding ways to keep friction to a minimum and help users get the most out of your digital product. By keeping user needs and behaviours front and centre, you can create digital experiences that successfully solve your users\u2019 problems and pain points\u2014without compromising on aesthetics.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re curious about what bad UX design looks like, check out our blog post on <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/good-ux-vs-bad-ux\/\"><span style=\"font-weight: 400;\">good UX vs. bad UX<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To keep learning about good (and bad) UX design, we also recommend these blog posts:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/6-everyday-ux-examples\/\"><span style=\"font-weight: 400;\">6 everyday UX examples (that aren\u2019t websites or apps)<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-design-principles\/\"><span style=\"font-weight: 400;\">7 fundamental UX design principles all designers should follow<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-are-dark-patterns-in-ux\/\"><span style=\"font-weight: 400;\">What are dark patterns in UX?<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Good digital UX design is essential for the success of any website, application, or digital product. Here are some examples from around the web.<\/p>\n","protected":false},"author":22,"featured_media":7867,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278,307],"tags":[335],"class_list":["post-7858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-design-thinking","tag-ux-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7858"}],"version-history":[{"count":5,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7858\/revisions"}],"predecessor-version":[{"id":9690,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7858\/revisions\/9690"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7867"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}