UX | 10 Examples of Good User Experience (UX)

10 Examples of Good User Experience (UX)
trone | Undated (Summer 2021 or before)

Websites & Apps that Understand Humans

  1. Rover: Using Reviews to Build Trust | https://www.rover.com
  2. Duolingo: Tearing Down Roadblocks | https://www.duolingo.com
  3. Paypal: Letting Simplicity Rule | (Mobile App)
  4. MailChimp: Humanizing Technology | https://mailchimp.com (Note: Intuit acquired MailChimp in Q4/2021, the current interface does not reflect the article, which predates the acquisition).
  5. Starbucks: Making it Personal | (Mobile App)
  6. Google: Loading Super Fast Since 1997 | https://www.google.com/
  7. Simple: Adding Clarity and Digestibility to Finance | (Mobile App)
  8. Nest Thermostat: Invisible Design | (Physical Product & Mobile App)
  9. Habitica: Using Gamification for Productivity | https://habitica.com/static/home
  10. Yelp: Everything Findable | https://www.yelp.com
  11. Bonus Example: From the Internet Archive (Poncho)

Author = Laura Flugga (trone)

URL = https://www.trone.com/blog/10-examples-good-user-experience-ux

UX | Creating the User Journey

Creating the User Journey – map of screens as core UX design practice
itCraft Services | Sep 12, 2019

Customer Journey Mapping – the road to be taken within the app to do what you want to do, requires a proper map. The better the map, the more enjoyable the Journey.

What is a screen map?
A screen map is a diagram showing individual application screens, their location (hierarchy) and interrelationships
.

Why make screen maps? The map allows you to visualize how many screens the app will have and show the relations between them. It is invaluable in estimating the workload for the UX / UI design process.

Turning user stories into a user journey map = Individual “User stories” are sorted into groups to be included in specific screens of the application. Next, the screens are marked on the map to reflect the hierarchy between them and to visualize actions (transitions) performed by the user.

Examples of screen maps

What is User Flow used for?
User flow is a diagram showing the path(s) a User can take in the application
. It visualizes the decision making moments and presents all use-case scenarios. The User Flow is helpful in analyzing the ways Users reach their intended destinations or achieve particular goals.

User Flow role
Designing User Flows allows us to adjust and perfect the operation of the app and avoid flaws in interaction between Users and the software.We are able to identify the “Pain points” of the system and improve the process well ahead of development.

What is a low fidelity wireframe diagram?
Low-fi (low fidelity) Wireframes are a simplified view of the structure of the application screens
. The screens are usually presented in grayscale and without details.

Instead of a detailed design, our goal here is to plan appropriate distribution of key UI elements, and their hierarchy. The screens propositions should be easy to draw, edit and copied. Low-fi wireframes creation should be a quick process of establishing a base for team discussion, adjustments and clarification of requirements.

They can be prepared on a piece of paper or in a dedicated program such as: Sketch, Proto.io, UXPin, Axure, Balsamiq. The choice of tools is up to you.

What is a high fidelity wireframe?
High fidelity wireframes expand the low-fi version by refined, platform specific UI elements (iOS, Android, Windows), content and graphics reflecting future appearance of the application
.

What is the difference between high fidelity and low fidelity wireframes?
The main difference between these two wireframes is the level of detail.

The low-fi wireframes focus on the general appearance of the main functionalities, without detailing of particular elements, content or pictures, using placeholders instead.

Low-fidelity wireframes are not a reflection of the final look of the app. They present the general idea and vision of the application, and need to be made as quickly as possible. They help in discussions with the team and the client in the conceptual process, when determining the scope of work required.

In high-fidelity wireframes, we refine the low-fi screens. Hi-fi is more labor-intensive, as we need a higher level of detail – shapes, content, UI elements, the screen composition and relations between them all must now closely reflect the final look of the app.

High-fidelity wireframes are a more sophisticated representation of what the application’s final look.

