website redesign case study ux

How To Conduct A UX Redesign

No matter what context you work in as a UX designer, at one point or another, you’ll probably be asked to redesign a user experience. At the start of your UX career, you might even conduct an unsolicited redesign to help build up your portfolio.

Either way, you might find yourself redesigning a website, an app, or the interface of a device. No matter what you’re redesigning, though, your process should follow a similar series of steps and encompass a similar set of questions and concerns.

In this article, we’ll cover the following topics:

• Redesigns from refresh to complete overhaul
• Reasons to conduct a redesign
• Steps for conducting a UX redesign
• Showcasing redesigns in your UX portfolio
• Key takeaways

Let’s jump in!

1. Redesigns from refresh to complete overhaul

UX redesigns can have vastly different degrees of complexity. On the one hand, the product may simply require a visual refresh to make it seem more modern and visually interesting. If this is the case and no noteworthy user experience changes are needed, the UX designer’s job may be to simply review the art director’s work and ensure nothing about the user experience is broken by the aesthetic overhaul.

You might also be tasked with redesigning the user experience for a specific part of a product’s user interface . For example, perhaps the users of a specific website are having trouble navigating through a shopping cart or finding information on shipping and handling. If that’s the case, the UX designer’s job is not only to redesign that piece of the user experience; it’s also to make sure the redesigned interface fits in seamlessly with the original interface and doesn’t break any links or other functionality on the product.

So if you’re redesigning the way a user books a table on a restaurant’s website, for instance, you need to make sure users can successfully navigate to your redesigned reservation system and that they can navigate away to a different part of the website once they’ve completed their booking.

Finally, a product might require a complete overhaul. That means the UX designer will be responsible for understanding every single piece of information that must go into the redesign and how that information fits together. Then the UX designer must determine how to improve upon the prior design while avoiding changes that are so radical that they confuse and frustrate the product’s existing users. It’s a tough balancing act that requires attention to detail and a deep understanding of users’ goals.

2. Reasons to conduct a redesign

The very first question a UX designer should ask clients or stakeholders about a redesign is why they want to conduct it. There are many legitimate reasons to conduct a redesign, according to the Nielsen Norman Group . These include:

• The site looks outdated
• New branding needs to be implemented
• Technological advances have made the site seem antiquated
• The site isn’t optimized for mobile or social media
• The information architecture of the site is a mess and many links are broken
• The user experience is confusing and there is no unified structure
• Analytics show users have trouble doing what they need and don’t stick around

While the first two reasons on the list may simply require a visual refresh, the others involve important UX changes.

You may be tasked with conducting a redesign following a UX audit . However, sometimes a client or stakeholder will request a complete UX redesign simply because they look at their product’s user interface all day and are bored. This can lead a client to focus on the things they don’t like about their product’s user experience. On the other hand, users probably feel differently. Users are creatures of habit. And since they’re spending far less time with a product’s user interface than the client, they’ll typically see the familiarity of the UI as a positive.

Consider this: If Amazon.com completely overhauled its website in order to make the website seem more innovative or interesting, but in the process changed how to find items, how to add them to your shopping cart, and how to check-out, what would be your response? If you’re like most people, you’d be frustrated. You already know how to complete tasks successfully on Amazon. Anything outside of an incremental change will make that more challenging and time-consuming. No matter how cool the newly implemented changes may seem, most users won’t be impressed. Their goal when they go to your website, app, or other UI is to complete their task and meet their goals in as little time as possible.

So if a client or stakeholder wants to completely rehaul a product’s user experience but they don’t have a good reason for doing so, you as the UX designer must make sure to advocate for the product’s users. This could mean discussing other options, like a visual refresh or small UX changes with your client.

One way or another, it’s essential to make sure any changes you make, even on a complete overhaul, are not made for the novelty of the changes. It can be tempting to be as creative as possible. However, you’re better off understanding what users are already familiar with from the product (based on their mental models ) and implementing changes that respect what your users like while mixing in some new but understandable evolutions.

Unsolicited redesigns

If you’re a fresh-faced UX designer just starting out, you might also conduct a hypothetical—or unsolicited—redesign. This is a great way to put your newly acquired design skills into practice, and also gives you a case study to add to your portfolio in the absence of a real client project.

