Case studies

2022/05/03 (新增連結)

Good design vs bad design

• 7 Great and Not-So-Great User Experiences

  • First, the good ones:

    • Strava

    • FatSecret

    • Betterment

    • Wanderu

  • Now let’s move on to the not so great ones:

    • Uber/Lyft

    • Starbucks

    • Flour

• Good design vs bad design: Comparing Airbnb, VRBO and Booking.com

• The power of good UI and how it enhances engagement

  • Fooji

• 8 Bad UX Examples That You Can Learn From

• 15 Good UX Examples For SaaS Every UX Designer Should Follow

  • The three elements that good UX examples share are:

    • Simplicity

    • Usability

    • Visual design

  • 15 Good UX examples for SaaS apps

    • Airtable example — The right amount of user friction at signup

    • Figma example — Blend in your upsell prompts

History

• The original UX designers: Henry Dreyfuss (1904–1972)

• Layout in ancient writing: UX inspiration from history

Case studies (by functions)

Agile

• UX/UI Case Study — Collaboration in Agile Design

  • Template & User Flow

Audio

• A User Experience Guide to Clubhouse : Is its User Interaction novel, or is this the story of the emergence of AirPods as a Platform?

Checklist

• How to Use Checklists to Improve Your UX

Customer

• How our redesign helped us grow 10x in a year — a UX case study: We, at Map My Customers, have been creating an all-in-one suite for managing outside sales.

  • Problems with the old design

  • Solutions in redesign

  • New features

Dashboard

• How Desktop Dashboards Really Work

Email

• Sending an email in just two clicks? — a UX case study

Flow

• How to provide flow experiences to your users

  • Providing Positive Frictions in The Customer Journey

  • Enabling a Distraction-Free Work Environment

  • Gamifying The User Experience

  • Giving Them Purposeful Goals and Contests

Landing Page

• How to craft an effective landing page? — a UX case study

Login

• UX Case Study #1: How do we influence a user to create a login through design?

  • Step 1: Gather Data

  • Step 2: Create personas and user flows

  • Step 3: Design a Wireframe

Mood board

• A UX guide to designing better mood boards

• Module 1: Design for Friction

Online shopping

• 6 steps to big results: How we redesigned the Sephora app

  • Define the Problem

  • Get Buy-In to Solve It

  • Set Goals

  • Research & Gather Inputs

  • Define Design Principles

  • Test & Iterate

• Designing an e-commerce site for a new women tech-underwear brand

• Best practices for improving UX in ecommerce

  • Rule #1 — Use Easy to Understand Categories

  • Rule #2 — Support Searches

  • Rule #3 — Use Helpful Filters

  • Rule #4 — Use The Product List To Display Necessary Information

  • Rule #5 — Design Easy-to-Scan Product Pages

  • Rule #6 — Have a Distraction-Free Checkout

• Anatomy of a paywall — How to design a mobile paywall that converts

Self-checkouts

• How come everybody loves to hate self-checkouts? (Redesigning Self-Checkouts, Part 1)

• What is needed to make a self-checkout that isn’t awful? (Redesigning Self-Checkouts, Part 2)

• Can a new interface solve the problems with self-checkouts? (Redesigning Self-Checkouts, Part 3)

Tab bar

• Coinbase’s animated TabBar in React Native

Case studies (by topics)

Banking / Fintech

• How we improved user awareness of Jenius apps features — a UX Case Study: While improving the split bill feature.

• Investing for the rest of us — a UX Research case study A UX project for a FinTech startup tapping into a gaming experience, inspiring people to learn, level up and share their investment knowledge.

• Case Study: Designing an online tax assessment tool that doubles as a lead generation site.

• Curio: UX Case Study for Credible Commerce

• Robinhood app and why not all things should be gamified

Broadband

• Improving the online broadband purchase experience — a UX case study

Cooking

• The Flavor Matrix: a case study on the UX of cooking

Delivery

• Designing a tipping experience for Swiggy delivery

• Case study: Allowing group orders in food delivery apps

Drink & Food

• Designing a better meal planning experience — a UX case study

• Dine Rite — a UX case study

  • Research

  • Persona

  • User Story Map

  • Wireframes

  • Information Architecture

  • Visual Design

  • Prototyping

