customer support ux case study

69 original UX studies, explaining exactly why something works, or doesn't.

• Browse all UX Studies
• Join free UX newsletter

Popular Filters

• Most popular
• UX of Banking
• Unlock more with BFM+

A curated collection of UX ideas and experiments for you to find your next gem.

• Browse all UX Bites
• Ideas to reduce churn
• Onboarding Bites
• Increasing User Delight

52 biases, design principles and UX concepts to improve your designs.

• Go to UX Glossary
• Reducing churn
• Improving conversion rates
• Free UX newsletter

By Peter Ramsey

In this chapter I discuss:

How responsive is their customer support, the experience of customer support, 1. "press 1, followed by a hash...", 2. the problem with queues, 3. holding music, 4. persistence of live chat, customer support.

It’s possibly irrational, but I still like the idea of being able to walk into a physical branch of a bank. Maybe it’s because I like knowing that if things got really bad, I could just turn up and complain in-person.

We’ve probably all felt the alternative: trying to complain to an online-only company, when all they have is a phone line, which nobody answers. You feel helpless.

The challenger banks—who don’t have any branches—are battling against this perception, trying to convince the world that you don’t need them at all.

Meanwhile, the incumbent banks are closing branches to reduce costs, and trying to optimise how many they keep open.

The trend is clear: in the future we will do less of our banking in-branch, and more online, likely through a mobile app.

So there’s no escaping it; great online customer service will become even more of a distinguishing factor between banks.

Summary: There are some clear winners and losers here. But overall, the user experience of customer support is desperate for some innovation.

Why you don’t need touch-tone call redirects.

Why people should copy Disneyland more.

Why playing bad hold music is terrible idea.

Why in-app page persistence is important.

To answer this, I tracked two realistic customer service scenarios over a few weeks, whilst controlling as many of the variables as I could.

The first was to see how quickly I can speak with a human over the phone. This was measured from the moment I made the call, so it includes all the time I spent listening to their automated messages.

This is because it’s misleading for a bank to claim that they answer all their calls within 5 minutes, if the user has to sit through 15 minutes of announcements first.

Avg. time taken to speak with a human on the phone

Time in minutes

Notes on chart above: Mon-Fri, 9-5 • Mean avg. of 5 calls • See footnotes for full results & methodology.

But this doesn’t paint the full picture, you also need to understand how consistent the banks were.

Range of time taken to speak with a human on the phone

Time (rounded to nearest minute)

Whilst it’s certainly not a perfect study, you can clearly see a trend: some of the banks are consistently faster than others.

But what about the growing popularity of giving support over a live chat ?

I wanted to mimic the following plausible scenario: you’re trying to send a friend some money late into the evening, perhaps for a taxi, but the app keeps crashing.

Note : Co-op, Metro, First Direct and Nationwide do not have in-app live support, at least, not out of hours.

Avg. time to respond to live chat ‘out of hours’

Notes on chart above: Outside working hours • Median avg. of 5 chats • See footnotes for full results & methodology.

Yeah, Revolut only ever replied to 1/5 of my messages. Given that I couldn’t even phone them, this is unacceptable.

And when you look at how consistent the banks were with their replies, you can clearly see which ones offer suitable ‘out of hours’ support.

Range of time taken to respond to live chat ‘out of hours’

In fact, Revolut do something really strange: if they don’t reply within a few hours they just close the ticket.

Whilst the results of this test are clearly anecdotal, and from a relatively small sample size, it does suggest which companies can consistently provide responsive customer support.

But what about the broader user experience? That’s what the rest of this chapter explores.

Press 1, followed by a hash, for problems with your card. Press 2, followed by a hash if you’re having problems with your mobile app. Press 3, followed by hash, if you’re having problems logging into your account. Press 4…

Wait, what was 1 again?

This is a terrible user experience . Not only is it an unnecessary memory challenge, but often none of the choices feel suitable.

Call routing like this was introduced in the 1980s, when a company would have one phone number, and it’d be printed in the local paper.

But, 40 years later, it’s nothing more than an annoyance for most users. And, it’s totally unnecessary now. This is what should happen:

1. Click on ‘help’ in the app

It’s what they’ll do first anyway.

2. In-app questions

This is the digital version of ‘press 1 for…‘, with the bonus value of being able to solve many of their issues within the app.

3. Show a call button linked to a variable number

This routes directly to the right team, based on that specific problem.

So which banks still ask you to make selections while on the phone?

Can click a direct link from the app:

Still required to use call ‘options’:

Does not have a human-operated phone line:

First Direct

Imagine queueing for a ride at Disneyland, but the queue wraps around a corner and it’s neither moving, nor can you see how long it is. It’d be frustrating, right?

But although people love to moan about long queues, there are two important subconscious things influencing their behaviour, while they’re in one.

1. You’re able to constantly re-estimate a wait time

Visually, you can guess if the queue is 5 minutes, or 5 hours.

🚶‍♂️

2. The feeling of progression is rewarding

The physical action of moving forward creates a feeling of progression.

When either of these elements are missing, the experience is considerably more frustrating. In particular, without being able to track your progress, you don’t have as good a reference for the time you’ve already invested.

Or rather: someone who knows that they’ve completed 60% of a process is more likely to continue than someone who is 6 minutes into a process of unknown length.

Imagine how much harder it’d be to climb a mountain if you didn’t know how high the peak was.

In the physical world, these factors come with no effort—it’s just how queues work. But in the digital world its value needs to be recognised and implemented.

None of the banks did an adequate job of catering to these two psychological needs.

For clarity, saying “your wait time is approximately 20 minutes” at the beginning of the process is not the same. The real value is in the subconscious ability to constantly re-estimate your waiting time based on your progress and position.

Disneyland know this, and they’ve doubled down on it by anchoring different points of the queue with new approximate waiting times—this helps keep your sense of progress up, while maintaining realistic expectations.

You may be thinking

“Sure, but this would be really difficult to do for a call centre queue”.

Nope, Twilio do it—if you implement their API correctly. You can set it to tell the user every 30 seconds where they are in the queue, and how long the estimated wait is.

Or even better, give them push notifications via the app to show them where they are in the queue.

To reuse the Disney analogy, imagine you’re in that queue—the one where you’re standing still—but this time there’s a speaker right next to your head.

That speaker is playing the same 20 second jingle over and over again, and for some reason it is massively distorted. Like, it’s twice as loud as it needs to be, and more distorted than you’ve heard from any speaker made in the last decade.

Well, this is precisely what hold music is. Just have a listen for yourself.

Something I need to make clear here is that the quality is not terrible because I’ve recorded it poorly, I promise you, that’s how bad they sound.

Seriously, listen to Santander’s—why it is so loud?

Making somebody sit through 20 minutes of this is a very effective way of guaranteeing that the customer is in a terrible mood when somebody finally picks up the phone.

So, which banks play the same jingle on repeat?

Plays the same jingle on repeat:

Seems to have multiple songs:

Does not play any hold music:

It’s common for apps that require authentication—like banks—to automatically log you out after a period of inactivity.

This is actually a good thing, because if you leave your phone on a table in Starbucks, and somebody finds it, they can’t access your online banking.

But the vast majority of ‘auto-locks’ happen while you’re at no risk, like when you’ve got a live chat window open and your phone goes to sleep.

It’s obvious really, but if this happens, you’d expect to reauthorise yourself, and land straight back onto the live chat. But most of the time, your journey looks more like this:

1. You’re on the live chat.

Waiting for a reply.

2. App logs you out due to inactivity.

Perhaps you’re on another app, or your phone went into sleep mode.

3. Takes you to the homepage on reboot.

When you reopen the app it just loads the normal homepage.

This is terrible UX, as you have to navigate back to your chat every time you check your phone.

So which banks kept persistence of the live chat, even after having to reauthenticate yourself?

App page was persistent:

Just puts you on the homepage:

I should add that I tested this so many times, and neither group was absolutely consistent. Very occasionally Starling would also redirect you to the chat page, but most of the time it didn’t.

Every now and then with software you see something brilliant, and it immediately feels like the obvious thing to do. It’s a rare moment, and as someone who obsesses over UX, it feels like a glimpse into the future.

Well, I had one of those moments , while I was on the phone to Monzo, navigating my way through their automated decision tree.

“Press 1 for help with your bank statements…”

I actually pressed that option by accident—which nullified the speed run—but then something amazing happened: I instantly received a notification.

What Monzo have done here is exceptional. They’re using push notifications to redirect you to specific pages of their app, whilst you’re on the phone.

This is revolutionary—and I mean that literally, not hyperbolically— because it demonstrates a new way to interact with a customer.

The potential for this concept is huge. It could remove a lot of the friction from customer support:

1. To make queueing better

Push notifications to track your progress in the queue.

2. To replace hold music

Be told when you’re next—no awful music required.

🙋‍♂️

3. To prove your identity with biometrics

And get rid of telephone banking passwords.

👩‍⚕️

4. To help diagnose your problems

“We’ve sent you a notification, can you click that and tell us what happens”.

And it’s not just limited to banking. Any company that has both an app, and telephone customer support should be implementing this.

Your phone is already your wallet, your car keys, your TV and your light switch.

Well, it’s also how you’ll verify your identity on the phone, share links and solve problems with customer support agents.

Now, I appreciate that some people—particularly older customers—will probably always be reliant on the traditional methods. And that’s fine, innovation doesn’t have to immediately replace its predecessor.

In fact, it rarely does.

That was an easy way to consume 50 hours of UX research, right?

What will you dive into next?

All of the UX analysis on Built for Mars is original, and was researched and written by me, Peter Ramsey.

Never miss the free UX analysis

Free case studies, the moment they’re released, plus a digest of the best UX Bites every few weeks.

Call Center Support Application

With a significant increase in call volume, the ASERT Resource Center leadership team recognized they needed to modernize their workflow and technology in order to support callers and meet new performance objectives.

ASERT (Autism Services, Education, Resources and Training) is a statewide initiative funded by the Bureau of Autism Services under the Pennsylvania Department of Human Services. ASERT supports individuals with autism, their families, and professionals. These support services include a Resource Center which is staffed with knowledgeable experts who can be reached via a toll free phone number.

A customized call center web application needed to be designed and developed for the Resource Center staff to better serve  callers as well as provide management and leadership an opportunity to analyze data and improve operational performance.

• Support unique call center workflows.
• Collection and capture data for strategic planning and resource management.
• Deliver a single solution for use on desktop or tablet devices.

My Responsibilities

My responsibilities on this project included user research, design workshop facilitation, interface design, interaction design, visual design, prototype and mockups creation, user testing and design system documentation.

Process and Methods

I worked closely with the Project Manager in planning and executing a design process that aligned effectively with the clients needs as well as the development team’s approach (primarily waterfall). As this was a newly imagined solution, both the client and the development team benefited from the iterative design/test phase with low-fidelity prototypes.

Contextual Inquiries, User and Stakeholder Interviews

I planned and conducted interviews with Resource Center staff and management at the start of the project. These stakeholder interviews yielded valuable information about the current pain points and struggle the team was experiencing.

I conducted contextual inquiries with the customer service representatives (CSRs).  This provided a “boots on the ground” perspective of call volume, application usage, and individual workarounds.

• Most workflows involved a “start-and-stop” process; where initial caller information was collected and recorded and would be “picked up” later when there was time to locate requested information.
• Each Call Center staff member recorded call information on individual notebooks (shown), with no data being collected on the nature of the call.

Design Workshops, Concept Models and User Story Maps

With a better understanding of the Resource Center’s goals, needs, pain points, and current processes, I planned and facilitated design workshops with the team. These sessions helped work through concept models, user stories ultimately leading us to explore various solutions. Through “how could we” exercises, we ultimately agreed on a concept model that combined a ticketing system with a “pinning” system of resources that could be sent directly to the caller, collecting valuable data points along the way.

Use Cases and Workflows

I  documented the application’s use cases and workflows. This provided value to the project at multiple levels:

• Acted as a guide in designing the user interface.
• Gave clarity to the backend developer / architect as they began to plan the technical aspects of the application.
• Provided a framework that helped in the testing phase of the project; focusing our attention on the most critical tasks that delivered the most value to the Resource Center staff.

Sketches, Wireframes and Prototypes

I typically prefer sketching interface and interaction designs as it allows for greater exploration and generation of more ideas without being concerned with smaller details such as colors, fonts, and precise alignment. I have also found that sketching also improves communication when early designs are being shared with the team. It has everyone focus on the important issues at this early stage, such as the overall structure and flow of the interaction, while not being distracted by the details of the look. Following review of sketches, I move to using Axure to construct wireframes with interactions and prepared for user testing.

Design Hypothesis

We believe that by combining the process of collecting caller information with resource lookup features we will increase the CSR call throughput (per hour) while simultaneously collecting valuable data for analysis. We will have demonstrated this when we can increase the number of calls serviced by hour by 15%.

User Testing

Following the creation of the interactive prototypes in Axure it was time to test the design. I created a test plan and coordinated with Call Center staff to conduct the test on location at the Resource Center. I then conducted moderated usability tests with customer service representatives (CSRs), recording our sessions which were referenced during analysis.

Findings from the test were shared and discussed with the team. Adjustments were made to the wireframes to ensure that all members of the team were clear on modifications to the original design.

High-Fidelity Mockups and Interactions

With input from the testing sessions I moved to create high-fidelity mockups using Adobe Photoshop and InVision. This effort included creating visual mockups of the final design for both tablet and desktop displays (our targeted delivery platforms).