An unsolicited redesign is, quite simply, a hypothetical project of your choice . Perhaps there’s a particular website you use regularly that you think could benefit from an overhaul, or a certain app that could be upgraded with a few simple tweaks. Just like a “real” client project, you’ll redesign the experience and document your process from start to finish in your portfolio—just like Priyanka Gupta does in her unsolicited redesign of the Sephora iOS app . Just remember to clearly state that you’re not affiliated with the company in any way, and that you haven’t actually been hired to conduct a redesign. Otherwise, the process is the same as for a real UX redesign. Let’s take a look at that now.

3. How to conduct a UX redesign: Step-by-step

1. understand existing users.

In an ideal world, all UX redesigns would start with user research and analytics. Analytics for an existing product will help you understand how users are currently using the product, and identify the biggest pain points they encounter based on how long they use the product and how many screens they visit. This also gives you hard data that will help you make specific recommendations for where to focus the efforts of your redesign.

Whether you have access to analytics or not, you should perform user research on the product you are redesigning. As Nielsen Norman’s Hoa Loranger explains, “Your old site is the best prototype for your new site.” Make sure you take advantage of that by learning from the existing product. Gather user feedback on what they dislike about it, while also making sure to ask about what users like about the current product. All of this information will help fuel your redesign.

2. Understand business goals

It’s essential to understand what the business wants to get out of the redesign. What do they know about their existing users that can help you conduct your redesign? The UX redesign solution should be specific to the business’ goals while keeping user needs in mind. If the business wants to make it easier to navigate to specific information, increase page views, or complete more sales, the user experience must be designed to support those goals by making it easier and more beneficial for users to do those things.

3. Competitive analysis

Another source of information for a redesign: analyze competitors’ products . Take a look at competitor’s UIs to see what they’re doing that’s different. What works? What doesn’t work? Are there innovative solutions that you can borrow that will better engage your users? Are there things they’re doing that you want to avoid?

In addition to researching users’ reactions to the product you’re redesigning, you can also perform a study to see how users respond to competitors’ products. Explore how users interact with the interface and navigate through the user experience, including what they find clear and easy to use and where their pain points are.

4. Redesign

After gathering data from the existing product and competitors and ensuring you understand the business goals for the project, you should be ready to start redesigning in earnest. You’ll often want to start with a site map of the redesigned information architecture. You’ll also want to make sure you understand the various ways users may work through the site to meet different goals by creating user workflows. Once you have a handle on these top level issues, you can start wireframing and creating prototypes for the redesign. Ideate on potential user experience options until you come up with a solution that works best for both the business and users.

5. User testing

Finally, test your redesign with users, preferably users of the previous iteration of the product. Get feedback on what they like about the new design and what may frustrate them. Keep in mind that any redesign is likely to ruffle some users’ feathers. But user testing will help determine if there are any real usability problems with the redesign. If there are, continue to iterate on the redesign until the user experience is working the way it should.

4. Showcasing redesigns in your UX portfolio

While it’s not essential, it is valuable to include at least one redesign project in your UX portfolio. To most successfully showcase a redesign, make sure you can explain why the redesign was done, what your solutions were to the challenges presented by the client, and why you decided to implement any noteworthy features. Showcase the redesign process in the order it was conducted—from studies on the previous and competitors’ sites, right through to user workflows and information architecture overhauls to page-level redesigns—in order to tell the story of the redesign. You don’t have to include everything, just enough to make sure the process you went through is clearly represented. Your goal should be to clearly communicate to someone looking at your portfolio how you improved on an existing product with your redesign and the journey you took to get there.

5. Key takeaways

Now you have a clear process to follow in order to conduct a UX redesign—be it a real client project, or an unsolicited redesign for your UX portfolio. To sum up:

• Redesigns can run the gamut from a visual refresh to a complete user experience overhaul.
• The most important question to ask before starting a redesign is why the client or stakeholder wants to conduct it.
• There are many reasons to conduct a UX redesign including a product that is no longer optimized for new technology, convoluted information architecture and a confusing user experience.
• The kind of redesign that is undertaken should be based on user needs, not boredom on the part of clients or stakeholders who work with the user interface regularly.
• A good UX redesign starts with studying the existing UI, as it is the best prototype for your new product.
• Make sure you understand your clients’ business goals and how they can be seamlessly integrated into the redesigned user experience.
• Research competitors’ products to see what works and doesn’t work about their UX.
• A UX redesign should consist of a variety of deliverables including user workflows, site maps of the information architecture, wireframes, and prototypes . Iterate on the new design and perform user testing until the user experience is working as it should.
• It’s ideal to include at least one redesign in your UX portfolio that tells the story of the challenges of the project.