• UX Case study: Coffee and Tea

  • Surveys, Field Trips, Affinity Diagram, Personas, Information Architecture, Customer journey, and Storyboard

• “Main Street Brewing”- A UI case study

Education

• UX/UI Design and Brand Redesign for Options Solutions

• Creating an Online Learning Platform for an Education Company — UX Case Study

  • Competitive Analysis

  • User Research

    • affinity map

  • User Persona & Their Journey

  • Ideating on Possible Solutions

  • Mapping Out the User’s Interaction

  • Sketching Out & Testing the Concept

  • Mid-Fidelity Wireframes

• Painting the online academic scene blue for the Ateneo — a UX case study

  • Concretizing the Problem

  • User Journey

  • Wireframing

  • Prototyping and Testing

Entertainment

• Case study Gerrard Street music sharing

  • Research

    • Empathy Map

  • Design

    • Architectural Information

    • Wireframe

    • Style Guide

    • Usability Testing

• SoundCloud: building a habit-forming product — a UX case study

• Mooviz: A UX Case Study

  • Defining the User Flow & Card Sorting

  • Rapid Prototyping

  • Wireframing

  • User Testing

  • Visual Design

  • Brand toolkit

  • Mood board

• UX Time Traveling & The Strength Of Simplicity | UX Design Case Study

  • Experience map

  • Wireframes

  • Mood board & Style guide

  • Tested high fidelity prototype

  • Presentation of the final produc

Environment

• UI Case Study: BC SEA

• How we used UI/UX to confront the climate crisis

• Conscious: A UX Case Study

• The Sierra Club — A Website Redesign Recommendation

  • Usability Testing Through User Task Flows and Scenarios

  • Competitive Matrix

  • Feature Analysis — Competitive

  • Feature Analysis — Comparative

  • The Heuristics Analysis

  • Site Map

  • User Task Flow

  • The Mid-Fi Wireframe Design

    • Usability Testing on the Redesign

    • The new and improved sitemap

    • User Flow

  • The Second Mid-Fi Wireframe Design Iteration

    • Inside sample content pages

Gaming

• Understanding the success of Fortnite: A UX and psychology perspective, part 1

  • Understanding the gamer’s brain

    • perception = subjective

    • memory = fallible

    • attention = scarce

• Understanding the success of Fortnite: A UX and psychology perspective, part 2

  • Game UX = Usability + Engage-ability

• Spelunky: a Study in Good Game Design

• How to crack the Match 3 code — Part 1

• Pocket Camp Is a UX Nightmare

• From tasks to tricks: the UX of Among Us : Delving deeper into the design behind the “who-did-it?” mystery game in space.

• The UX of Overcooked: From umami to unexpected design principles

• A real money casual gaming app, MGPL — a UX case study

• Applying Usability Heuristics to Animal Crossing: New Horizons

• Diving Head First Into User Experience — a UX Case Study

  • Development/Research

  • Logo Development

  • Personas

  • User Flows/Paper Prototypes

  • Wireframes

  • Final Screens

  • Prototyping in Invision Studio

  • Final Prototype: iPhone/Apple Watch

• 3 important UX lessons from the Xbox Series X and PS5.

Healthcare

• Healthcare UX: a journey just begun

• Helping seniors manage their healthcare on a mobile device — a UX case study

• Can Transparency Be Opaque? - A UX case study to help Original Medicare beneficiaries make the most of their healthcare coverage.

• UX/UI Case study: Genomics App

• Muscle Mentor — Injury Prevention App: UX Case Study

• Care Centre, the software for medical receptionists: A case study

• 6 tips on designing for healthcare

• Bad Healthcare UX is Killing People: How people-centred design and design thinking can make healthcare safer

• The Essence of Meaningful Product Design: A UX Case Study by Mihaela Kandeva and Maggie Wang

  • Discovery

  • Exploration

  • Definition

• Creating Signar — UI/UX Case Study

  • Lets take a step back — Idea Generation

  • Target Market

  • Market Research

  • User Research

  • User Personas

  • User Flow

  • Wireframes

  • Character Design

  • Character Animation

  • App Screens

  • Augmented Reality Screens

  • User Testing

  • Prototype

• How to win friends and influence gym attendance — A UX case study