Interactions and application flow were also included in the InVision prototypes which were shared and reviewed for final input from both the client and the development team. This approach not only guided the development team, it significantly reduced the potential for “surprises” and personal interpretations of how the application should be presented and behave.

Design System & Style Guide

With the final interface design completed, an inventory of all interface elements and components were identified and documented in a style guide to be used as a front-end development reference.

The decision to document the visual interface was also guided by the fact that additional applications and marketing materials were on the ASERT roadmap. Using consistent styles and interactions not only reduced development team effort, but also introduced consistency of the experience across all ASERT digital properties (public websites, email communication, presentation materials, etc.)

Results and Outcomes

By using user-centered design methodologies, the team was able to deliver a functional application that exceeded the project's objectives. It also served as a platform for additional products and services for ASERT in their effort to serve the autism community throughout Pennsylvania.

• Integrated application allowing CSRs the ability to capture caller information while simultaneously delivering requested autism-related information via email or snail mail.
• Continuous data-collection and dashboard reporting of KPIs to managers and leadership for strategic and logistical planning.
• Increased ability to answer more calls per hour without the need to increase staff.

Copyright © 2021 Andy Mathers. All Rights Reserved. Proudly made in Lancaster County, Pennsylvania with Figma and Webflow . Icons by Feather ,  Fonts by Google Nunito Sans & Leibre Baskerville

UX Research: How to Use It to Improve Customer Service

Published: September 30, 2022

Customer experience is a topic we talk about a lot in the customer support field, but UX research isn't typically part of the conversation. Improving the customer experience requires effort from multiple departments, but in this post, we focus on how user experience (UX) research and customer service coexist.

When UX and customer support work together, UX can learn about patterns in customer behavior, usability problems, and customer emotions. If something is a pain for users, customer service reps will know about it and UX researchers can forge a plan to remedy the issues.

In this post, let's review what UX research is and how you can improve your customer service with it.

What is UX research?

Types of ux research, ux research methods, ux research interview questions, ux research tools.

UX research is the study of the user experience on a practical and functional level of product design. UX researchers are focused on making sure products and services are usable so customers can easily meet their goals.

UX research focuses on the functionality of your product/service, and not the holistic view of your brand.

The main difference between customer experience (CX) and UX research is that while CX research might focus on how confident customers are with your customer service, UX research focuses on how successfully those customers can navigate your product and self-service website with a special interest in whether it's easy to use.

This means UX researchers want to study how customers move about on your website, or in your product/app. They're thinking about questions like "What are your customers' behaviors like?" This research might involve using digital observation sessions to see how customers use your tools or you can use surveys to collect user feedback.

UX is a structured, data-driven, research-driven strategy. This type of research usually begins with qualitative methods to determine the user's motivations, and then might use quantitative methods to test the results. Let's dive into the differences between those two types of UX research now.

• Qualitative research: This type of research is focused on attitudes — meaning it's focused on the user's feelings and emotions toward their experience. To gather this research, you'll need to conduct interviews and ask questions, like "Why did you have trouble completing a task?", or "How did you feel while using the product?" Qualitative research can be conducted using methods like interviews, focus groups, diary studies, and open-ended surveys.

• Quantitative research: This type of research is focused on behavioral research methods gathered in the form of numbers and statistics. For UX, this means you measure things like how long it takes a user to complete a task, the percentage of users who completed the task, and how many errors they encountered on the way. With these results, you'll see where users click on a page, and what navigational path they take through your product/app/website. Some methods for quantitative UX research include usability testing, card sorting, A/B testing, evaluations, and analytics.

Now to do this research, you can use several different UX research methods. Let's review those now.

• Usability testing.
• Card sorting.
• Diary studies.
• Interviews.
• A/B testing.
• First click testing.
• Accessibility evaluations.
• Focus Groups

1. Usability testing.

The most common type of quantitative research method, usability testing is when you observe a participant trying to complete a task with your product. This will let you measure how easily people can complete a task, how quickly, what problems they encounter, and if they are satisfied with the process.

Usability testing can also be done remotely, using a platform to record the screen (and voice) and track the eye movements of participants as they interact with your product in their natural environment.

2. Card sorting.

This quantitative research method is commonly used when designing the navigation of a website to help inform information architecture. Card sorting works by having the participants of the research study organize topics into groups that make sense to them, so you can create intuitive and easy-to-navigate web pages.

3. Surveys.

With a survey or questionnaire , you can ask questions to help you with both qualitative and quantitative research. This will help you listen to your customer so you can find new problems, come up with new ideas, and collect feedback from your users.

4. Diary studies.

A diary study is a self-report of a user's activities at regular intervals to create a log of their activities, thoughts, and frustrations. This type of qualitative research takes place over a long period of time. This can help you gather organic feedback on your user's behaviors and experiences using your product in their day-to-day life. You'll find out how often they use your product or service, and why or why not. Plus, you'll learn whether they were able to complete the task or if they experienced frustrations in the process.

5. Interviews.

Similar to surveys and diary studies, you can also interview your users to gain insight into what a user wants from a potential product. If you interview more than one person at a time, this is called a focus group .

These interviews help you observe dynamic discussions and you can observe verbal and non-verbal feedback from your users by asking open-ended questions to uncover details that surveys cannot. This helps you understand your user's feelings and experiences because you can ask follow-up questions and dive deeper into the qualitative research questions.

6. A/B testing.

With A/B testing you can test two different versions of your product to see what audiences prefer. Whether it's a different navigation system or different versions of a landing page. For UX research, this could mean testing various versions of product features, navigation, or self-service website pages.

7. First click testing.

A first click test is when you examine what a user clicks on first when they're on your website and trying to complete a task. This lets you know where their eye is drawn to, and if the logic and navigation all make sense to them.

8. Accessibility evaluations.

An accessibility evaluation will take place to test your design and ensure it's accessible to everyone. How do people with disabilities interact with your design? Are there accommodations for people with disabilities? Accessibility is an important aspect of your customer experience and user experience research.

9. Analytics.

The last type of research method you can use is studying the analytics and metrics via website traffic reports. This will let you know information like traffic, bounce rates, time on page, etc.

At this point, you might be thinking, "What types of questions should I ask a user when conducting UX research?" Let's go over some UX research questions you can ask during an interview.

10. Focus Groups

A focus group is a qualitative research method that lets you have an in-depth conversation with existing, past, or potential users of your product or service. During this conversation, you can hear exactly what the end user thinks of your product in real time.

Focus groups can be done blind, also called a "blind study" for even more accurate results that won't be skewed by brand recognition (or lack thereof).

• What is your first impression of this product/feature?
• What do you think this product/feature does or will do?
• When and where do you think someone would use this product/feature?
• What do you expect to gain from using this product?
• What would keep you from using this product?
• Do you feel this product is similar to another one?
• Do you trust this product?
• You [started to shake your head] when I showed you the interface, what caused this reaction?
• How would you go about performing [task]?
• What do you expect to happen if you did this [task]?
• What alternative method would you use to perform [task]?
• Was anything surprising or did not perform as expected?
• Was the interface easy to understand?
• What was the easiest task to accomplish?
• What was the hardest task to accomplish?
• Do you feel this design was made for you? Why or why not?
• What was the one thing you liked the most about the design?
• What was the one thing you disliked the most about the design?
• If you could change one thing about the design, what would it be?
• Would you download/use this product if the change(s) were made?
• Do you feel this is something for the desktop? Mobile? Or both?
• Would you recommend this to a family member or friend?

Now that you're ready to get started with your user research, you'll probably want some tools to help you get the job done. Below we review some tools you can use at each step of the user research process.

• Survey tools.
• Usability testing tools.
• Card sorting tools.
• A/B testing tools.
• Accessibility evaluation tools.

1. Survey tools.

Survey tools can help you design and format your surveys. They'll help you send your surveys to your audience, whether it's a large or small survey.

UX Research Tools for Surveys

• HubSpot : HubSpot's feedback software takes the guesswork out of customer happiness with customizable surveys, built-in feedback dashboards, and a wide array of feedback methods at your fingertips.
• Qualtrics : Qualtrics XM Platform provides a suite of tools that enable UX researchers to identify gaps and opportunities in their customer experience so that they can focus on building the right solutions.
• SurveyMonkey : SurveyMonkey has built-in solutions to target feedback from employees, customers, potential customers, and other stakeholders of your business. You can choose the reason for your research (marketing, HR, etc.) and build a feedback tool to capture the quantitative or qualitative data you're looking for.

Image Source

2. Usability testing tools.

Usability testing tools will help you capture insight into how your customers use your product. Tools with a video approach will help you observe customers' facial expressions and body language, screen record their experience, and hear their tone of voice. Other tools focus on providing heat maps so you see where the user's eye is drawn and what areas they click on the most.

UX Research Tools for Usability Testing

• UserTesting : UserTesting helps UX researchers target participants for feedback on their products. It can be difficult to source participants without introducing some bias, but UserTesting can reduce the possibility of this happening.
• Chalkmark : Chalkmark specializes in first-click testing that lets researchers identify how users interact with their website, app, and other digital platforms. This tool can measure and help you improve the number of tasks a user can complete after their first click.
• Ethnio : If you already have tools to conduct your research, Ethnio can help you organize them in a research operations CRM.

3. Card sorting tools.

A digital card sorting tool will provide a platform where you can have users drag digital cards to different categories. This will help you learn whether the names and categories of products are understandable and match your customer expectations.

• OptimalSort : OptimalSort gives you a front row seat into how people organize and categorize information. This inight helps UX researchers make decisions about product architecture.
• Maze : Maze is one of the fastest ways to get customer-centric insights on wireframes, content, copy, and customer satisfaction. You can choose from a variety of eight tests, notable ones include prototype testing, tree testing, and the 5-second test.
• UserLytics : In a simple, 4-step process, UserLytics can improve your user experience. You can use the platform on its own, or incorporate professional services like test plans, moderation, and analysis into your workflow to get the best insights possible.

4. A/B testing tools.

Most marketing automation tools offer an A/B testing tool that will allow you to test different versions of an email, web page, or landing page.

UX Research Tools for A/B Testing

• HubSpot : You can run A/B tests on your web pages using HubSpot's "Run a test" feature. After analyzing the results, deleting the lower performing variation can be done in just a few clicks.
• FreshWorks : If you're looking to test multiple variations of a landing page, try Freshworks. It enables audience segmentation and revenue optimization features to help you get accurate measurements of the impact of your test.
• Optimizely : Optimizely offers researchers to run A/B tests without compromising other aspects of the user experience like site speed. By using a CDN to process images and other content, your A/B test results won't be skewed by an additional variable.

5. Accessibility evaluation tools.

An accessibility evaluation tool will review your website and let you know if it meets accessibility standards.

UX Research Tools for Accessibility