Now that you know how to approach a UX redesign, you might want to learn more. If so, you’ll find the following articles useful:

• 9 Awesome UX Portfolios From UX Design Graduates
• What is a Wireframe? A Comprehensive Guide
• The 5 big differences between UX and UI design

Zara // Website Redesign - UI/UX Case Study

A fresh take on the iconic clothing retailer Zara’s UK website, this project uses standard usability testing best practices to evaluate Zara’s current website to find usability issues and implement a redesign of the site to create a more user-centred design.

*This project has no affiliation with Zara and was used in an educational setting for student work

With COVID-19 changing the way society operates in 2020-2021, many industries are relying on online sales to stay afloat. Zara, one of the largest clothing retailers, is also seeing a significant shift in consumers contributing to their online sales , but users have expressed frustration with using the site .

Using standard usability testing principles and design thinking , I evaluated Zara’s UK website to find and amend usability issues for a more efficient , effective , and satisfactory experience .

The Challenge

While Zara claims to put customers at the centre of their brand, users online have expressed difficulties and issues in the usability of Zara’s site , including many of my friends. This prompted me to evaluate Zara’s web presence and find a way to improve their site while working within their established brand and creative direction.

The Solution

I conducted a usability test compliant with the Common Industry Format (CIF) methodology with 6 users and performed a redesign of the Zara UK website after identifying key usability issues and formulating recommendations to enhance the site’s ease of use when searching for and purchasing clothing items.

In addition, I created a style guide , task analysis , and class diagram for the redesigned site.

Company Conceptual Project

Project Duration 10 weeks

Role User interface design, user research, usability testing & analysis, heuristic evaluation, information architecture, task analysis, object-oriented analysis, and prototyping

Tools Adobe XD, Miro, Zoom

Methodology

I followed the CIF methodology for the usability test and used standard metrics to measure efficiency, effectiveness, and satisfaction .

In addition, I incorporated qualitative experimental design components such as the thinking aloud protocol , emotional interpretation , and a post-test interview . These components helped me gain deeper insights to sufficiently achieve my research goals.

I also used the Hasso-Plattner Institute of Design at Stanford ’s design thinking process consisting of research, define/analysis, ideation, prototyping, and testing & evaluation for the redesign portion of this project.

Market Research

Heuristic evaluation.

Before usability testing, I conducted a heuristic evaluation of the current Zara UK site to find usability issues . I focused on the main functionality, layout, UI components , and content a user will interact with when searching for clothing and adding items to the shopping bag .

This evaluation was a good exercise in unveiling possible usability issues that users could come across during testing and allowed me to empathise with users while also offering a designer’s perspective.

Research & Task Goals

Based on market research, I learned that most users desire efficient search and navigation from online retailers . This informed the research goals that this usability test will set out to achieve.

The goals align with the standard usability measures of efficiency, effectiveness, and satisfaction , and allowed me to keep top of mind how shoppers are using Zara when searching for items, finding item information, and adding items to their shopping bag throughout the course of the testing and evaluation.

I selected tasks that explored non-core functionalities to focus on less frequently used features that need greater consideration for a smooth online shopping experience on Zara’s site. After fine-tuning the scenarios and tasks based on a pilot study and the insights from the participant information questionnaire , I created tasks that explored users finding product information and searching with specifications in mind .

Having an understanding of the research goals and participant insights allowed me to make informed judgements on what the usability testing tasks should be.

Participant Recruitment

Keeping in line with Zara’s target demographics of 18-35-year-olds who are price conscious , I sent an information questionnaire to 6 users to gain more insights on their clothing shopping habits to see whether they would be suitable for this usability test.

I evaluated the questionnaire findings to ensure the users were representative of Zara’s target market and recruited these 6 participants.

Usability Testing

I produced many standard documents to aid me in preparation for and during usability testing . This includes:

Participant Recruitment Advertisement

Participant Information Sheet & Informed Consent Form 

Participant Information Questionnaire

Usability Testing Script

Task Instruction Sheets 

Observation Sheets

Post-Test Questionnaire

The standard CIF metrics to assess efficiency , effectiveness , and satisfaction along with a few additional metrics to assess usability were used. These include: 

Completion rate per task

Time on task

Error count per task

Assist count per task

Satisfaction rating per task

System Usability Scale (SUS) score

Net Promoter Score (NPS)