• Everywoman’s Health Centre Website Redesign

  • Research

    • Surveys and Interviews

    • Affinity Diagram

    • Persona

    • Content Audit

    • Card Sort

  • Planning

    • Storyboard

    • Sitemap

    • Key Features

    • User Flow

  • Prototyping

• How Peloton uses psychology to perfect their customer experience

• Redesigning a sleep and activity tracker’s e-commerce page — a UX case study

• SideKcK - Mobile App Redesign

  • SideKcK is a gym buddy finding app to assist people with matching a suitable gym buddy to do workout side by side.

• UX Case Study: MVMTLAB app

• What if medical records were designed like a game of chess?

• How to Build a Patient and Doctor Appointment App

• If you think you can design a User Experience in 4 days, you’re right — a UX case study

  • Research: Interviews and Inquiries

  • Research: Synthesis

  • Rapid Prototyping

  • User testing

Gardening

• Eden Garden — A UX Case Study

  • The Challenge

  • Job Story

  • Site visits & Interviews

  • User Types

  • Competitive Analysis & Competitor User Journey

  • Card Sorting

  • Sitemap

  • Wireframes

  • Interview Script

  • User Testing

Housing

• Mobile App to simplify landlord and tenant communication — UX/UI Case Study

• Unlocking a door to a better roommate : a UX Case Study

Media

• New York Times x Google Maps: UX Case Study

Non-profit

• Urban Archive | UX Redesign: Urban Archive is a technology nonprofit that creates new connections between people, places, and historical institutions.

  • Service Blueprint

  • Affinity Mapping (Research Synthesis)

  • Revised Problem Statement

  • Feature Analysis

  • Usability Testing

  • Open Card Sort

  • Task Flows

  • Design Studio

  • User Flow

  • Feature Translation

  • Style Guide

  • First Iteration Designs

  • Usability Testing Designs

  • Finalizing and Spec Doc

• Change: Decisions in UX/UI

  • Decision 1: Concept

  • Decision 2: Rewards

  • Decision 3: Look and Feel

  • The Final Product

  • Future Iterations

• Redesigning a non-profit website — a UX case study

  • UX Techniques: Business Analysis, User Interviews, Surveys, Secondary Research, Competitive/Comparative Analysis, Affinity Mapping, User Flows, User Archetypes, Site Map, Sketching, Wireframing, Usability Testing

• Reuniting divided families of the two Koreas — a UX case study

Public

• 92Y | UX Design & IA Case Study

  • Research

    • User archetype

    • Business model canvas

    • Competitive matrix

    • Comparative feature analysis

    • Screener survey

    • Usability tests and insights

    • Heuristic evaluation

    • Site map

    • Task and User flow

    • Mobile Audit

    • Closed and open card sorts

  • Design

    • Revised Site Map

    • Mid fidelity wireframes

    • User Testing Results and Insights

    • Clickable prototype

• How Googly Eyes Solved One of Today’s Trickiest UX Problems: A little robot at a library in Helsinki went from reviled to beloved, all because it got a new pair of plastic eyes

• UX solutions for a public library — a UX case study

• Arlington County Website Redesign: A UX Case Study

  • Research

    • Discovery and Competitive Analysis

    • Contextual Analysis and Interviews

    • Information Architecture

  • Ideation and Design

• Tackling the Immigration preparation issue to the US. A Case Study

  • Quantitative Learnings

    • Surveys

    • Interviews

    • Affinity map

    • Empathy map and Lean Survey Exercise

  • User persona

    • journey map

  • LOW FI/MID FI sketch prototypes

• What do sustainability & the cha cha slide have in common? — a UX case study: Helping Millennials in NYC see the Impact of Their Daily Green Habits.

Retail

• Remaining Competitive Amidst Online and Corporate Retailers: A Case Study on Kensington Market

Ticket

• UX Design Immersive: Project 1 — Groupie App

Toy

• UX Design Immersive: Project 2— Jeffrey’s Toys

Transportation / Car

• OMNY: UX/UI case study

  • Research

    • Survey

    • Pain points

    • Persona

    • Solution

  • Final Design

• How could a public transport experience be redesigned? — a UX case study

• UX inspiration from history: the Minivan Taxi

• Volvo Cars — a UX case study

• Cars as friends — an emotional, anthropomorphic UX case study

• Tesla’s UX is too far ahead to make sense (now): When UX and UI go at a different pace than the rest of technology