• DynoMapper : DynoMapper incorporates local and international accessibility guidelines in it's testing platform so that you can test for known and potential issues on your site.
• Remediate : Run automated accessibility checks using Remediate. It includes WCAG Guidelines, schedule testing, and re[air recommendations so you don't have to guess the best way to improve your site — you can rely on quality data.
• TPGi : TPGi is a free tool that scans five pages of your site on a monthly basis. It looks for potential issues and offers remedies.

Improving Customer Experience with UX Research

Continued collaboration between customer support and UX researchers will help both teams achieve the same goal: a more positive customer experience that results in fewer questions and provides immediate value for your customers. UX researchers should regularly keep in touch with customer service as they have incoming customer feedback on a regular basis with a gold mine of user expectations.

Don't forget to share this post!

3 templates for conducting user tests, summarizing UX research, and presenting findings.

Service Hub provides everything you need to delight and retain customers while supporting the success of your whole front office

• Artificial Intelligence
• Product Management
• UX Research

How to Improve the Customer Service With the Help of UX

Hossein Raspberry

As a UX researcher, I've had many opportunities to collaborate with people from different roles. While doing so, I have realized that areas of customer service and UX — traditionally quite different things — have a lot in common. But what is good customer service? How to improve customer service with the help of user experience? In this article, I will discuss the commonalities of UX and customer service, and give tips on how to provide great customer service that will eventually improve UX.

Customer service as a resource for UX

In a perfect world, we would expect all services and products to be easily usable and understandable, so that users would never have to contact customer service. But unfortunately, this is not always the case.

Even with great UX design, users can still have issues or questions around the clock, and they will email or call you for help. While all of this is happening, the product team can be so concerned with designing pixel-perfect screens that they may neglect to consider that the experience is way more important than the product they are building.

Many product teams share a variety of principles for improving customer services. Listening to users, usability testing , and not just as the last step of a project. This can improve their design, and the result is a product with excellent customer experience. However, it’s easy to forget about one huge source of information on user expectations: customer service. 

Customer service is any act that includes taking care of the customers’ needs by providing and delivering professional, helpful, and high-quality service and assistance before, during, and after the customers’ requirements are met. That is why besides user experience research, customer service is another power source that can continuously bring in information on your users.

If something is a pain for the users, you can be assured that it’s a pain for your customer support team. Customer service and the UX team have the same ambitions: users who have no questions and no issues when using the product. 

But when a user has a question, customer support’s task is to identify the right solution and explain it using the right words so that the user understands and doesn’t need to ask again. If they reach this goal, customer support provided the user with the best digital customer experience . A UX designer’s task is to foresee these user questions when writing the copy for a certain page or creating a certain feature.

In the rest of the article, we discuss customer service tips that have a common ground with UX and design heuristics.

Thinking of customer service as a part of the user journey

When a user feels agitated when using your product, giving them an unhelpful answer is just about the worst thing you can do to your brand. Every user associates the types of answers they get from customer support with the product. If they feel the help they receive is useful, they will remember the product positivity, or at least they will not hold any grudges against your brand. However, one single frustrating or unhelpful answer from customer support can convince a user that your product is just too complex for them.

The internet is filled with statistics about how one poor experience can hurt your retention. The negative company reviews show that poor customer service can result in a bad user experience. If your users contact your customer service team, it’s because they have an issue, and this is the moment when you can build or break their trust in your product. 

If your team provides a solution when your users think they are in a confusing situation, their trust will increase, and they will love your product even more. What’s more, users are more likely to convert if they feel that a product’s customer service is good.

So don’t let your users feel frustrated. Their experience with customer service is part of their experience with your product and its user journey.

Consistency and standards

One of the basic practices in design is being consistent. It is probably one of the most important things a designer must keep in mind while going about their work. 

But how to improve customer service with consistency? Consistency in solving and answering users’ problems is of paramount importance. It looks really terrible when the user receives different replies from different support team members of the same company. Ensuring everyone in the team consistently follows the same protocol improves the standard customer services dramatically.

While relying on consistency, you should note that relying on guidelines instead of scripts is better for customer service quality. Guidelines are more organic in serving customer needs because they help the team to adapt quickly as products and services change instead of waiting for scripts to be updated.

Understanding the user’s story

In order to design a product properly, a user’s story and their pain points have to be taken into consideration. This helps product designers empathize with the users, which results in better products for these users.

By the same token, customer service representatives need to listen to and try to understand the users’ story, ask them relevant questions to help them in whatever way possible.

Users hate it when they contact customer support and feel like they do not seem to understand their problem. It is even worse when the customer support team ends up giving a completely different solution.

Updating the users about the system status

As UXers, we know that we need to keep users informed about what is going on with the system status. Say, what step of the onboarding stage or checkout stage the user is in. The progress bar used in many different scenarios caters to this pretty well.

This same principle is also very important in customer support cycles. Users should know how their problem is being solved and by when it will be solved. This helps in calming down an agitated customer. Additionally, it adds to the overall customer experience.

Speaking the customer’s language

The products that we design should speak the user’s language, with words and concepts familiar to them.

Similarly, customer support executives should not elevate the user’s confusion by mentioning technical terms and phrases. You should avoid the terms used within the team that might not make sense to the user.

Takeaways on how to improve customer service with UX

Customer service is a useful supply for real user experience and statistics. You can get immediate user feedback when the product goes downhill in its user experience or when it fails technically. Every user who has ever provided feedback via call or email has deliberately taken at least a few minutes to tell you what they think of your product.

User feedback through customer service, be it questions or complaints, is a gold mine of user expectations! Therefore, customer service and UX teams should listen and take the incoming feedback more seriously.

At the end of the day, customer service and UX deal with similar aims, heuristics, and skills. Listening is what customer service and UX should do best.

Searching for the right UX agency?

UX studio has successfully worked with over 250 companies worldwide. 

Is there anything we can do for you at this moment? Get in touch with us and let’s discuss your current challenges. 

Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design.

Let's talk

How to Craft an Outstanding Case Study for Your UX Portfolio

Writing case studies for your UX portfolio can feel opaque and overwhelming. There are so many examples out there, and often the ones that make the rounds are the stunning portfolios of top visual designers. It can be inspiring to see the most beautiful work, but don’t let that distract you from the straightforward format of a good UX case study. 

At the core, a UX case study relies on excellent storytelling with a clear, understandable structure . This article breaks down the anatomy of a UX case study to help you tell a simple and effective story that shows off your skills. We’ll start with some general guidelines and structure, then break it down one piece at a time:

UX portfolio overview

What is a ux case study, general guidelines, how to structure a case study, how to fill in the details, defining the problem, understanding your users, early or alternate ideation, final design solution, next steps and learnings.

• Final thoughts

1. Before we get started

Before we dive into all the art and science of the case study, here’s a quick refresher on what a job-winning UX portfolio looks like. In this video, pro designer Dee analyses various design portfolios to pick out what works—and what doesn’t:

Simply put, a case study is the story of a design project you’ve worked on. The goal, of course, is to showcase the skills you used on the project and help potential employers envision how you’d use those skills if you worked for them.

A case study is typically written like a highly visual article, with text walking readers through a curated set of images. Curated is an important word here, because it should be short and sweet. It’s a chance to share what you want potential employers to know about your work on this project.

With that in mind, case studies are really a UX designer’s secret weapon in two ways. First, they get you in the door by showing more about your work than a resume and a top UX cover letter ever could. Another benefit is that they’re really handy in job interviews. If someone asks about a past project, you can walk them through the case study you’ve already created (this is sometimes a requirement anyway).

I mentioned that UX case studies are about storytelling. I’d actually say they’re about stories-telling, since they need to tell two intertwined stories .

The first is the story of your project. This answers questions like what problem you solved, who your users were, what solutions you explored, and what impact they had.

The second story is about you as a designer and your process. This is more about which methods you chose to use and why, how you worked within constraints, and how you worked as a member of a team (or without one).

So what are the steps for an effective case study? Well, like most things in design (and life), it depends. Every case study will be different, depending on what stories you’re telling. The six-part outline below, though, should guide you through an effective format for any UX project story. Here’s the outline (we’ll dive into each component in just a minute):

• Defining the Problem
• Understanding your Users
• Final solution

It’s worth it to add a few general notes before we dive into each of the list items above. For each section, include 1-2 short paragraphs and an image of a deliverable that visually tells the story your paragraphs explain. A reader should be able to either just read or just look at the images and roughly get what this moment in the story is communicating.

When choosing images to include, focus on quality over quantity.  Choose your best deliverables for each stage and briefly relate them back to the larger narrative. It can be tempting to overload the page with everything you created along the way, but these extra details should stay in your back pocket for interviews.

Lastly, make sure your case study is scannable . In the best of circumstances, people don’t read word for word on the web. Make sure your text is reasonably concise, use headers and strong visual hierarchy, and use bullet points and lists when possible. If you need a refresher on how to achieve this, check out our guide to the principles of visual hierarchy .

Ok, let’s take a look at each step in a bit more detail.

2. Anatomy of a UX case study

Like any story, the introduction sets the stage and gives much of the necessary context readers will need to understand your project. This is one section where people actually might take some extra time to read carefully as they try to discern what this case study is about. Make sure they have all the details they need.

Some key questions to answer are:

• What is your company and/or product?
• What user problem did you try to solve?
• What was your role?
• What tools and methods did you use?
• What are the major insights, impacts, or metrics related to the project

After introducing the project, dive more deeply into the problem you tackled. You touched upon this in the introduction, but this section is an opportunity to make a strong case for why this project exists. Did a competitor analysis or market research demand a new product? Was there past user research in your company that suggests a needed redesign of the product?

Remember that you’ll want to create a through line in the narrative, so try to lay out the problem in a way that frames your design work as a solution.

Deliverables that work really well for this section would be:

• Analytics or usage data
• Market research of internal business metrics
• Survey results or interview highlights

After explaining the problem, show how it impacts your users and their interaction with your product. If you did original user research or you’re seeking user research-oriented jobs, sharing interview scripts, affinity maps , and spreadsheets can be useful in showing your process.

However, this section shouldn’t be only about your process. A key goal of this section is articulating who your users are and what their needs are. These findings should set up your design work that follows, so try to set up that connection.

A few types of the deliverables you might share here are:

• User personas
• Mental models
• Journey maps or customer experience maps

Keep in mind you want to communicate users’ key motivations and challenges, as well as any more specific user groups you identified.

This section can really scale up or down depending on what you have to show. Research shows that hiring managers  don’t just want the final product , so it’s clear that showing some of your process is helpful. Especially for students or designers without a fully built product to show, this can be a moment for you to shine.

Don’t worry about the low fidelity of these documents, but the rougher they are, the more you’ll need to guide readers through them. Everything you show here should teach the reader something new about your process and/or your users.

Artifacts you might include are:

• Pen and paper or low fidelity digital wireframes

If you did early testing or faced constraints that determined your future design work, be sure to include them here, too.

This section should include the most final work you did on the project (e.g. wireframe flows or color mockups) and any final product it led to (if you have it). Be clear, though, about which work is yours and which isn’t.

Explain any key decisions or constraints that changed the design from the earlier stages. If you incorporated findings from usability testing, that’s great. If not, try to call out some best practices to help you explain your decisions. Referring to Material Design, WCAG, or Human Interface Guidelines can show the why behind your design.

If you’re able to show the impact of your work, this can take a good case study and make it outstanding. If your project has already been built and made available to users, have a look at any analytics, satisfaction data, or other metrics. See what you could highlight  in your case study to show how your design improved the user experience or achieved business goals. Ideally, you can refer back to your original problem statement and business goals from the introduction.

If you don’t have any way of showing the impact of your project, lay out how you would measure the impact. Showing you know how to measure success demonstrates you could do this on future projects.

Lastly, conclude your case study by sharing either your next design steps and/or some key insights you learned from the project. This isn’t just fluff! No project is perfect or final. Showing next steps is a great way to demonstrate your thinking iterative approach (without having to do the work!).

Also, many companies do (or should do) retrospectives after each project to identify challenges and improve future processes. Use this process and the insights you gain from it to inform your case study. Letting employers know you’re capable of reflection shows humility, self-awareness, and the value you can bring to a team.

3. Final thoughts

Since each case study is a unique story you’re telling about your project, it’s a little art and a little science. But starting with the structure laid out in this article will show who you are as a designer and how you solved a problem. And those are two stories companies want to hear!

If you’d like to learn more about how to craft a great UX portfolio, check out these articles:

• 5 Golden rules to build a job-winning UX portfolio
• The best UX design portfolio examples from around the web
• The best free UX/UI portfolio websites to use
• Salary negotiation for UX designers

BKT UX Case Study: How To Improve Customer Service in Legacy Bank's App

Banka Kombëtare Tregtare (BKT), the largest and oldest operating commercial bank in Albania, recognized that their digital offerings have lagged behind and needed a revamp to adapt to present-day service requirements. They challenged UXDA to update the bank's legacy operations by designing an app that would enhance customer service and empower clients to make smarter financial decisions. The goal was to change the perception of the brand from complex and formal to friendly and pleasant.

Client: Leader In the Albanian Banking Industry with Almost 100 Years of Legacy

BKT has a long history in Albania, with its roots dating back to 1925. Today, BKT’s overall assets are reaching around 5 billion USD, with 85 branches in Albania and Kosovo. As a customer-focused bank, BKT is committed to understanding and meeting the needs of its customers through digital transformation and innovative solutions.

BKT's mission is to provide its customers with peace of mind, convenience and opportunities in banking. To achieve this, they have established company values of integrity, fairness, people first, confidentiality, transparency and responsibility. BKT's vision statement is: "We know what you want and we make sure you get it. That simply makes us the first and the best bank." This reflects their dedication to excellence and customer satisfaction.

In order to maintain their position as a top bank in Albania, BKT recognized the need to update their legacy. In 2020, they partnered with UXDA to create a digital product that represents their values and vision and adapted their digital customer service in banking to present-day needs.

Challenge: Digital Customer Service Lagged Behind Brand Mission

The need to update the BKT banking app was obvious after observing competitors and user feedback. The demand for the mobile channel is constantly growing among client requests, so it is extremely important for the future development of the bank. But, unfortunately, the existing level of mobile customer service did not meet the high standards and mission of the brand, so a redesign was urgently needed.

The existing app had functionality problems, with users finding it difficult to perform certain tasks, such as easily accessing transactions, resulting in confusion about their financial situation. The outdated design also strengthened their perception of BKT as an old-fashioned and complex bank, which was not reflective of the bank's brand identity and value proposition.

UXDA’s challenge was to improve customer service in mobile banking by completely revising and rebuilding mobile user journey flows according to BKT user needs. We aimed to make the bank an approachable and reliable companion in digital banking. The BKT team's intention was to empower users to make smarter financial decisions and track their money flow, ultimately improving customers' quality of life.

Solution: Incumbent Bank Transformation into a Digital Innovator

Mobile banking upgrades and customer service improvements helped BKT change the perception of its brand from a digital perspective, strengthening their position as a market leader. It broke stereotypes about incumbent banking in the digital space by providing a light, fresh, enjoyable and user-friendly experience.

To achieve this, BKT's banking underwent a significant transformation, providing users with a convenient, easy and innovative mobile customer service to complete their daily financial tasks independently. The bank's team was determined to redefine their approach and legacy. This allowed the entire design process to be focused on making mobile banking intuitive, user-friendly and an enjoyable banking experience.

As all functionality is now available at the user's fingertips, the app has reduced the workload on bank employees and customer support. With the app's Personal Financial Management tools, users are able to take control of their finances and achieve their goals.

Approach: Digitizing Key Banking Functions and Revitalizing Perception of the Brand

After the initial research at the start of the project, we were able to set four main goals for a UX engineering and design approach:

• Update the app design and tone of voice;
• Improve user engagement and feature accessibility;
• Integrate budgeting into banking;
• Digitize key banking functions.

Revitalizing Design and Tone of Voice to Become More Approachable

According to user research, BKT was perceived as a large and unwieldy institution with an outdated app and poor digital customer service in mobile banking. Technical issues and a lack of user-friendly features made users feel as though they were working with an Excel worksheet rather than a modern digital banking solution. For example, users were experiencing long and complicated onboarding flow, the keyboard was covering some screens, and, to fully access the menu, users needed to scroll the screen.

To change this, BKT, through their transformed app, aimed to become more approachable and user-friendly, rather than appearing intimidating and impersonal. To build an app that could be a companion in users' daily lives and always there to help, we used a more friendly tone of voice and carefully selected the right design elements.

After our initial research, we discovered that many banking interfaces in Albania use harsh lines and sharp edges in their designs. The use of soft design elements can help differentiate BKT bank's interface from its competitors, making it more memorable and creating a unique identity for the brand.

On the one hand, red offers a powerful accent that distinguishes the brand from competitors, but, on the other hand, it is an archetypal aggressive color. At the same time, it was necessary to maintain BKT’s brand recognition by using their signature color palette - the red color is used in the logo and branding - so it ensures consistency between the app's interface and the overall brand of the bank.

So, it was important to properly balance its use in the interface. This was achieved through the use of softening gradients, discrete functional accents and appropriate use of white space.

All the design elements combined created a light and positive feeling, with contrasting colors and a light gloss adding a sense of energy and movement while, at the same time, maintaining safety, approachability and friendliness. Additionally, the interface's smooth transitions improved the user experience when switching between tabs or menu items.

The app's interface was created with a focus on the use of simple, bold and clear design, meaningful and understandable iconography, depth and shadow to create an intuitive sense of hierarchy and order and responsive design to ensure that the interface looks and functions well on different devices and screen sizes.

Rounded corners, subtle gradients, easily readable fonts and soft elements make the interface design more user-friendly and less intimidating. This creates a welcoming environment that encourages users to explore the features of the interface.

Rounded corners and easy-to-read fonts also help reduce eye strain and make the interface easier to navigate. This can help build trust and loyalty among customers, who are more likely to return to an interface that they find pleasant to use.

The tone of voice guidelines were updated, conveying friendliness and guidance and providing short and easy-to-understand information, rather than long and formal text.

Improving User Engagement and Accessibility to Deals

To improve the user's understanding of their finances, the dashboard was designed with a focus on the user's primary scenarios, gradually revealing secondary information on tabs and menus. Users can easily view the total and available money and quickly identify any notifications that require their attention or action. To enhance usability and improve the user experience, we incorporated large headers and ample white space to help users visually structure data and improve clarity.

To build stronger relationships with their clients and increase loyalty, BKT is offering personalized benefits and bonuses, for example receiving cash back on their credit card purchases. We included an offer section in the dashboard as an interactive button that captures users' attention to make these deals more accessible and increase user engagement. This feature also helps users feel more in control of their finances and encourages them to take full advantage of the bank's offerings.

Revamping the Transaction List

Previously, the user had access to a transaction list, but the information was limited only to date, transfer type and amount, making it difficult to understand the purpose of the transaction and track money movement. Users needed to navigate through the app to find the information they were looking for, resulting in poor money management. Additionally, quickly switching between accounts was not possible. However, after user research, the transaction list received a significant upgrade.

The new design highlights essential information, such as the recipient or sender of the payment, the amount and a visual representation of the account. Transactions are now grouped by completion date, and pending transactions are visually separated.

The emphasis is on providing a quick overview of the money movement by focusing on the amount and using bright colors and icons to facilitate transaction recognition and account navigation. The list features logos and photos to make it more engaging. Categories in transaction details were also introduced to aid users in budgeting.

Integrating Budgeting into Banking

During user interviews, we used the Jobs-to-be-Done framework to discover that, while performing typical banking tasks like checking account balance or viewing recent transactions, users had a goal in mind - to understand their spending habits. They wanted to know how much money they had spent and how much they had available to spend until their next paycheck.

This insight revealed an opportunity for BKT to solve an untackled user need by incorporating budgeting into the banking service. Previously, users had to manually calculate their available funds after paying their bills, making it challenging to improve their money management skills. To improve customer service in banking, we added a new section to the app called Budget.

Using the transaction list as a foundation, we updated it based on user needs and incorporated additional insights and contextual information. The app now serves as a financial management companion, assisting users in managing and monitoring their monthly budget. A chart with color accents and depth effects is provided for quick updates on total income and spending, making it more visually appealing and interactive. By combining the chart with the transaction list and planned spending, users have a sense of control, clarity and security.

Digitizing Key Banking Functions for User Independence

In order to increase user engagement and encourage regular use of the app to strengthen the perception of the app as a financial companion, it was essential to shift user behavior. Previously, many functions could only be accessed by visiting a physical branch, resulting in long wait times and a heavy workload for bank tellers.

To alleviate this burden and improve the customer experience, BKT aimed to empower their customers to complete tasks independently through the app. By combining intuitive design, accessible functions and easily understandable information, users gained a sense of control and independence.

Users can now be more independent and open an account, order a card or apply for a loan without the help of bank employees or customer support. By turning the most popular functions from physical branches into a fully digital experience, BKT improved user satisfaction and reduced the need for customer support assistance.

UXDA Deliverables

• Stakeholders’ interviews
• Product strategy
• Product audit
• Contextual market analysis
• User interviews
• User personas through a JTBD framework
• Empathy map
• User journey map
• Scenario prioritization in red route map
• Information architecture
• User flow maps
• Key design concept
• UI design prototype
• Product motion design
• Design system
• Usability testing

Takeaway: Established Banks Could Successfully Rethink Legacy to Evolve and Adapt

Embracing change in a large financial corporation can be a daunting task, but BKT demonstrated that even big, established 100-year-old banks can successfully update their legacy to keep up with the digital age. They recognized that the banking app was more than just a digital channel - it was a product in its own right . Therefore, they directed increased attention and funding to turn it into a key asset to execute the brand’s mission.

The bank's team was armed with courage and persistence to focus on the needs of modern customers and do their best to ensure an exceptional digital experience. By conducting extensive research and gaining deep insights into their users, the BKT team, together with UXDA, made structural and visual changes to the mobile banking dashboard, information architecture and flows, with the singular goal of improving customer satisfaction.

These changes not only improved BKT's market position and increased customer loyalty, but they also opened up UX design opportunities for them to transform business processes and increase the bank's customer centricity. In 2021, Banka Kombëtare Tregtare was recognized as “The Best Bank in Albania for 2021” at the Global Finance awards ceremony for the Best Banks in central and eastern Europe, and in 2023 received this award again.

The BKT success story proves that it is important for large banks to innovate and evolve in order to remain relevant in today's competitive financial environment.

The transformation of incumbent banks into digital innovators is like the process of turning a rough diamond into a polished gemstone. Just as a rough diamond is a diamond in the rough, an incumbent bank has the potential to be a valuable player in the financial industry, but it may need some refinement. Through digital transformation, these banks can smooth out their rough edges, refine their processes, and enhance their customer experiences, much like the process of cutting and polishing a diamond.

Just as a polished diamond shines brightly, a transformed incumbent bank can stand out in the industry and capture the attention of customers and investors alike. And, like a diamond's lasting value, a digitally transformed incumbent bank can provide long-term value to its customers and stakeholders.

Get UXDA Research-Based White Paper "How to Win the Hearts of Digital Customers":

• E-mail us at [email protected]
• Chat with us in Whatsapp
• Send a direct message to UXDA's CEO Alex Kreger on Linkedin

Listen to our podcast:

More from our blog

AI in Banking: From UX Upgrade to Transforming Mankind

If we look a bit further, we can see the disruptive perspective of AI that will go well beyond banking, completely transforming digital customer experience, and even providing super-powers to mankind.

Runrate UX Case Study: Financial Management Platform for Achieving Happiness

This is a UX Case Study of the Runrate app's UX design, that seamlessly combines planning, budgeting and investing with a philosophy of manifesting the future.

How To Improve Your Banking Customer Experience

It's no secret - user experience is what differentiates demanded digital financial products from failures. The question is - how to keep up, creating a customer experience that WOWs?

10 Financial App Design Transformations for a Next-Gen Digital Experience

Today's consumers seek seamless, intuitive and emotionally resonant interactions with their financial institutions. We offer ten examples of how financial products can be transformed to exceed expectations and create an emotional connection through a stunning UX design by UXDA.

Specifics and Role of Fintech Designers and UX Consultants in Banking

Discover how to choose the right fintech designers for your financial company's digital product and secure a digital advantage in the highly competitive financial industry in 2023.

ITTI Case Study: Next-Gen Core Banking Digital Transformation in the Cloud

With ITTI Digital’s permission, we are sharing an exclusive step-by-step case study on designing a next-generation banking back office that will definitely become a game changer in the industry.

Goalry UX Case Study: Immersive Mall Experience Beyond Finance

Goalry approached UXDA with a very challenging idea - to design a digital financial shopping mall full of different products that help people reach their financial goals in an engaging and intuitive way. We created an innovative 3D dashboard for finance, aimed at further development in the Metaverse

UX Case Study: How to Design a Mobile Banking Super App

How could finance companies upgrade their banking ecosystem to a mobile banking Super App using 10 Fintech trends?

Digital Banking User Experience: Make Your Product Outcompeting

This digital banking CX checklist will help to bring more customer-centricity into your financial service, so that you would be able to delight your customers with a remarkable digital product.

ABOUT THE AUTHOR

Alex, founder/ ceo/ ux strategist.

Alex has dedicated half of his life to studying human psychology, as well as business success, developing 100+ digital projects and 30+ startups. He spent 10 years researching UX and finance to create UXDA's methodology. Alex is a passionate visionary who's capable of solving any challenge to improve the financial industry.

Tamara, Senior UX Architect & Consultant

Tamara is dedicated to always reaching the best possible result while paying close attention to detail. Her 12-year long experience in banking working with card issuance, acquiring and eCommerce allows her to have a deep understanding of the financial service specifics and provide the best experience for users.

Andra, UX Architect & Consultant

Andra’s experience in the digital media allows to turn complex information into easily understandable for users. This skill combined with passion for the behavior science and communications gives her the ability to ask the right questions, search for the best UX solution and create a captivating product story.

We use cookies

By using our website, you agree to our Cookie Policy .

11 Inspiring UX Case Studies That Every Designer Should Study

A UX case study is a sort of detailed overview of a designer's work. They are often part of a UX designer's portfolio and showcase the designer's skill in managing tasks and problems. From a recruiter's perspective, such a UX portfolio shows the skill, insights, knowledge, and talent of the designer.

Therefore, UX case studies play an important role in the recruitment and demand for designers.

What Makes a Powerful Case Study

Building a UX case study includes showing the design process through compelling stories. They will use plain language to demonstrate how they handled key design issues, offering a comprehensive view of their process. Well done case studies often include:

• A  problem statement and solutions with real applications.
• Relevant numbers, data, or testimonials to demonstrate the work and efforts.
• A story that directly connects the problem to the solution.

Any competent UX professional will know that creating a stunning UX case study is about the little details.

11 Best UX Case Studies for Designers

The best way to understand what a good case study looks like is to go over other examples. Each of these UX case study examples shows a designer's insights, basic skills, and other designers' lessons learned through their experience.

1. Promo.com web editor

For this video-creation platform , UX designer Sascha was brought on to revamp v2.0, adding new features that could work alongside the existing UX design. The point was to work on interface details that would help create a user friendly platform, and that users could find simple enough to use.

User personas mapped by the UX designer revealed the most common confusion to be the process of inserting particular features into the video, such as subtitles. The designer's goal, therefore, was to create a platform with improved editor controls.

The designer then used a common text-editor layout to include top and side navigation bars that made it easy to access and implement text editing.

Key Learnings from Promo.com

This case study focuses on addressing a particular problem that customers were currently facing. Its main theme is to show a problem, and how the product designer addressed this problem. Its strength points include:

• clearly highlighting the problem (i.e. inaccessible and limited video-text editor options)
• conduction research to understand the nature of the problem and the kind of solutions customers want
• implementing research insights into the redesign to create a platform that actively served customer needs

2. Productivity tracker app

The main concept behind this UX case study is to address a pre-existing problem through the design of the app. Immediately from the start, the study highlights a common pain point among users: that of a lack of productivity due to device usage.

This UX case study example addressed some of the main problems within existing productivity apps included:a poor UI and UX that made navigation difficult

• a poorly-built information architecture
• limited functions on the mobile application

Key Learnings from the Productivity app case study

The case study highlights the simple design process that was then used to build the app. Wireframes were created, a moldboard developed, and finally, individual pages of the app were designed in line with the initial goals.

3. Postmates Unlimited

This case study clearly identifies the improvements made to the Postmates app in a simple overview before jumping into greater detail. The redesign goal, which it achieved, was to improve the experience and other interface details of the app.

The problems identified included:

• usability that led to high support ticket volume.
• technical app infrastructure issues that prevented scalability.
• lack of efficient product management, such as batching orders.

A UX research course can help understand the kind of research needed for a case study. The app redesign involved bringing couriers in and running usability testing on improvements. The final model, therefore, had input from real users on what worked and what caused issues.

Key Learnings from Postmates

The Postmates redesign works as a great UX case study for the simple way it approaches problem-solving. Following an overview of the work, it addresses the problems faced by users of the app. It then establishes research processes and highlights how changes were made to reduce these issues.

4. TV Guide

Addressing the fragmentation of content across channels, this case study sought to redesign how people consume media. The key problems identified included:

• the overabundance of content across various TV and streaming platforms
• the difficulty in discovering and managing content across all platforms

To deliver on the key goals of content personalization, smart recommendations, and offering cross-platform content search, the design process included conducting interviews, surveys, and checking customer reviews.

The design of TV Guide enables users to get custom recommendations sourced from friends' and family's watchlists.

Key Learnings from TV Guide

Like previous UX design case studies, this one tackled the issue head-on. Describing the research process, it goes into detail regarding the approach used by the UX designers to create the app. It takes readers on a journey, from identifying pain points, to testing solutions, and implementing the final version.

5. The FlexBox Inspector

Designer Victoria discusses how she developed the investigator tool for the Mozilla Firefox browser. Surveys into understanding the problems with the existing CSS Flexbox tool revealed a need for a user-friendly design. Interviews with a senior designer and other designers helped developers understand the features design-focused tools ought to have. A feature analysis revealed what most users look for in such tools.

The final result of the development process was a design that incorporated several new features, including:

• a new layout
• color-coded design
• multiple entry points to make workflow management efficient

Key Learnings from the Flexbox

This UX design case study starts with a clear goal, then addresses multiple user needs. It clearly defines the design process behind each feature developed by the time, and the reasoning for including that feature. To give a complete picture, it also discusses why certain features or processes were excluded.

6. The Current State of Checkouts

This Baymard UX design case study looks into the checkout process in over 70 e-commerce websites. Through competitive analysis, it isolates problem points in the UX design, which, if addressed, could improve the customer's checkout process.

The study found at least 31 common issues that were easily preventable. The study was designed and conducted on a large scale, over 12 years, to incorporate changing design patterns into the review.

Recommendations based on findings include:

• prominent guest checkout option
• simple password requirements
• specific delivery period
• price comparison tool for shipping vs store pickup

Key Learnings from Checkout Case Study

Each identified issue is backed up by data and research to highlight its importance. Further research backs up each recommendation made within the case study, with usability testing to support the idea. As far as UX case studies go, this one provides practical insight into an existing, widely used e-commerce feature, and offers practical solutions.

7. New York Times App

Using a creative illustration website, the designers proposed a landing page feature "Timely" that could counter the problems faced by the NYT app . Its major issues included too much irrelevant content, low usage, and undesirable coverage of content.

The goal behind Timely was to improve user incentives, build long-term loyalty, and encourage reading. Design mapping for the app covered:

• identifying the problem
• understanding audience needs
• creating wireframes
• designing and prototyping

The end result was an app that could help readers get notifications regarding news of interest at convenient moments (at breakfast, before bed). This encouraged interaction and improved readability with short-form articles.

Key Learnings from NYT App

The UX case study proposes a problem solution that works with an existing information architecture, instead adding custom graphics to the mobile app. It leads from a simple problem statement to discuss the project that could address these issues without changing was customers already loved.

UX case studies focused on redesign include the FitBit redesign, which started off by understanding personas and what users expect from a fitness tracker. Developing use cases and personas, Guerilla usability testing was employed to assess pain points.

These pain points were then ranked based on their importance to users and to app performance. They were addressed through:

• Highlighting essential parts and features of the app
• Changing easily missed icons to more recognizable icons
• relabelling tracking options to guide users better to its usage

Key Learnings from Fitbit

While the case study maps user experiences and offers solutions, it does not begin with an intensive research-based approach. The prototype is successful in testing, but problem factors are not identified with research-based statistics, meaning key factors could have been ignored.

9. Rating System UX

The designer behind the rating system UX redesign sought to solve issues with the 5-star rating system. Highlighted issues included:

• the lack of subjective accuracy of a 5-point rating system
• the issue of calculating the average of a zero-star rating
• average ratings are misleading

Better alternatives include:

• 5-star emoticon rating that relates the user experience
• Like/dislike buttons that make approval/disapproval simple

The final design incorporated both these styles to make full use of the rating system.

Key Learnings from Rating System UX

The UX case study stemmed from insight into the limitations of the existing rating system. The new design addressed old issues and incorporated better efficiencies.

The Intuit redesign was focused on making content readable, more engaging, and accessible. Looking into product personalization, the content was found to be lacking aesthetic value, as well as being hard to find. The goal was to create content that was easy to find, clear, and consistent.

The implemented solutions included:

• increased readability with increased body text and header spacing
• table of contents on the sidebar for easier navigation
• visible and prominent search bar
• illustrations and designs for pretty visuals

Key Learnings from Intuit

The Intuit case study approaches the problem from a practical point of view. It begins with isolating problems with the interface, in particular with the content. This is an example of a case study that breaks down problems into broader categories, and solves each problem with a practical solution.

This UX case study about a social platform tackles a commonly-faced problem from existing platforms. It addresses the issue of recognizing non-monetary user engagement, to help creators identify their user base.

The case study addresses the problem statement and establishes the design process (building wireframes and prototypes) as well as conducting user testing. The final result is to develop "Discover" pages, engaging layouts, and animated interactions to increase usability.

Key Learnings from Jambb

The study goes into detail regarding problem identification, then moves on to propose solutions that take into account the perspective of all stakeholders involved. It then explains why each design decision was made, and proves its efficacy through testing and prototyping.

Key Takeaways

Developing good UX case studies examples is as much about the details you include as the ones you leave out. Going over UX courses can give you a better understanding of what your case study should look like. A good case study should provide an overview of the problem, include numbers and statistics, and offer practical solutions that directly address the problem. The above-discussed UX case studies provide a good example of the dos and don'ts of a well-structured UX design case study that should be part of every UX portfolio .

Additional Resources

Check out these resources to learn more about UX case studies:

8 UX Case Studies to Read

UX Design Case Study

Frequently Asked Questions

Upskill your design team effectively.

Equip your design team with the best-in-class design training that sticks.

Do you know your design team skill level? Send them this quick test & see where their skills stand among 300K+ designers worldwide.

Level up your design career

Get step-by-step guide how to build or advance your UX design career.

Do you know your design skills level? Take a quick test & see where you stand among 300K+ designers worldwide.

Continue reading

7 top ux careers & specialisations: skills, paths & opportunities, 15 figma plugins to boost your design workflow, 11 essential illustration resources for your next design project, cookie settings 🍪.

• Interactive UX learning for all levels
• 20+ UX courses and career paths
• Personalized learning & practice

Design-first companies are training their design teams. Are you?

• Measure & identify team skill gaps
• Tailor learning for your team’s needs
• Unlock extensive learning library
• Visualize team growth over time
• Retain your designers

• Reviews / Why join our community?
• For companies
• Frequently asked questions

UX Case Studies

What are ux case studies.

UX case studies are examples of design work which designers include in their portfolio. To give recruiters vital insights, designers tell compelling stories in text and images to show how they handled problems. Such narratives showcase designers’ skills and ways of thinking and maximize their appeal as potential hires.

“ Every great design begins with an even better story.” — Lorinda Mamo, Designer and creative director

• Transcript loading…

Discover why it’s important to tell a story in your case studies.

How to Approach UX Case Studies

Recruiters want candidates who can communicate through designs and explain themselves clearly and appealingly. While skimming UX portfolios , they’ll typically decide within 5 minutes if you’re a fit. So, you should boost your portfolio with 2–3 case studies of your work process containing your best copywriting and captivating visual aids. You persuade recruiters by showing your skillset, thought processes, choices and actions in context through engaging, image-supported stories .

Before selecting a project for a case study, you should get your employer’s/client’s permission – whether you’ve signed a non-disclosure agreement (NDA) or not.

Then, consider Greek philosopher Aristotle’s storytelling elements and work with these in mind when you start building your case studies:

Plot – The career-related aspect of yourself you want to highlight. This should be consistent across your case studies for the exact role. So, if you want to land a job as a UX researcher, focus on the skills relevant to that in your case studies.

Character – Your expertise in applying industry standards and working in teams.

Theme – Goals, motivations and obstacles in your project.

Diction – A friendly, professional tone in jargon-free plain English.

Melody – Your passion—for instance, as a designer, where you prove it’s a life interest as opposed to something you just clock on and off at for a job.

Décor – A balance of engaging text and images.

Spectacle – The plot twist/wow factor—e.g., a surprise discovery. Obviously, you can only include this if you had a surprise discovery in your case study.

All good stories have a beginning, a middle and an end.

© Interaction Design Foundation. CC BY-NC-SA 3.0.

How to Build UX Case Studies

You want an active story with a beginning, middle and end – never a flat report . So, you’d write, e.g., “We found…”, not “It was found…”. You should anonymize information to protect your employer’s/client’s confidential data (by changing figures to percentages, removing unnecessary details, etc.).

You can use German novelist-playwright Gustav Freytag’s 5-part pyramid :

Exposition – the introduction (4–5 sentences) . Describe your:

Problem statement – Include your motivations and thoughts/feelings about the problem.

Your solution – Outline your approach. Hint at the outcome by describing your deliverables/final output.

Your role – Explain how your professional identity matched the project.

Stages 2–4 form the middle (more than 5 sentences) . Summarize the process and highlight your decisions:

Rising action – Outline some obstacles/constraints (e.g., budget) to build conflict and explain your design process (e.g., design thinking ). Describe how you used, e.g., qualitative research to progress to 1 or 2 key moments of climax.

Climax – Highlight this, your story’s apex, with an intriguing factor (e.g., unexpected challenges). Choose only the most important bits to tighten narrative and build intrigue.

Falling action – Show how you combined your user insights, ideas and decisions to guide your project’s final iterations. Explain how, e.g., usability testing helped you/your team shape the final product.

Stage 5 is the conclusion:

Resolution – (4–5 sentences) . Showcase your end results as how your work achieved its business-oriented goal and what you learned. Refer to the motivations and problems you described earlier to bring your story to an impressive close.

Overall, you should:

Tell a design story that progresses meaningfully and smoothly .

Tighten/rearrange your account into a linear, straightforward narrative .

Reinforce each “what” you introduce with a “how” and “why” .

Support text with the most appropriate visuals (e.g., screenshots of the final product, wireframing , user personas , flowcharts , customer journey maps , Post-it notes from brainstorming ). Use software (e.g., Canva, Illustrator) to customize good-looking visuals that help tell your story .

Balance “I” with “we” to acknowledge team-members’ contributions and shared victories/setbacks.

Make your case study scannable – E.g., Use headings as signposts.

Remove anything that doesn’t help explain your thought process or advance the story .

In the video, Michal Malewicz, Creative Director and CEO of Hype4, has some tips for writing great case studies.

Typical dramatic structure consists of an exposition and resolution with rising action, climax and falling action in between.

Remember, hirers want to quickly spot the value of what you did— e.g., research findings—and feel engaged every step of the way . They’ll evaluate how you might fit their culture. Use the right tone to balance your passion and logic in portraying yourself as a trustworthy team player. Sometimes, you may have to explain why your project didn’t work out ideally. The interaction design process is iterative, so include any follow-up actions you took/would take. Your UX case studies should project the thoughts, feelings and actions that define how you can shape future designs and create value for business.

Learn More about UX Case Studies

Take our UX Portfolio course to see how to craft powerful UX case studies.

UX designer and entrepreneur Sarah Doody offers eye-opening advice about UX case studies .

Learn what can go wrong in UX case studies .

See fine examples of UX case studies .

Questions related to UX Case Studies

A UX case study showcases a designer's process in solving a specific design problem. It includes a problem statement, the designer's role, and the solution approach. The case study details the challenges and methods used to overcome them. It highlights critical decisions and their impact on the project.

The narrative often contains visuals like wireframes or user flowcharts. These elements demonstrate the designer's skills and thought process. The goal is to show potential employers or clients the value the designer can bring to a team or project. This storytelling approach helps the designer stand out in the industry.

To further illustrate this, consider watching this insightful video on the role of UX design in AI projects. It emphasizes the importance of credibility and user trust in technology. 

Consider these three detailed UX/UI case studies:

Travel UX & UI Case Study : This case study examines a travel-related project. It emphasizes user experience and interface design. It also provides insights into the practical application of UX/UI design in the travel industry.

HAVEN — UX/UI Case Study : This explores the design of a fictional safety and emergency assistance app, HAVEN. The study highlights user empowerment, interaction, and interface design. It also talks about the importance of accessibility and inclusivity. 

UX Case Study — Whiskers : This case study discusses a fictional pet care mobile app, Whiskers. It focuses on the unique needs of pet care users. It shows the user journey, visual design, and integration of community and social features.

Writing a UX case study involves several key steps:

Identify a project you have worked on. Describe the problem you addressed.

Detail your role in the project and the specific actions you took.

Explain your design process, including research , ideation , and user testing.

Highlight key challenges and how you overcame them.

Showcase the final design through visuals like screenshots or prototypes . This video discusses why you should include visuals in your UX case study/portfolio.

Reflect on the project's impact and any lessons learned.

Conclude with the outcomes. Showcase the value you provided.

A well-written case study tells a compelling story of your design journey. It shows your skills and thought process.

A case study in UI/UX is a detailed account of a design project. It describes a designer's process to solve a user interface or user experience problem. The case study includes

The project's background and the problem it addresses.

The designer's role and the steps they took.

Methods used for research and testing.

Challenges faced and how the designer overcame them.

The final design solutions with visual examples.

Results and impact of the design on users or the business.

This case study showcases a designer’s skills, decision-making process, and ability to solve real-world problems.

A UX writing case study focuses on the role of language in user experience design. It includes:

The project's background and the specific language-related challenges.

The UX writer's role and the strategies they employed.

How did they create the text for interfaces, like buttons or error messages?

Research and testing methods used to refine the language.

Challenges encountered and solutions developed.

The final text and its impact on user experience and engagement.

Outcomes that show how the right words improved the product's usability.

You can find professionals with diverse backgrounds in this field and their unique approaches to UX writing. Torrey Podmakersky discusses varied paths into UX writing careers through his video. 

Planning a case study for UX involves several steps: 

First, select a meaningful project that showcases your skills and problem-solving abilities. Gather all relevant information, including project goals, user research data, and design processes used. 

Next, outline the structure of your case study. This should include the problem you addressed, your role, the design process, and the outcomes. 

Ensure to detail the challenges faced and how you overcame them. 

To strengthen your narrative, incorporate visuals like wireframes, prototypes, and user feedback . 

Finally, reflect on the project's impact and what you learned. 

This careful planning helps you create a comprehensive and engaging case study.

Presenting a UX research case study involves clear organization and storytelling. 

Here are eight guidelines:

Introduction: Start with a brief overview of the project, including its objectives and the key research question.

Background: Provide context about the company, product, or service. Explain why you did the research. 

Methodology: Detail the research methods, like surveys, interviews, or usability testing. 

Findings: Present the key findings from your research. Use visuals like charts or user quotes to better present the data. 

Challenges and Solutions: Discuss any obstacles encountered during the research and how you addressed them.

Implications: Explain how your findings impacted the design or product strategy.

Conclusion: Summarize the main points and reflect on what you learned from the project.

Appendix (if necessary): Include any additional data or materials that support your case study.

UX case studies for beginners demonstrate the fundamentals of user experience design. They include:

A defined problem statement to clarify the user experience issue.

Descriptions of research methods used for understanding user needs and behaviors.

Steps of the design process, showing solution development. The 5 Stages in the Design Thinking Process illustrate these steps in detail. 

Visual elements, such as sketches, wireframes, or prototypes, illustrate the design stages.

The final design solution emphasizes its impact on user experience.

Reflections on the project's outcomes and lessons learned.

These case studies guide beginners through the essential steps and considerations in UX design projects. Consider watching this video on How to Write Great Case Studies for Your UX Design Portfolio to improve your case studies.

To learn more about UX case studies, two excellent resources are available:

Article on Structuring a UX Case Study : This insightful article explains how to craft a compelling case study. It emphasizes storytelling and the strategic thinking behind UX design, guided by expert opinions and industry insights.

User Experience: The Beginner's Guide Course by the Interaction Design Foundation: This comprehensive course offers a broad introduction to UX design. It covers UX principles, tools, and methods. The course provides practical exercises and industry-recognized certification. This course is valuable for aspiring designers and professionals transitioning to UX.

These resources provide both theoretical knowledge and practical application in UX design.

Literature on UX Case Studies

Here’s the entire UX literature on UX Case Studies by the Interaction Design Foundation, collated in one place:

Learn more about UX Case Studies

Take a deep dive into UX Case Studies with our course How to Create a UX Portfolio .

Did you know the average UX recruiter spends less than 5 minutes skimming through your UX portfolio? If you want to join the growing and well-paid field of UX design, not only do you need a UX portfolio— you’ll need a great UX portfolio that showcases relevant skills and knowledge . Your UX portfolio will help you get your first job interviews and freelance clients, and it will also force you to stay relevant in your UX career. In other words, no matter what point you’re at in your UX career, you’re going to need a UX portfolio that’s in tip-top condition.

So, how do you build an enticing UX portfolio, especially if you’ve got no prior experience in UX design? Well, that’s exactly what you’ll learn in this course! You’ll cover everything so you can start from zero and end up with an incredible UX portfolio . For example, you’ll walk through the various UX job roles, since you can’t begin to create your portfolio without first understanding which job role you want to apply for! You’ll also learn how to create your first case studies for your portfolio even if you have no prior UX design work experience. You’ll even learn how to navigate non-disclosure agreements and create visuals for your UX case studies.

By the end of this practical, how to oriented course, you’ll have the skills needed to create your personal online UX portfolio site and PDF UX portfolio. You’ll receive tips and insights from recruiters and global UX design leads from SAP, Oracle and Google to give you an edge over your fellow candidates. You’ll learn how to craft your UX case studies so they’re compelling and relevant, and you’ll also learn how to engage recruiters through the use of Freytag’s dramatic structure and 8 killer tips to write effectively. What’s more, you’ll get to download and keep more than 10 useful templates and samples that will guide you closely as you craft your UX portfolio. To sum it up, if you want to create a UX portfolio and land your first job in the industry, this is the course for you!

All open-source articles on UX Case Studies

How to write the conclusion of your case study.

• 5 years ago

How to create the perfect structure for a UX case study

What Should a UX Design Portfolio Contain?

How to write the beginning of your UX case study

What is a UX Portfolio?

How to write the middle or “process” part of your case study

Open Access—Link to us!

We believe in Open Access and the  democratization of knowledge . Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change , cite this page , link to us, or join us to help us democratize design knowledge !

Privacy Settings

Our digital services use necessary tracking technologies, including third-party cookies, for security, functionality, and to uphold user rights. Optional cookies offer enhanced features, and analytics.

Experience the full potential of our site that remembers your preferences and supports secure sign-in.

Governs the storage of data necessary for maintaining website security, user authentication, and fraud prevention mechanisms.

Enhanced Functionality

Saves your settings and preferences, like your location, for a more personalized experience.

Referral Program

We use cookies to enable our referral program, giving you and your friends discounts.

Error Reporting

We share user ID with Bugsnag and NewRelic to help us track errors and fix issues.

Optimize your experience by allowing us to monitor site usage. You’ll enjoy a smoother, more personalized journey without compromising your privacy.

Analytics Storage

Collects anonymous data on how you navigate and interact, helping us make informed improvements.

Differentiates real visitors from automated bots, ensuring accurate usage data and improving your website experience.

Lets us tailor your digital ads to match your interests, making them more relevant and useful to you.

Advertising Storage

Stores information for better-targeted advertising, enhancing your online ad experience.

Personalization Storage

Permits storing data to personalize content and ads across Google services based on user behavior, enhancing overall user experience.

Advertising Personalization

Allows for content and ad personalization across Google services based on user behavior. This consent enhances user experiences.

Enables personalizing ads based on user data and interactions, allowing for more relevant advertising experiences across Google services.

Receive more relevant advertisements by sharing your interests and behavior with our trusted advertising partners.

Enables better ad targeting and measurement on Meta platforms, making ads you see more relevant.

Allows for improved ad effectiveness and measurement through Meta’s Conversions API, ensuring privacy-compliant data sharing.

LinkedIn Insights

Tracks conversions, retargeting, and web analytics for LinkedIn ad campaigns, enhancing ad relevance and performance.

LinkedIn CAPI

Enhances LinkedIn advertising through server-side event tracking, offering more accurate measurement and personalization.

Google Ads Tag

Tracks ad performance and user engagement, helping deliver ads that are most useful to you.

Share the knowledge!

Share this content on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

New to UX Design? We’re Giving You a Free ebook!

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

Get a free custom homepage design for your new website.

Design, UI, UX , Inspiration

15 excellent ux case studies every creative should read.

• By Sandra Boicheva
• October 21st, 2021

In a previous article, we talked about UX portfolios and how they carefully craft a story of how designers work. Interestingly enough, recruiters decide if a UX freelance designer or an agency is a good match within 5 minutes into the portfolio . In order to persuade these recruiters, the portfolio needs to present an appealing story that showcases the skill, the thought process, and the choices taken for key parts of the designs. With this in mind, today we’ll talk about UX case studies and give 15 excellent examples of case studies with compelling stories.

The Storytelling Approach in UX Case Studies

An essential part of the portfolio of a UX designer is the case studies that pack a showcase of the designer’s skills, way of thinking, insights in the form of compelling stories. These case studies are often the selling point as recruiters look for freelancers and agencies who can communicate their ideas through design and explain themselves in a clear and appealing way. So how does this work?

Photography by Alvaro Reyes

Just like with every other story, UX case studies also start with an introduction, have a middle, and end with a conclusion .

• Introduction: This UX case study example starts with a design brief and presents the main challenges and requirements. In short, the UX designer presents the problem, their solution, and their role.
• Middle: The actual story of the case study example explains the design process and the techniques used. This usually starts with obstacles, design thinking, research, and unexpected challenges. All these elements lead to the best part of the story: the action part. It is where the story unveils the designer’s insights, ideas, choices, testing, and decisions.
• Conclusion: The final reveal shows the results and gives space for reflection where the designer explains what they’ve learned, and what they’ve achieved.

Now as we gave you the introduction, let’s get to the main storyline and enjoy 15 UX case studies that tell a compelling story.

1. Car Dealer Website for Mercedes-Benz Ukraine by Fulcrum

This case study is a pure pleasure to read. It’s well-structured, easy to read, and still features all the relevant information one needs to understand the project. As the previous client’s website was based on the official Mercedes Benz template, Fulcrum had to develop an appealing and functional website that would require less time to maintain, be more user-friendly, and increase user trust.

• Intro: Starts with a summary of the task.
• Problem: Lists the reasons why the website needs a redesign.
• Project Goals: Lists the 4 main goals with quick summaries.
• Project: Showcases different elements of the website with desktop and mobile comparison.
• Functionality: Explains how the website functionality helps clients to find, and order spare parts within minutes.
• Admin Panel: Lists how the new admin panel helps the client customize without external help.
• Elements: Grid, fonts, colors.
• Tech Stack: Shows the tools used for the backend, mobile, admin panel, and cloud.
• Client review: The case study ends with a 5-star review by the marketing director of Mercedes Benz Ukraine, Olga Belova.

This case study is an example of a detailed but easy to scan and read story from top to bottom, featuring all relevant information and ending on the highest note: the client’s review.

Advertisement

2. Galaxy Z Flips 5G Website by DFY

This is a big project that covers every aspect of the website, including the UX strategy. The creative studio aimed to fully illustrate and demonstrate the significant upgrades over previous models and to enable two-way communication with the customers through an interactive experience.

• Intro: Summary of the project and roles.
• Interactive Experience: The main project goal.
• Demonstration: Explains the decision to feature 360-degree views and hands-on videos instead of technical terms.
• Screens: Includes high-quality screenshots of significant pages and features.
• Ecosystem: Highlight a page with easy navigation across different products as a marketing decision that makes cross-selling seamless.
• Essentials: Showcases a slider of all products with key features that provide ample information.
• Showroom: Interactive experience that helps the user “play around” with the product.
• Credits: As a conclusion, DFY features the stakeholders involved.

A strong presentation of a very ambitious project. It keeps the case study visual while still providing enough insight into the thought process and the most important decisions.

3. Jambb Social Platform by Finna Wang

Here we have a beautiful case study for a platform that aims to help creators grow their communities by recognizing and rewarding their base of supporters. It tackles a curious problem that 99% of fans who contribute in non-monetary ways don’t get the same content, access, and recognition they deserve. This means the creators need a way to identify their fans across all social platforms to grow their business and give recognition. To get a clear picture of what the design has to accomplish, Finna Wang conducted stakeholder interviews with the majority of the client’s team.

• Intro: Listing roles, dates, team, and used tools.
• Project Overview: The main concept and the reasons behind it.
• Exploration: What problem will the platform solve, preliminary research, and conclusions from the research.  The section includes the project scope and problem statement.
• Design Process: A thorough explanation of the discoveries and the exact steps.
• User Flows:  3 user flows based on common tasks that the target user/fan would do on the site.
• Design Studio: Visualization process with wireframes, sitemap, prototypes.
• Design Iterations: The designer highlights the iterations they were primary behind.
• Style Guide: Typography, colors, visual elements breakdown.
• Usability Testing: Beta site vs Figma prototype; usertesting.com, revised problem statement.
• Prototype: Features an accessible high fidelity prototype in Figma you can view.
• Takeaways: Conclusions.

An extremely detailed professionally made and well-structured UX case study. It goes a step further by listing specific conclusions from the conducted research and featuring an accessible Figma prototype.

4. Memento Media by Masha Keyhani

This case study is dedicated to a very interesting project for saving family stories. It aims to help users capture and record memories from their past. To do so, the design team performed user research and competitive analysis. The entire project took a 6-week sprint.

• Overview: Introducing the client and the purpose of the app.
• My Role: Explaining the roles of the designer and their team.
• Design Process: A brief introduction of the design process and the design toolkit
• Home: The purpose of the Homepage and the thought process behind it.
• Question Selection: The decision behind this screen.
• Recording Process: Building the recording feature and the decisions behind it.
• User research: a thorough guide with the main focuses, strategies, and competitor analysts, including interviews.
• Research Objectives: The designer gives the intent of their research, the demographics, synthesis, and usability testing insights.
• Propositions: Challenges and solutions
• User Flow: Altering the user flow based on testing and feedback.
• Wireframes: Sketches, Lo-Fi wireframing.
• Design System: Typography, colors, iconography, design elements.
• The Prototype: It shows a preview of the final screens.

This UX study case is very valuable for the insights it presents. The design features a detailed explanation of the thinking process, the research phase, analysts, and testing which could help other creatives take some good advice from it for their future research.

5. Perfect Recipes App by Tubik

Here we have a UX case study for designing a simple mobile app for cooking, recipes, and food shopping. It aims to step away from traditional recipe apps by creating something more universal for users who love cooking with extended functionality. The best idea behind it is finding recipes based on what supplies the user currently has at home.

• Intro: Introducing the concept and the team behind it.
•  Project: What they wanted to make and what features would make the app different than the competitors.
• UI design: The decisions behind the design.
• Personalization: Explaining how the app gives the user room for personalization and customizing the features according to their personal preferences.
• Recipe Cards and Engaging Photos: The decisions behind the visuals.
• Cook Now feature: Explaining the feature.
• Shopping List: Explaining the feature.
• Pantry feature:  The idea to sync up the app with AmazonGo services. This case study section features a video.
• Bottom Line: What the team learned.

This UX case study is a good example of how to present your concept if you have your own idea for an app. You could also check the interactive preview of the app here .

6. SAM App by Mike Wilson

The client is the Seattle Art Museum while the challenge is to provide engaging multimedia content for users as well as self-guided tours. Mile Wilson has to create an experience that will encourage repeat visits and increase events and exhibition attendance.

• Intro: Listing time for the project, team members, and roles.
• The Client: A brief introduction of Seattle Art Museum
• The Challenge: What the app needs to accomplish.
• Research and Planning: Explaining the process for gathering insights, distributing surveys, interviews, and identifying specific ways to streamline the museum experience.
• Sloane: Creating the primary persona. This includes age, bio, goals, skills, and frustrations.
• Designing the Solution: Here the case study features the results of their research, information architecture, user flows, early sketching, paper prototypes, and wireframes.
• Conclusion: Explaining the outcome, what the team would have done differently, what’s next, and the key takeaways.

What we can take as a valuable insight aside from the detailed research analysis, is the structure of the conclusion. Usually, most case studies give the outcome and preview screens. However, here we have a showcase of what the designer has learned from the project, what they would do differently, and how they can improve from the experience.

7. Elmenus Case Study

This is a case study by UX designers Marwa Kamaleldin, Mario Maged, Nehal Nehad, and Abanoub Yacoub for redesigning a platform with over 6K restaurants. It aims to help users on the territory of Egypt to find delivery and dine-out restaurants.

• Overview: What is the platform, why the platform is getting redesigned, what is the target audience. This section also includes the 6 steps of the team’s design process.
• User Journey Map: A scheme of user scenarios and expectations with all phases and actions.
• Heuristic Evaluation: Principles, issues, recommendations, and severity of the issues of the old design.
• First Usability Testing: Goals, audience, and tasks with new user scenarios and actions based on the heuristic evaluation. It features a smaller section that lists the most severe issues from usability for the old design.
• Business Strategy: A comprehensive scheme that links problems, objectives, customer segment, measurements of success, and KPIs.
• Solutions: Ideas to solve all 4 issues.
• Wireframes: 4 directions of wireframes.
• Styleguide: Colors, fonts, typeface, components, iconography, spacing method.
• Design: Screens of the different screens and interactions.
• Second Usability Testing: Updated personas, scenarios, and goals. The section also features before-and-after screenshots.
• Outcome: Did the team solve the problem or not.

A highly visual and perfectly structured plan and process for redesigning a website. The case study shows how the team discovers the issues with the old design and what decisions they made to fix these issues.

8. LinkedIn Recruiter Tool by Evelynma

A fresh weekend project exploring the recruiting space of LinkedIn to find a way to help make it easier for recruiters to connect with ideal candidates.

• Background Info: What made the designer do the project.
• Problem and Solution: A good analysis of the problem followed by the designer’s solution.
• Process: This section includes an analysis of interviewing 7 passive candidates, 1 active candidate, 3 recruiters, and 1 hiring manager. The designer also includes their journey map of the recruiting experience, a sketch of creating personas, and the final 3 personas.
• Storyboard and User Flow Diagrams: The winning scenario for Laura’s persona and user flow diagram.
• Sketches and Paper Prototypes: Sticky notes for paper prototypes for the mobile experience.
• Visual Design: Web and mobile final design following the original LinkedIn pattern.
• Outcome: Explaining the opportunity.

This is an excellent UX case study when it comes to personal UX design projects. creating a solution to a client’s problem aside, personal project concepts is definitely something future recruiters would love to see as it showcases the creativity of the designers even further.

9. Turbofan Engine Diagnostics by Havana Nguyen

The UX designer and their team had to redesign some legacy diagnostics software to modernize the software, facilitate data transfers from new hardware, and improve usability. They built the desktop and mobile app for iOS and Android.

• Problem: The case study explain the main problem and what the team had to do to solve it.
• My Role: As a lead UX designer on a complicated 18-month project, Havana Nguyen had a lot of work to do, summarized in a list of 5 main tasks.
• Unique Challenges: This section includes 4 main challenges that made the project so complex. ( Btw, there’s a photo of sketched wireframes literally written on the wall.)
• My Process: The section includes a description of the UX design process highlighted into 5 comprehensive points.
• Final Thoughts: What the designer has learned for 18 months.

The most impressive thing about this case study is that it manages to summarize and explain well an extremely complex project. There are no prototypes and app screens since it’s an exclusive app for the clients to use.

10. Databox by FireArt

A very interesting project for Firearts’s team to solve the real AL & ML challenges across a variety of different industries. The Databox project is about building scalable data pipeline infrastructure & deploy machine learning and artificial intelligence models.

• Overview: The introduction of the case study narrows down the project goal, the great challenge ahead, and the solution.
• How We Start: The necessary phases of the design process to get an understanding of a product.
• User Flow: The entire scheme from the entry point through a set of steps towards the final action of the product.
• Wireframes: A small selection of wireframe previews after testing different scenarios.
• Styleguide: Typography, colors, components.
• Visual Design: Screenshots in light and dark mode.

A short visual case study that summarizes the huge amount of work into a few sections.

11. Travel and Training by Nikitin Team

Here’s another short and sweet case study for an app with a complete and up-to-date directory of fitness organizations in detailed maps of world cities.

• Overview: Explaining the project.
• Map Screen : Outlining the search feature by categories.
• Profiles: Profile customization section.
• Fitness Clubs: Explaining the feature.
• Icons: A preview of the icons for the app.
• App in Action: A video of the user experience.

This case study has fewer sections, however, it’s very easy to read and comprehend.

12. Carna by Ozmo

Ozmo provides a highly visual case study for a mobile application and passing various complexities of courses. The main goal for the UX designer is to develop a design and recognizable visual corporate identity with elaborate illustrations.

• Intro: A visual project preview with a brief description of the goal and role.
• Identity: Colors, fonts, and logo.
• Wireframes: The thinking process.
• Interactions: Showcase of the main interactions with animated visuals.
• Conclusion: Preview of the final screens.

The case study is short and highly visual, easy to scan and comprehend. Even without enough insight and text copy, we can clearly understand the thought process behind and what the designer was working to accomplish.

13. An Approach to Digitization in Education by Moritz Oesterlau

This case study is for an online platform for challenge-based learning. The designer’s role was to create an entire product design from research to conception, visualization, and testing. It’s a very in-depth UX case study extremely valuable for creatives in terms of how to structure the works in their portfolio.

• Intro: Introducing the client, project time, sector, and the designer’s role.
• Competitive Analysis: the case study starts off with the process of creating competitive profiles. It explains the opportunities and challenges of e-learning that were taken into consideration.
• Interviews and Surveys: Listing the goals of these surveys as well as the valuable insights they found.
• Building Empathy: The process and defining the three target profiles and how will the project cater to their needs. This section includes a PDF of the user personas.
• Structure of the Course Curriculum: Again with the attached PDF files, you can see the schemes of the task model and customer experience map.
• Information Architecture: The defined and evaluated sitemap for TINIA
• Wireframing, Prototyping, and Usability Testing :  An exploration of the work process with paper and clickable prototypes.
• Visual Design: Styleguide preview and detailed PDF.
• A/B and Click Tests: Reviewing the usability assumptions.
• Conclusion: A detailed reflection about the importance of the project, what the designer learned, and what the outcome was.

This is a very important case study and there’s a lot to take from it. First, the project was too ambitious and the goal was too big and vague. Although the result is rather an approximation and, above all, at the conceptual level requires further work, the case study is incredibly insightful, informative, and insightful.

14. In-class Review Game by Elizabeth Lin

This project was never realized but the case study remains and it’s worth checking out. Elizabeth Lin takes on how to create an engaging in-class review game with a lot of research, brainstorming, and a well-structured detailed process.

• Intro: What makes the project special.
• Research: Explaining how they approached the research and what they’ve learned.
• Brainstorming: the process and narrowing all How Might We questions to one final question: How might we create an engaging in-class math review game.
• Game Loop and Storyboarding: Sketch of the core game loop and the general flow of the game.
• Prototyping: Outlining basic game mechanics and rounds in detail.
• Future Explorations: The case study goes further with explorations showing how the product could look if we expanded upon the idea even further.
• What Happened?:  The outcome of the project.

This case study tells the story of the project in detail and expands on it with great ideas for future development.

15. Virtual Makeup Studio by Zara Dei

And for our last example, this is a case study that tells the story of an app-free shippable makeover experience integrated with the Covergirl website. The team has to find a way to improve conversion by supporting customers in their purchase decisions as well as to increase basket size by encouraging them to buy complementary products.

• Intro: Introducing the project and the main challenges.
• Discovery and Research: Using existing product information on the website to improve the experience.
• Onboarding and Perceived Performance: Avoiding compatibility issues and the barrier of a user having to download an app. The section explains the ideas for features that will keep users engaged, such as a camera with face scan animation.
• Fallback Experience and Error States: Providing clear error messaging along with troubleshooting instructions.
• Interactions: explaining the main interactions and the decisions behind them.
• Shared Design Language: Explaining the decision to provide links on each product page so users could be directed to their preferred retailer to place their order. Including recommended products to provide users with alternatives.
• Outcome and Learning: The good ending.
• Project Information: Listing all stakeholders, the UX designer’s role in a bullet list, and design tools.

In Conclusion

These were the 15 UX case studies we wanted to share with you as they all tell their story differently. If we can take something valuable about what are the best practices for making an outstanding case study, it will be something like this.

Just like with literature, storytelling isn’t a blueprint: you can write short stories, long in-depth analyses, or create a visual novel to show your story rather than tell. The detailed in-depth UX case studies with lots of insights aren’t superior to the shorter visual ones or vice versa. What’s important is for a case study to give a comprehensive view of the process, challenges, decisions, and design thinking behind the completed project .

In conclusion, a UX case study should always include a summary; the challenges; the personas; roles and responsibilities; the process; as well as the outcomes, and lessons learned.

Video Recap

Take a look at the special video we’ve made to visualize and discuss the most interesting and creative ideas implemented in the case studies.

In the meantime, why not browse through some more related insights on web development and web design?

• The 30 Best UX Books Every Creative Should Read in 2022
• Great UI Animation Examples to Make Your Jaw Drop [+Tips and Freebies]
• 60 Superb App Design Inspiration Examples

Popular Posts

• 20 UI/UX Design Trends that will Rock 2023 [Updated]
• Best 15 UI Color Palette & Scheme Generators for the Perfect Interface Design
• 10 Golden UI Design Principles and How To Use Them
• GET A QUICK QUOTE

Subscribe for our newsletter

We hate boring. Our newsletters are relevant and on point.  Excited? Let’s do this!

A rapid desktop prototyping tool

Mockplus - Design Faster. Collaborate Better.

Prototype, design, collaborate, and design systems all in Mockplus

Top 22 Stunning UX Case Studies You Should Know in 2022

An immersive yet well-structured UX case study helps UX professionals show off their design talents in portfolio websites, and let them communicate better with employers, designers and others easily.

However, as a UX designer , how can you write a perfect UX case study to easily get hired or communicate with others better?

Mockplus has handpicked 22 of the best UX design case study examples in 2022 to help you get inspiration, improve your portfolios and make your own things with ease. A step-by-step guideline about how to create a UX case study is also followed.

What is a UX case study?

A UX case study tells the story of how you create a great website or app and, in particular, what you do to improve the UX of the site. UX designers—newbies and experts alike—will often share a case study on a portfolio website as a great way to get hired. Just like sending a resumé. 

So, it is a lot more than just a copy of everything you've done while designing the project. To really showcase your design talent and the breadth of your abilities, you need to make sure the following are all included:

• A full description of your role in the project;
• The biggest challenges you've faced;
• The solutions you've chosen, how you chose them and why;
• How you communicate and collaborate with others; and
• The outcomes and the lessons you’ve learned.  

To this, you should feel free to add any further information that you think would help you stand out from the crowd. 

It is also worth remembering that UX case studies are a good resource for UX design beginners to learn more practical design skills and to gain from the real experience of others in dealing deal with difficult or urgent problems.

22 Best UX case study examp le s you should learn

Whatever stage you’re at and whatever you are writing your case study for, these 22 top examples are bound to inspire you. 

1. Perfect Recipe -UX design for cooking and shopping

Designer s : Marina Yalanska and Vlad Taran

Case Study : Perfect Recipe

This is a mobile application that enables users to search for food recipes and to buy what they need to cook different dishes.

Why d id  we choose this  one?

This case study illustrates the entire UX design process is very simple, plain language. Many aspects of the process are included, along with some really inspirational ideas, such as product personalization, challenges and solutions, animated interactions, and other interface details.

Extra tips :

This example is from the Tubikstudio blog, which is very popular among designers. It regularly shares different branding, UI, and UX case studies. We would strongly recommend that you follow this blog to keep yourself up to date with the latest and most creative case studies.

View details

2. GnO Well Being - Branding, Web Desing & UX

Designer : Marina Yalanska and Olga Zakharyan

Case Study : GnO Well Being

This is a creative illustration website that presents and sells a weighted designer blanket that helps you get a good night’s sleep, the first step to good health and a better life.

Why d id  we choose this ?

This example is so much more than a great UX case study. In addition to the UX design , it gives you insight into many more key design issues, such as the logo, custom graphics, website pages, interactions and so on. There are many ideas here that you could copy for your own projects.

3. Splitwiser - UI/UX case redesign

Designer : Chethan KVS (a Product designer at Unacademy)

Case Study : Splitwise

This is a concept mobile app that enables users to track and split expenses with friends. The designer has also given it another name, "Splitwise." 

Why do we choose this ?

This case study shares the designer's insights into key design decisions, such as why he chose this product, why he decided to redesign the logo, how to improve the onboarding and other pages, how to optimize the user flow, how to balance all pages and functions, how to enhance UX through bottom bars, interactions, gestures, view modes, and more.

Everything is explained using intuitive images, earning it thousands of “likes”. This is a great example that is bound to help you write a stunning case study on redesigning UX.

This comes from a popular media channel called "UX Planet" that regularly posts examples of the best and latest UX case studies from around the world. Another great place to keep you up to speed with the latest UX designs.

4. Deeplyapp.com - UX & visual improvements

Designer : Sladana Kozar

Case Study : Deeplyapp

This is a health and self-care website app that helps users maintain mental well-being with meditations and exercises. This case study talks you through the design process of creating a user-friendly mobile app.

This case study focuses on improvements to the UX and visual features of this mobile app. Many aspects are included to help you understand it better, such as the design background, what to build, UI flow diagram, discoverability design, visual balance, and much more. A full set of app interfaces are presented for you to study as well.

You can also check out its Part 1 post for more details.

5. Talent Envoy - improving the recruitment process 

Designer : Enes Aktaş (Experienced UX designer)

Case Study : Talent Envoy

Talent Envoy is an intelligent job assistant that helps users find their ideal job and get to all the way to signing a contract faster and more easily.

This case study firstly points out the biggest challenges and problems faced by job-seekers—the shortage of US recruitment markets. It then talks to you through the detail of how the designers optimized the recruitment process. You will also find information on the user research process, the UI flowchart design, the related wireframe and Sketch designs, the main page design, and more. 

All the details have clear explanations and they offer a great example of how to use user research to solve problems and improve UI interfaces.

This one comes from another hot media channel called "Muzli" which shares the latest ideas, designs, and interactions about websites or website apps from all over the world. Don’t miss out on this site if you want to stay ahead of the curve. 

6. My Car Parking - UI/UX case study

Designer : Johny Vino (Experienced UX and interaction designer)

Case Study : My Car Parking

This is a mobile app that can help people get parking slots easily even when they travel beyond their normal routes. 

This is a masterclass in how to write a case study that is simple, well-structured, and easy to understand. Many intuitive lists and images are used to explain the design ideas and processes. 

It has received “claps” from over seven and a half thousand people and   is a perfect example of how to write a well-structured and easy-to-understand case study.

7. Parking Finder App - UI/UX case study

Designer : Soumitro Sobuj

Case Study : Parking Finder App

This is another concept mobile app that makes it easy for users to find parking slots even in big or overcrowded cities.

This case study is beautifully presented and gives a good presentation of the whole design process. It covers nearly all the issues that a textbook UX case study should have, such as problems and solutions, user-centered design, design strategy, user flow, information architecture , interface wireframes and visual designs, and much more besides. 

It is one of the best examples we have found of a case study that really teaches you how to write the perfect UX case study.

8. Pasion Del Cielo - coffee ordering experience

Designer : Jonathan Montalvo (Senior Designer, Branding, UXUI )

Case Study : Pasión del Cielo

This is a concept project about a real local coffee shop in Miami.

This case study demonstrates effective ways to engage users with the Pasión brand and how a site can make it as easy as possible to turn page views into coffee sales. 

There is a lot of analysis included to explain the entire design process, such as analyzing the competition, feature analysis, brand and interface improvements, and much more. Most important of all, many user personas have been created to evaluate and enhance the UX.

This is a good example to check for anyone looking to improve their own UX case study. Above all, it shows what can be done with rich images, bright colors, clear layouts, and well-crafted personas.

9. Workaway App - UX redesign

Designer : Rocket Pix (UXUI, web designer )

Case Study : Workaway App

This is a mobile app that provides international hospitality services; it helps users to contact each other to organize homestays and cultural exchanges.

This UX design case study explains how the designer redesigned the Workaway App to make it easier for users. Many intuitive charts (pie charts, flow charts, line charts), cards, and images are used to illustrate the ideas.

It is simple and easy to follow, and also a good example of how to create an intuitive case study with charts and cards.

10. Receipe App - UI/UX design process

Designer : Dorothea Niederee (UX, UI designer   )

Case Study : Recipe App

This is a food app design offering inspirational recipes for anyone who wants to eat healthier.

This case study gives a clear demonstration of the entire UI/UX design process. Three user personas are defined to present different users' needs. Some colors, typography, and UI elements are also shared.

This is a good example of how to define a detailed user persona in your UX case study.

11. Hobbfyy - a social and discovery app UX design

Designer : Mustafa Aljaburi (UX, UI designer   )

Case Study : Hobbfyy

This is a social and discovery app that makes it quick and easy to get everything you need for your hobbies.

This case study aims to show how to develop a site that will provide its users with solutions, in this case to get what they need for their hobbies. Beautiful images, a storytelling style, and special layouts are used to explain everything.

12. Bee Better - habit tracker app UX case study

Designer :   Anastasiia Mysliuk (UX, UI designer   )

Case Study : Bee Better

This is a habit tracker app that makes it easy for you to develop new useful habits.

This case study aims to solve problems associated with how we form and develop habits. It helps users find solutions and make habit formation more interesting; it motivates them to maintain their useful new habits. Many aspects of design, such as problems, solutions, the design process, discovery and research, user journey map, prototypes, and much more are illustrated and explained in simple language.

This would be a good example to follow if you are looking to create an easy-to-understand UX case study.

13.Sit My Pet - pet sitting app UX case study

Designer : Aiman Fakia (UX, UI, visual designer )

Case Study : Sit My Pet

This is a pet-setting app that provides pet owners with a digital service that helps them connect with pet sitters.

This UX case study describes a site that aims to make pet sitting more easily accessible for pet owners. It analyzes both its users and its competitors very well. The way solutions are evaluated, the user stories, and other related aspects are followed in detail to give you a better understanding of the project as a whole.

This is a good example of how to develop a UX design based on user needs.

14. Groad - food ordering system UX case study

Designer : Phap (UI designer )

Case Study : Groad

This is a food ordering app offering food delivery services from stores, restaurants, cafés, fast food bars, and others. 

This UX case study uses beautiful illustrations and colors to explain the entire design process. As well as the usual parts of the design process—UI flow chart, UI showcasing—the related logo and icon designs, typography, and other aspects are included. This is a good example if you are looking to learn how to create an immersive case study with beautiful illustrations and colors.

15. iOS VS Android UI/UX Case Study

Designer : Johanna Rüthers

Case Study : Econsy

Here is another concept app that helps people live more sustainably by using a scanning process to give them information about the ecological and social impact of products they are thinking of buying. 

This case study explains the differences in the mobile app’s appearance when it is applied on the Human Interface Guidelines (IOS) and Material Design Guidelines (Android). This will help you to create an app that works well on both Mac and Android devices.

More UI/UX case studies & designs:

16.Timo Bank - UI/UX Case Study

Timo Bank is a mobile banking app project produced by Leo Nguyen, a freelance designer and creative director. This case study aims to provide more intuitive transfer, payment, and money management solutions for mobile users.

This is a great example to consider if you are hoping to create a better banking app.

17. Endoberry Health App Design

Endoberry Health App Design provides useful solutions for women suffering from endometriosis. In turn, this gives doctors a better understanding of individual cases. The design challenges, solutions, and UI details are displayed and explained to illustrate the design project.

18. Job Portal App

Job Portal App has been specially made for designers and freelancers. This case study uses cute illustrations, simple words, and clear storytelling to explain how the designer worked out the ideal job hunting solutions for users.

19. Cafe Website - UI/UX Case Study

Café Website gives its users a great experience by making it quick and easy to order a coffee online. Many elegant page details are displayed.

20. Ping - the matchmaker app case study

Ping is a dating app that offers users a unique and effective way to find their perfect match. As you can see, its mascot is really cute and this case study will show you how a cute mascot can enhance the UX.

21. Hubba Mobile App - UI/UX Case Study

Hubba Mobile App is a B2B online marketplace where retailers can find and purchase unique products for their stores or shops. This case study aims to explain the process of creating a special mobile app for this online marketplace. It offers a beautiful and clear presentation of the entire UI/UX design process.

22. Music App - music for children

Music App shares the fancy UI and colors from a music app made for children. It is a good example that is sure to inspire you to create a distinctive children's app.

How do you create a UX case study?

If you are still not entirely sure how to go about creating a distinctive UX case study, here are a few simple steps to walk you through the entire process from start to finish:

Step  1.  Figure out your purpose

The final outcome will depend on what it is you are trying to achieve. So, before you start writing a UX design case, you should first figure out in detail what its purpose is. Ask yourself some basic questions:

• Is it for a job interview?
• Is it for improving your personal portfolio?
• Is it designed to show off your design talents on social media?
• Is it just created to practice your design skills?
• Is it made to share design experiences with other designers?

In short, figuring out your purpose and setting a goal can make the entire design process so much easier.

Step   2.   Plan or outline your case study

Whatever you want to do, it is always a good idea to start with a plan. When it comes to writing a UX case study, you should also outline your entire UX case study and decide on what sections you want to include.

For example, nowadays, a good UX design case study often covers:

• Overview : Start with a short paragraph that introduces your project.
• Challenges  and  goals : Explain the project background and point out the biggest challenges or problems you've encountered. Explain the goals you want to achieve and how you will overcome the challenges you have identified. 
• Roles  and  responsibilities : Tell readers what role you play in the project and the specific features of your role that will help create a better product.
• Design process : Introduce the entire design process in detail so that readers can see clearly what you have done to make life easier for users. Many employers check this part very carefully to see whether you have the basic skills and abilities they are looking for. So, never underestimate the importance of this section. 
• Solutions  and  outcomes : No matter what problems you have faced, the solutions and the final outcomes achieved are what really matters. So, always use this section to showcase your skills and achievements. 

You might also want to add further sections:

• User research :   Some full-stack designers also include this to give a more comprehensive view of their design skills.
• UI designs : Some experienced designers also display their relevant UIs, and UI flow, along with low- and high-fidelity prototypes to enrich the content.

Of course, if you are a newbie, and you still have questions, why not go online and search for UX case study templates that you can study and follow.

Step 3.  Explain the design process clearly

As we've explained above, the design process is always one of the most important parts of a good UX case study. You should always introduce clearly as many of the relevant parts of the process as possible. For example: show how you and your team communicate and collaborate effectively; demonstrate how you have developed ideas to address user problems; explain how you and your team have dealt with emergencies or mishaps.  

You can also introduce the UX design tools that you have chosen to simplify the entire design process. Mockplus, is an online product design platform, enabled us to adapt quickly and effectively to working from home during the recent Coronavirus lockdown. Prototyping our designs, sharing ideas, working together in an effective team, taking the process from design to handoff, it all works smoothly with this single tool.

Step  4. Improve readability and visual appeal

The content should be the main focus of your case study—but not the only focus. To make the case study as good as possible, you also need to think about its readability and visual appeal. Here are some suggestions to follow:

• Explain everything as clearly as possible.
• Add images, illustrations, charts, cards, icons, and other visuals.
• Create a clear storytelling structure or layout.
• Choose an immersive color scheme.
• Add eye-catching animations and interactions.
• Use vivid video, audio, and other multimedia resources.

The final visual effect can be make-or-break for whether your UX case study is going to stand out from the crowd. You should always take it seriously.

Step   5. Summarize

Every UX case study can be a good chance to practice and improve your design skills. So, in your conclusion, don’t forget to analyze the entire process and summarize the outcomes. Always take a minute to figure out what lessons you should take away from the process, what tips should be remembered, what should be improved, and—most important—what your next steps are going to be.

UX case studies are one of the most essential parts of a UX designer's portfolio. The ability to write a well-structured UX case study is also one of the basic skills that a competent UX professional should have. So, UX case studies play a very important role in UX designer's life.

We hope our picks of the best UX design case studies along with our step-by-step guide will help you create a stunning UX case study.

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

Uploads design files from Sketch, Figma, Axure, Photoshop, and Adobe XD into our design handoff tool.

A free online prototyping tool that can create wireframes or highly interactive prototypes in just minutes.

A vector-based UI design tool enables you design in the way you want to.

Your single source of truth to build, maintain and evolve design assets in one place.

Related Content

Design Faster. Collaborate Better.

Designing the best user experience. Mockplus does it all!

Interactive prototyping

Unified collaboration

Scalable design systems

© 2014-2023 Mockplus Technology Co., Ltd. All rights reserved.

Case Study Customer Service Portal Client: Ocean Insights

Intuitive customer service portal for container shipment.

The aim of the project was to provide a lean user interface with all relevant shipment information of Ocean Insights clients for their customers.

Tools and Methods

Figma & balsamiq.

Prototyping and design was done in Figma based on the companies design system. Wireframes were concepted in Balsamiq. The project was divided into different sprints.

UI Design & Prototyping

In this project I was respsonsible for ideation, conception and the design based on user requirements. I worked close with the product and agile development teams.

Simple Design

The final product has users needs in mind: A simple and clean user interface with relevant-only information shown to the customers. The user configures the interface via settings itself.

Want to get in touch? 👋

UI/UX Case Study - Customer Service Portal

Creative Fields

Art Direction

• UI/UX Design

Attribution, Non-commercial, No Derivatives