UI Design Assessment

Emotional interpretation

Procedure 

The following steps make up the procedure for the usability testing:

Recruiting Participants

Obtaining Participant Informed Consent

Obtaining Participant Information & Screening Participants

Setting up Meeting Time

Sending Preparatory Test Materials (Task sheet, Zara UK website URL, video conference link)

Conducting the Usability Test (using Usability Testing Script and Observation Sheets)

Post-Test Interview

Overall, the quantitative results from the usability testing show poor usability of the Zara UK site. Below are some of the key findings such as a low satisfaction rate , low completion rate , and high amount of time per task that highlight the usability issues on the site.

In addition, the SUS score was labelled “awful ” the NPS rating was a negative score signifying that users are having a difficult time with the site’s usability . Breaking down these metrics and looking at them holistically as a representation of usability provided me with a clear view of the immediacy of improvements needed for Zara’s site.

For the qualitative findings, I created a word cloud that visualised the frequency of emotional adjectives users voiced about the Zara website. In addition, I created an affinity map of the verbal feedback from users during usability testing and formed themes around the most common usability issues encountered. 

These insights validated the overall frustration and confusion that most users experienced while using the site.

Usability Issues

Based on the quantitative and qualitative findings, I identified 5 key issues that affected all participants:

Disruptive visuals

Insufficient assistance

Poor searching capabilities

Unintuitive layout of information

Unintuitive labelling of content

The table describes each issue, the page type/UI affected by it, issue frequency, and the issue severity. I assigned standard severity levels of critical, serious, and minor to each issue instance.

This helped me evaluate the immediacy of the issues and prioritise which issues to tackle first.

User Persona

To put the data into a more tangible perspective, I created a user persona. This allowed me to see a holistic picture of the target user , and evaluate their goals, frustrations, behaviours, motivations, and personality based on the usability testing findings.

Redesign Recommendations

I provided redesign recommendations for all the critical usability issues , which strive to keep the clean, minimal aesthetic of Zara’s site while optimising pages and components to be more intuitive and usable .

Because the redesign recommendations are directly correlated with the user data , I felt confident about the changes necessary for each UI feature to make the site more user-friendly.

Prototyping

Using the recommendations, the Zara site was redesigned to amend the most critical usability issues . Standard website usability and design principles such as colour, scale, typography, imagery, hierarchy, consistency, gestalt principles, navigation, and accessibility were used to inform design decisions .

I implemented changes to the product listing page, product page, search page, search results page, ZARA SRPLS homepage, and ZARA SRPLS product listing page , which is where critical issues were found.

Main Navigation

For the main navigation bar on the homepage, I added a black to transparent gradient to make the text more readable to better comply with accessibility standards.

When the main navigation is opened, I added plus and minus icons as a visual indicator for accordions holding all product categories. In addition, I added short descriptions for each clothing collection so users have a better understanding of the collection’s style of clothing.

Product Listing Page

This page houses all products from a product category . I modified the top navigation bar to have the view settings on the left , consistent sub-navigation present for all listing pages, added a sort functionality , and better organised and labelled the filters .

In addition, I added a style lookbook feature to showcase product photography from the respective product category in a much less distracting way.

I also set the default view to 4 items per row and created a more flexible layout that allows for certain products to be featured. In addition, I added product colours, multiple product shots in carousel format, and redesigned the “New” label for products so users can see more information on products easily at a glance .

Chat Feature

I made the chat feature more visible and accessible across the whole site, and made the interaction with the chat much more intelligent and intuitive than on the current site by keyword recognition and pulling information from product pages directly instead of immediately connecting the user to an agent as it currently does.

Search & Results Pages

When a user clicks the search bar along the top navigation bar, the search page will open up full screen. This page includes the search input field along with search suggestions for any keyword typed. I added a magnifying glass icon for a clear search action and an “x” button to delete a search .

Once the user searches for an item, they will be taken to a results listing page. I maintained consistency across the site by treating product listing pages the same, and this results page aligns with that. Therefore, users can still sort and filter these results , which is lacking on the current Zara site.  

ZARA SRPLS Homepage & Product Listing Page

Since users found it difficult to navigate the ZARA SRPLS pages , added a play/pause button to the hero video to comply with accessibility guidelines . I also added links to the “New Drop” category below the video with links to the three departments.

When the user selects an item within ZARA SRPLS, they will be taken to the product listing page which is styled to match this collection’s unique look and feel. I ensured consistency by including the top navigation bar on this page and styled each product card similarly to the main product listing page items.