• British Airways — a UX case study

• How airline websites can use UX design to take your money

• City Aide — A UX/UI Case Study

• Getting insights through Bengky’s Usability : Through Bengky app, we would present a practical solution by providing on-demand motorcycle repairing service to riders who have emergency problems on the road.

Traveling

• How Booking.com makes you book a room — a UX analysis: Is Booking.com a master of psychological manipulation?

  • Masters of Scarcity

  • Loss Aversion

  • Commitment because of no commitment

  • Social Proof

• UX Case Study: Concept Luxury Hotel App

• From “Restroom Loo-Cator” to Points of Interest: How a Bathroom Idea Hit the Product Roadmap

其他

• Designing an on-demand storage app —a UX case study

  • detailed user persona, empathy maps, and user journey map

• Designing a better Asset Management experience (B2B) — a UX case study

• Tinythoughts journal app redesign — A UI/UX case study

  • User stories

  • Information architecture

  • Prototyping

• What Singaporean toilets can teach us about automation UX: Automate, but give a fallback option.

• The UX of Dora: 3 Design Lessons from a Little Adventurer

  • Make It Predictable

    • Maintain design consistency

    • Leverage established design patterns

    • Use metaphors and animations

  • Use Simple Language

  • Provide the Necessary Tools

Case studies (on company/product)

Abercrombie & Fitch

• How a massive rebrand & better UX saved Abercrombie & Fitch

Airbnb

• A Deep Dive into Airbnb’s Server-Driven UI System

• Hacking Human Connection: the Story of Awedience : How a home-grown product helps Airbnb employees feel more connected during solitary times

Amazon

• How Amazon couldn’t ignore these navigational patterns for a better UX

AngryBirds

• The shape, the color, and the emotion: Angry Birds’ character design

Apple

• The autopsy of an Apple webpage: first-person, bird’s eye, and the “google maps view.”

• What the Apple Newton taught us about UX 27 years ago

• Apple’s Fluid Interface Design

• UX lessons from Big Sur

• UX at Apple: the simple principle behind intuitive designs

• Apple Music is in Rough Shape. Here’s How to Fix It.

• What UX Tools & Techniques Do Apple Use?

• Analyzing Apple Music’s UX

Disney

• How Disney+ onboards new users — a UX analysis

• Looking at Disney’s theme parks through the lens of a UX designer

Duolingo

• Psychological principles in product design — a closer look at Duolingo

Figma

• The UX of Figma plugins

• User flow uncovering. Figma

Google

• Answer machines: priorities and perils in web search design

  • In web search, context is:

    • primarily machine-inferred

    • hidden by design

    • opaque to the user

• Designing the UI of Google Translate (from Google Design)

• UI Case Study: Roboto A web page design showcasing the universal font (from Google)

• Decoding Google’s secret UX weapon

  • Sweat the small stuff.

  • Build ugly prototypes, fast.

  • Look for ideas in weird places.

  • Don’t criticize. If you do, ask one thing, politely.

  • Deconstruct conventional truths.

  • Don’t dream. Build and see where it takes you.

  • Practical Takeaways

    • Don’t rely on assumptions, just test.

    • Never take things for granted.

    • Be combat-ready.

• Transforming Google Translate

Hinge

• How Hinge plays with your psychology to get you a match

IKEA

• Integrating DIY Feature into IKEA App **

  • Hypothesis

  • User Research

  • Synthesis

  • Ideation

  • Usability Test

Instagram

• Instagram makes bad navigation good?: Is popularity enough to switch nav patterns?

• Instagram — A UX Case Study

• Instagram Stories | UX Challenges

• Instagram redesign — a case study

• Why some people aren’t happy about Instagram’s new home screen

• 10 Universal Design Principles as used by Instagram

• Tinder | Pinterest | Instagram: Let us introduce you to REAL, a fashion mobile app based on customer-generated content, designed to feature real people, real fits, real value, and real style.

  • Research from user interviews

    • Synthesis of “i”-statements from user interviews provided valuable touch-points of user goals and needs

  • Crafting the the primary persona

  • And her journey map reveals similar pain points

  • Feature Prioritization Mapping

  • Designing the features and homepage look

  • Crafting the user flows

  • Designing the style guide

  • Usability results in round 2 showed an ease-of-use with testers

Lyft