Why use the UI Kit in the UX / UI design process
When designing an application interface – the UI for either Android or iOS, you should always keep in mind the differences in appearance between platforms. Some elements of iOS, Android UI differ significantly in both looks and the way they work. Buttons, date pickers, text fields, notifications are all designed differently. The makers of mobile systems – Apple and Google provide complete design guidelines on their websites, as well as ready-to-download components.
To simplify the design process and save time, we don’t usually create new elements from scratch. Designers often use ready-made UI kits and libraries. They contain ready-made elements that can be imported into projects and customized according to needs. Depending on whether you are designing a low or hi-fi wireframe, a variety of UI Kits are available for both iOS or Android platforms.

Summary
Establishing a good base for the UI/UX design benefits your mobile app development in many ways:

The customer saves time and resources (quick way to verify the product concept),
A small number of specialists needed to start the process, which translates into lower costs,
The client takes active part in the design and provides invaluable input on the functionality and appearance of the application,
The client can verify that the application design is according to requirements and best practices,
Faster application development time – the team will have a clear picture of how the application is supposed to work and look,
Ability to test the application early in the production process. A clickable prototype lets you experience the operational functionalities of the app before programming starts,
Flexibility of the design process – changes and adjustments can be done quickly and without the need of engaging developers work.

Author = Piotr Niedźwiecki (itCraft Services)

URL = https://itcraftapps.com/blog/user-journey-map-of-screens/

Mobile Apps | Onboarding, w/Examples

The 10 best user onboarding examples to learn from
Appcues | Undated (2019? 2020?)

Top 10 favorite user onboarding examples:

Slack: Educates users with empty states and a friendly bot
Duolingo: Leads with the product experience
Grammarly: Takes a “learn by doing” approach
Tumblr: Charms with personality and personalization
IBM’s Cognos Analytics: Delivers consumer-grade UX in an enterprise product
Avast: Gives value before you ask for buy-in
Toggle: Lets users learn at their own speed
Avo: Makes signup easy and worry-free
TikTok: Teaches users how to get even more value from the product
Reclaim: Introduces users to your way of thinking

The basics of great user onboarding
Onboarding is the process of acquainting a new user with a product
. A great user onboarding experience shortens your new users’ time to value, guides them to their aha moment, and gets them to activate faster.

8 great user onboarding UX and UI patterns
Throughout our extensive research into what makes for amazing onboarding, we’ve found that there are 8 onboarding UX and UI designs that commonly contribute to a better onboarding experience. These include:
A welcome message greets the user with a short, friendly message that acquaints them with the product.
Product tours explain the product features most important to each user.
Progress bars indicate how long the onboarding experience takes, so users know how long they’ll need to commit.
Checklists provide an explicit list of tasks for the user to complete.
Hotspots direct attention to certain product features without interrupting their workflow.
Action-driven tooltips are small pop-ups that provide advice when a user performs a specific action.
Deferred account creation drops the user right into the product without requiring the user to register.
Persona-based onboarding tailors the product experience based on the user’s responses to a short survey.

These onboarding experiences are not mutually exclusive—many products will include 2 or 3 of these patterns depending on what their users need. Consider these a toolbox of sorts. When designing your onboarding, see how you can introduce these 8 UX and UI patterns to improve the user experience. If some of them don’t have a place in your onboarding flow—don’t sweat it.

All onboarding experiences should follow 4 steps
These 4 steps of successful user onboarding are:
Drive users toward key actions: Understand what actions are most likely to drive activation in your product and then build your onboarding toward getting users to those points. For example, if data shows that users who sync their Google calendar with your product are more likely to renew after the first month, then prioritize syncing users’ calendars in onboarding.
Focus your product around onboarding first: Just because your onboarding has a goal in mind doesn’t mean it can skip everything else. Make sure you show users everything they need to know before you get to your key action.
Add new UI where it’s needed most: Find areas that might be confusing or difficult for new users and use UI patterns to make it easier. Maybe that’s a modal that describes a feature, a tooltip that explains a button’s function, or a hotspot that draws the eye of a user.
Analyze, adjust, and repeat: No onboarding experience is perfect, and even the best onboarding experiences continue to be experimented on and updated. Conduct user research and run A/B tests to find out how you can make your onboarding even more effective at improving product adoption.

10 onboarding examples are commented

Onboarding FAQs