With the redesign complete, I compiled the visual styles and UI components that make up the website into a styleguide that creates guidelines around each component’s usage to ensure consistency across the site.

The styleguide was a good lesson in thinking through how I would collaborate with developers and what types of information they would need for each component at a high level. 

Hierarchical Task Analysis

To account for all the tasks and subtasks a user will take within the redesigned Zara site, I created an HTA that maps out the various interactions a user will take within the system . The HTA begins with the overarching goal of finding a product and adding it to the shopping bag , and the core tasks that make up this goal are broken down into subtasks. This is repeated until all the main actions within the redesign have been accounted for in detail .

Once the tasks and subtasks were identified, I wrote plans to accurately state the order of steps and any optional steps. The HTA allowed me to evaluate the optimal paths for each task and evaluate the site as a whole to note any discrepancies in my prototype.

Class Diagram

An object-oriented model showcases the objects and attributes that make up a system. I created a class diagram to map the relevant objects a user will interact with on Zara’s site and the relationship between them using arrows, labels, and multiplicity . The diagram shows the main class and subsequent attributes for the key objects that are a part of the website redesign.

In creating this diagram, I was able to adopt the perspective of a developer who would use this diagram to inform the creation of the site redesign, building empathy with other roles within a project team.

Overall, the results from this usability testing of Zara’s UK website produced eye-opening results that answers the research goals. In reflection, there are many areas that can be improved and expanded upon.

A few key points of reflection from this project include:

Models take design thinking one step further. Especially in regards to empathising with developers on a project team, HTAs and class diagrams allowed me to adopt a more technical mindset to create better a better handoff process between designer and developer.

Standard usability testing metrics and procedures provide actionable feedback. Quantifying data by using metrics like task success rate, completion rate, and time on task shows a clear path to improving a product. Carrying out a CIF methodology usability test taught me the more technical side of UX Design and connecting with users in a more formalised manner to gain concrete insights.

The True ROI of UX: B2B Redesign Case Studies

UX designers often need to convince company executives on the ROI of a UX redesign initiative. Here are some real-life B2B redesign case studies a UX team identified in order to make a compelling case.

By Miklos Philips

Miklos is a UX designer, product design strategist, author, and speaker with more than 18 years of experience in the design field.

PREVIOUSLY AT

User-centered design isn’t just about creating a great experience for customers—it’s also a smart business move.

In our previous article “ The True ROI of UX: Convincing the Executive Suite ,” we talked about how to persuade company executives on the ROI of UX, and how to illustrate the value of UX in increasing business KPIs . In this second piece, we discuss how, in order to really drive the message home, it is essential that UX teams present successful case studies of similar B2B UX redesigns.

The trouble is, finding data from real-world B2B UX redesigns is extremely challenging. Through dogged perseverance, our UX team found some useful data, but the proven difficulty of defining the ROI of UX (ie. how to exactly measure it) complicated matters further, and it became evident that the ROI of UX needed to be categorized into “soft” and “hard” dollars.

On the “soft side,” results are categorized into increased customer loyalty and net promoter scores (NPS), increased word-of-mouth referrals, productivity gains, and increased efficiency. On the “hard dollars” side, increased earnings and cost savings are gained from fewer support calls, less spent on development, fewer development “redo” cases, less user-testing, increased sales, and so on.

Here are the internal and external ROI measures:

Internal ROI

• Increased user productivity
• Decreased user errors
• Decreased training costs
• Savings gained from making changes earlier in design life cycle
• Decreased user support

External ROI

• Increased sales
• Decreased customer support costs
• Savings gained from making changes earlier in the design life cycle
• Reduced cost of providing training

The B2B UX redesign case studies below represent the results of our research into the top 15 global design agencies/consultancies who performed B2B UX design/redesign projects. These case studies come from prominent design/consulting firms such as Accenture Interactive , Boston Consulting Group , McKinsey , Forrester , IDEO , Frog Design , Fjord , Adaptive Path , and others.

ROI of UX: B2B Redesign Case Studies

Bank of america.

The giant bank identified and funded a UX redesign project to improve its online enrollment application for online banking. In developing the business case, the design team identified yield (or the percentage of customers completing the process) as the primary metric.

Prototyping and testing various design solutions with yield as the primary success metric proved a successful design strategy. The week the new registration form went live, the yield metric nearly doubled, and exceeded the desired ROI benchmark. This was a win for the design team, as well as the business unit that sponsored the project.