• Adding a feature to Lyft — a UX case study ** 很完整的流程

Microsoft

• 20 Years of Microsoft UI Crimes

Netflix

• How Netflix makes you sign up — a UX analysis

• Netflix discovery experience — a UX/UI case study

• UX inspiration #1: Netflix’s web playback

• Netflix Feature: “Filtering My List”

• How Netflix uses psychology to perfect their customer experience

  • The Reciprocity Principle

  • Cocktail Party Effect

  • Idleness aversion

• Netflix’s UX Design Is Keeping Us Up at Night

• The one thing Netflix understands that HBO Now doesn’t

• Why Can’t We Find What to Watch on Netflix?

• Experience is in the details: analyzing the UX of streaming services

• Five Ways Netflix Used Psychology to Become the World’s Biggest Streaming Platform

• A Brief History of Netflix Personalization

• Decision Making at Netflix

• Modernizing the Netflix TV UI Deployment Process

Nike

• 5 UX Lessons from Nike GO FlyEase

Paypal

• Paypal unsolicited redesign – a UX case study

Shopify

• Next-generation theme design: how we made Dawn fast, extensible, and beautiful

• What’s behind Shopify’s sensational success?

  • Pinpointing user needs and developing an ecosystem around them

  • Empowering their customers and enabling them to focus on what matters

  • Enhancing customers’ capabilities to make them more competitive

  • Shining the spotlight on their customers, not themselves

• The role of delight and difference in UX at Shopify

Skype

• UX Review of Skype App

Slack

• Slack Onboarding — Learn How To Recreate One Of The Best User Onboarding Flows For Your SaaS

Snapchat

• Snapchat: A Redesign and Dark Mode Case-Study

Sony

• UX inspiration from history: Sony Walkman

Spotify

• Bad UX Roundup: Spotify edition

• 4 Terrible User Experiences in the Spotify App

• Spotify UI Fails

• Spotify 2019 Wrapped — a design masterstroke: Exploring the Colours, UI, and Data Visualisation behind it

• Startup Lessons from Spotify Wrapped

• My friends say Spotify SUX, so I took a look at its UX

• Spotify in Neumorphism

• Better in Black: Rethinking our Most Important Buttons : We’re changing Spotify’s most important buttons. Here’s why.

• UX analysis: Apple Music vs. Spotify’s artist page

• User flow uncovering. Spotify

• 7 Laws of UX that Spotify Follows

• The top 3 points you should have paid attention to in the Spotify Engineering Culture videos that aren’t Squads, Chapters, Tribes, Guilds

  • Aligned autonomy;

  • Creating trust-at-scale (across boundaries);

  • Decoupling (to enable autonomy)

Tiktok

• TikTok: designing digital products for the Generation-Z mindset

Uber

• How Uber uses psychology to perfect their customer experience

  • Idleness Aversion

  • Operational Transparency

  • Goal Gradient Effect.

• Design Uber’s Backend: A Systems Design Walkthrough

• People remember less of your product than you think : I asked people to get an Uber using their memories alone.

• 7 Things I Learned from Uber’s UI Design

WhatsApp

• Redesigning WhatsApp

Wordle

• Wordle is a masterclass in product design simplicity

UX Challenges

• UX challenge: make the carousel for eCommerce better (1/6)

• UX challenge: Let’s make reviews engaging (2/6)

• UX challenge: Provide value with cross-selling (3/6)

• UX challenge: Why cart page design is inefficient (4/6)

• UX challenge: How to boost revenue with 404 page (5/6)

• UX challenge: Is physical store better than eCommerce? (6/6)

Ironhack

Ironhack

• IronHack “Add A Feature” Project: Expedia App.

  • Secondary Research

  • Competitive Feature Comparison

  • Qualitative Data

  • Value Proposition Chart

  • Affinity Map

  • MoSCoW chart

Ironhack Exercises

• Ironhack Exercise 1: Visual Note Taking

• Ironhack Exercise 2: Copy an App Using Sketch

• Ironhack Exercise 3: UX in Real Life

Ironhack Challenges

• Ironhack Challenge 1 / Design Thinking

• Ironhack Challenge 1: Design Thinking

• Ironhack Challenge 2: Creating Wireframes for Calm

• Ironhack Challenge 3: Redesigning the TripAdvisor App