What is user onboarding?
User onboarding is the process of educating users and showing them the value of your product.
The onboarding process starts the first time someone tries your product and ends when they either churn or become a regular user. For some products, this means onboarding will be a matter of minutes, while others might require days to get people to a point where they can comfortably use the product as intended.
The primary goal of onboarding is to teach users about your product, personalize the product for their needs, and lead them to their aha moment—the first time they see the benefits your product can bring.

Why is user onboarding important?
User onboarding is important because it helps ease users into a new product. It’s a chance for them to be shown how it works, so they don’t have to waste time figuring it out on their own.
User onboarding is also crucial for companies. A good introduction of your product improves the overall user experience as users are introduced to product features and how to use them. When the onboarding is successful, it directly impacts customer retention, one of the most important profit metrics. If you improve retention by only 15% in the first week, that could boost revenue by 40% as each succeeding week’s cohort staves off churn that much longer. Great onboarding is how you achieve this.

How do you design a good onboarding experience?
A good onboarding experience is created when:
New users are given the tools and knowledge to be successful.
The onboarding experience is purposefully designed to guide users toward a key action that promotes activation.
Onboarding experiences are personalized based on segmentation.
UX and UI design is informed by user feedback and data to create an easy and intuitive process.
You invest in tools that make it easier to give users the experience they’ve come to expect.

If you do all 5 of these things well, then your onboarding is on the way to improving overall product adoption and reducing churn.

Author = Jackson Noel (Appcues)

URL = https://www.appcues.com/blog/the-5-best-user-onboarding-experiences

Mobile Apps | Case Studies (Peerbits)

peerbits App Case Studies
peerbits | Undated

Real-time tracking app, real-time tracking and remote diagnostics
URL = https://www.peerbits.com/case-studies/real-time-tracking-solution.html

Social networking iOS app, connect with new people
URL = https://www.peerbits.com/case-studies/social-networking-app-for-iphone.html

Petrol filling station app, the official app for the largest chain of filling stations in Oman
URL = https://www.peerbits.com/case-studies/petrol-filling-station-management-app.html

ATM food solution, an IoT-controlled automated marketplace
URL = https://www.peerbits.com/case-studies/atm-food-solution.html

Marketplace app, GetItDone
URL = https://www.peerbits.com/case-studies/getitdone.html

M2R
URL = https://www.peerbits.com/case-studies/m2r.html

Fishency, building a better way to fish like a pro
URL = https://www.peerbits.com/case-studies/fishency.html

Jewlot
URL = https://www.peerbits.com/case-studies/jewlot.html

Nurse Alert, a cohesive solution to nursing activity
URL = ttps://www.peerbits.com/case-studies/nurse-alert.html

Apply, a tinder-like job search app
URL = https://www.peerbits.com/case-studies/apply.html

Photograff, Graffiti
URL = https://www.peerbits.com/case-studies/photograff.html

REPD
URL = https://www.peerbits.com/case-studies/repd.html

Epic Delivery
URL= https://www.peerbits.com/case-studies/epic-delivery.html

Throne, the eCommerce Marketplace App
URL = https://www.peerbits.com/case-studies/throne.html

SeatsPlanet
URL = https://www.peerbits.com/case-studies/seatsplanet-travel-app.html

BusMaps, plan bus trip with navigation travel app
URL = https://www.peerbits.com/case-studies/busmaps-navigation-app.html

TapNSell
URL = https://www.peerbits.com/case-studies/tapnsell.html

Loyal Books
URL=https://www.peerbits.com/case-studies/loyal-books-app.html

Frimb, Food & Drink app that connects socially and share recipes globally with food lovers
URL = https://www.peerbits.com/case-studies/frimb-food-drink-app.html

Fashion Sizzle, capture and share the clothing trends with fashion lovers on FashionSizzle. success story
URL = https://www.peerbits.com/case-studies/fashion-sizzle-photo-app.html

Peerbits Works
URL = https://www.peerbits.com/works.html

Author = peerbits

URL = https://www.peerbits.com/case-studies.html

UX | UX Storyboard Creation: Complete Guide

UX Storyboard Creation: A Complete Guide For Beginners
uxstudio | Mar 12, 2019