General Electric Software UX Unification

Known for its industrial expertise, by 2010 General Electric Co. had quietly become the world’s 14th largest software developer by revenue. These capabilities had grown opportunistically, primarily in response to requests from specific clients . As a result, little software consistency existed across the company and significant development efforts were invested in problems already solved in other divisions.

Overall, users of GE software reported that the quality didn’t reflect the excellence of GE’s hardware engineering. GE leadership decided to make an investment in creating a common software platform for the company. The Software Center of Excellence developed a UX Center of Excellence that would guide GE management, and drive the culture change to ensure that their software user experience matched their well-earned reputation for stellar hardware engineering.

Leaders, engineers, and designers collaborated to build processes and tools to support culture change together with a core foundation of design tools and success metrics that would support its UX practice. In the first year after its launch, the IIDS generated a 100% productivity gain in development teams and saved an estimated $30 million for the company. These digital transformation initiatives provided the foundation for GE Digital—and GE’s leadership in the industrial internet.

Cathay Pacific

Cathay Pacific Airways is known for its leadership in the adoption of new technologies. The airline was the first in the world to announce plans to install in-flight email, the first to link its Airbus aircraft to its maintenance centers electronically, and the first in the world to auction air tickets online.

For company employees, a staff of eight to ten people work full-time to answer questions and book travel. Working with a design consultancy, Cathay Pacific created a new online portal called TravelDesk, a one-stop shop for staff travel.

The portal design project resulted in significant cost savings for the company:

• The online portal reduced call-center volume (employee benefits center regarding policy questions, and service center regarding flight availability).
• It increased productivity. Ground staff at the airport previously spent significant time managing the listing and check-in process for employees using their travel benefits. This project reduced the time required for these tasks.

Virgin America Website Redesign

Virgin America was on a mission to make flying fun again. In 2014, the airline decided to reinvent the digital travel experience, and in order to meet the needs of modern travelers, create the world’s first responsive airline website. The company decided to design and engineer a new digital platform that could respond to modern travel needs and behaviors.

After successfully A/B testing the new design against the old, Virgin America’s reinvented responsive site was released. They announced an IPO following two successful quarters running the new site that had exceeded performance goals in the following areas:

• 14% increase in conversion rate
• 20% fewer support calls
• Flyers booked nearly twice as fast, on any kind of device

In a recent major iteration of HubSpot , the company decided to re-think the user experience on its site, starting from the ground level with user feedback. They tested entirely new conversion methods, copy messaging, and even visual treatments. As part of the process, they pushed countless experiments live, and iterated with each piece of feedback, putting the user in control.

The result? The conversion rate doubled (tripled, even, in some areas). As HubSpot receives upwards of 10 million visitors per month, one can imagine the impact this had on revenue.

Continental Office B2B Website Redesign

With a brand refresh just a few months prior, Continental Office, a customized workplace solution provider, needed to update its 6-year-old website. The team wanted to ensure they were integrating buyer personas to provide an engaging user experience complete with relevant content marketing.

The old website was fine at the time but wasn’t built around telling the whole story while understanding the customer journey.

In creating that great user experience, you have to stay relevant with what people are looking for and then build your website around that, which I believe is what we did and has allowed us to have these successful results. - Rachel Iannarino, Vice President, Marketing.

The results of getting to know customers and building a website around that speak for themselves. Through the redesign strategy , traffic increased by 103% year-over-year and net-new contacts increased by 645%.

Even though we had such great results last year, it’s already up — the number of new contacts is up over 80% from last year already. And I can’t lie; I keep waiting for these numbers to kind of plateau, but fortunately for us, the results just keep trending in a positive way - Iannarino said.

Music & Arts

Music & Arts sells musical instruments and comprises 150+ retail stores, and 300+ affiliate locations. Their sizable eCommerce site had numerous usability problems that hindered online sales.

There is a detailed case study of this UX redesign project on the Toptal Design Blog: “ eCommerce Redesigned: How Minor Changes Made Major UX Improvements .”

After a three month UX redesign project that significantly improved basic usability issues (consistency, simplicity, user flow, system feedback) their online sales increased around 30% year-over-year .

This ad-tech platform’s UX redesign project took over a year. The B2B platform was about 7 years old and was made up of a hodge-podge of UIs, a variety of different-looking web-applications that were created at different times. As the company was maturing, it needed a unified UX design and a brand-consistent look-and-feel.

As a result of the UX redesign, NPS increased from 6 (detractors) to 9 (promoters) over 3 months immediately after launch when measured against the old platform’s satisfaction data.

Final Thoughts

A very interesting experiment related to the ROI of UX was conducted by the Geoff Teehan, Director of Product Design at Facebook in 2006. They called it the “UX Fund.” The $50,000 fund invested in companies that focus on delivering great user experiences. The hypothesis was that the ROI of UX should be reflected in their stock price over time.

Over a ten year period, from 2006 to 2016—including a major financial crisis in the middle of it—the “UX Fund” returned 450% vs the Nasdaq’s 93.2% return (that’s 45% annual return over ten years which beats any other asset class). You can read more about this experiment here .

Despite the evidence that UX design investments enhance customer experience and address business problems, executives still find it a challenge to define the financial benefits using traditional ROI measures. UX designers best serve businesses if they can not only create great “designs that work,” but are able to articulate and convincingly demonstrate tangible business results and KPIs to executives and stakeholders.

In order to be convincing and really get to the heart of what executives need to hear, UX designers need to think in similar terms to business leaders. Think: how can we best provide business value? If we do this, what will the return on our investment be? What metrics will demonstrate that we’ve made the right choices?

If done well, design can help bring order and coherence to the disorder that is the current state of the B2B world and enterprise applications. A 2016 design study of 408 different companies found that the more a company focused on and invested in design, the more they saw sales increase and experienced higher customer retention rates—customer engagement soared, and they moved through product cycles faster. All this simply because they put UX design, and more importantly, the customer, at the very heart of their business.

Clearly, good user experience is good for business . Today it’s become part of a UX practitioner’s job to offer decision-makers a compelling demonstration of the true value of exceptional UX design, and that there is indeed an impressive ROI in UX.

Further Reading on the Toptal Blog:

• The Value of Design Thinking in Business
• Product Strategy: A Guide to Core Concepts and Processes
• Collaborative Design: A Guide to Successful Enterprise Product Design
• Customer Journey Maps: What They Are and How to Build One
• Great Questions Lead to Great Design: A Guide to the Design-thinking Process

Understanding the basics

How can you improve your website.

One of the many ways to improve a website is to do a user experience evaluation by bringing in a UX expert. A UX expert would consider the website’s content, its main customers, and core functionalities, and come up with a user-centered redesign solution.

What does B2B mean?

B2B is an acronym which stands for “business to business.” It signifies the exchange of products or services between businesses, rather than between businesses and consumers.

What is the difference between B2C and B2B?

B2C is a shorthand for “business to consumers” whereas B2B is an acronym which stands for “business to business.” Consumer-oriented eCommerce websites are an example of a B2C.

What are user experience goals?

The goals of user experience, or “UX,” are to deliver an experience to customers that delight and ensure that the right content, features, and functionality are presented in the right place, at the right time, in the right way.

What are UX and usability?

UX stands for user experience which refers to the “experience” an end-user has when using an interactive product. Usability refers to how easy it is to use a digital product. For digital products to work well in the real world, they need to have great usability.

What is the meaning of brand perception?

Brand perception is what’s held in the minds of customers when they hear or see something about a particular brand. Brand perception represents the brand values and quality of a brand, and how a customer would feel and think about a brand.

• Product Design

Miklos Philips

London, United Kingdom

Member since May 20, 2016

About the author

World-class articles, delivered weekly.

By entering your email, you are agreeing to our privacy policy .

Toptal Designers

• Adobe Creative Suite Experts
• Agile Designers
• AI Designers
• Art Direction Experts
• Augmented Reality Designers
• Axure Experts
• Brand Designers
• Creative Directors
• Dashboard Designers
• Digital Product Designers
• E-commerce Website Designers
• Full-Stack Designers
• Information Architecture Experts
• Interactive Designers
• Mobile App Designers
• Mockup Designers
• Presentation Designers
• Prototype Designers
• SaaS Designers
• Sketch Experts
• Squarespace Designers
• User Flow Designers
• User Research Designers
• Virtual Reality Designers
• Visual Designers
• Wireframing Experts
• View More Freelance Designers

Join the Toptal ® community.

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.

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!

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

The impact of ux design on application success: exploring costs and trends, 7 top ux careers & specialisations: skills, paths & opportunities, 15 figma plugins to boost your design workflow, 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