UX storyboard creation seems like a slightly overlooked design technique. We all know the value of user interviews or personas. We agree that testing is a crucial part of product design. In contrast, people do not commonly use storyboarding, even though it can help in many situations. As a true fan of the technique, in this guide, I want to walk you through all the whys and hows of UX storyboard creation. Plus, I even made a free template for you to get started!

What is a storyboard?

Storyboards in product design
We have personas and journeys. Why do we need UX storyboard?

  1. Visual benefits
  2. Emotional engagement
  3. Memorability
    When to storyboard?
  4. During the discovery phase of a new product
  5. While building the product
    Typical scenarios
  6. Mapping a whole service
  7. Digital product with offline events
    Important note: Drawing skills don’t matter!

How to design a first UX storyboard

  1. Step one – Get some data!
  2. Step two – Pick a flow to focus on
  3. Step three – Write down the plot steps and basic outline of the story
    The main character
    Scene
    Plot Steps
    For some guidance at this stage, feel free to download our free Storyboard Template:
    https://uxstudioteam.com/website/files/UXStudio_Storyboard_template.pdf
  4. Step four – Add emotions and scene details
  5. Step five – Create the storyboard!

Author = Luca Morovián (uxstudio)

URL = https://uxstudioteam.com/ux-blog/ux-storyboard/

UX | Good User Experience For Mobile Apps (+ Tool)

What makes a good user experience for my mobile app?
Mopinion | 16 Feb 2017

Provide an efficient onboarding
Offer Assistance
Invest in usability
(…) to prevent your customers from leaving the app, you must adhere to certain rules:
Use a clear search bar at the top of the app that brings up search suggestions and search history
Organise and label the ‘menu’ category so that your customer can take a quick glance and see which category they need
With ecommerce apps, always make sure there are good filters for the products and services so that the customer can filter by price, color, size, etc.
Forms: Do you work with ordering funnels and long forms in your app? Nothing is more frustrating than having to fill in all of that information again because you missed a section. It is better to highlight the data that is filled in incorrectly or not filled in at all so that your customers will see right away what needs to be adjusted.
Assure Security And Trustworthiness
Don’t spam your users with notifications
Use customer feedback

Have you tried the Mopinion for mobile apps?
Plug / Tool = Mopinion SDK for Apps = User Feedback
Grab a hold of powerful in-app insights
Collect powerful feedback from your native apps with our flexible and easy-to-install SDKs for iOS and Android.
URL = https://mopinion.com/product/mopinion-for-apps/

Author = Erin Gilliam Haije (Mopinion)

URL = https://mopinion.com/what-makes-a-good-user-experience-for-my-mobile-app/

Mobile Apps | Luxury Banking

Mobile Banking Case Study: Luxury Banking App UI / UX Design
UXDA | Undated (2019/2020??)

How to create luxury banking app UI / UX design

Step 1. Find heroes of your story
key user personas
Step 2. Open your heart to users’ feelings
Empathy Map
Step 3. Create a map of banking app user journey
Customer Journey Map (CJM)
Step 4. Fit the service conceptual model to users mental model
Information Architecture
Step 5. Transform user scenarios into user flows
Low Fidelity (LoFi) user flow maps
Step 6. Draw detailed blueprints of the future banking app
High Fidelity (HiFi) wireframes
Step 7. Catch visual mood that inspires
Light Bank interface
Step 8. Design the Key Concept that sets visual language
Key Design Concept
Step 9. Create proof of concept
Our goal was to prepare a concept of a visually stunning banking UX design displaying the implementation of the most important and basic user scenarios. A total amount of 30 screens were prepared and integrated into a clickable InVision prototype. Also, a motion design video was created specially for this digital banking case study.
Endless accounts
Useful details
Rich opportunities
Instant payments
Careful assistant
Attractive notifications
Customized appearance

Step 10. Create banking design system
Financial Design System

Afterword
Get UXDA research-based white paper “How to win the hearts of digital customers”:
PDF File = https://www.theuxda.com/storage/app/media/uxda-white-paper-how-to-win-the-hearts-of-digital-customers.pdf

Author = Alex & Andrew & Linda (UXDA)

URL = https://www.theuxda.com/blog/ux-design-case-study-most-beautiful-banking-in-the-world