How to Craft an Outstanding Case Study for Your UX Portfolio

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

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

UX portfolio overview

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

  • Final thoughts

1. Before we get started

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

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

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

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

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

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

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

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

  • Defining the Problem
  • Understanding your Users
  • Final solution

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

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

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

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

2. Anatomy of a UX case study

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

Some key questions to answer are:

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

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

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

Deliverables that work really well for this section would be:

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

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

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

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

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

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

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

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

Artifacts you might include are:

  • Pen and paper or low fidelity digital wireframes

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

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

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

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

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

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

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

3. Final thoughts

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

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

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

The Complete Guide to UX Case Studies

Cassie Wilson

Published: August 21, 2023

Writing a UX case study can be overwhelming with the proper guidance. Designing for the user experience and writing about it in a case study is much more than writing content for a webpage. You may ask, “If my design speaks for itself, should I include a UX case study in my portfolio?”

person reviewing a ux case study on a laptop

Yes, you should include UX case studies in your portfolio. And here’s why.

Download Our Free UX Research & Testing Kit

You need to make your portfolio stand out among the crowd. A UX case study is a great way to do that. Let’s take a minute to define what a UX case study is and look at some examples.

Table of Contents

What is a UX case study?

The benefits of ux case studies, examples of ux case studies, tips for creating a ux case study.

UX portfolios are essential to showcasing UX designer skills and abilities. Every UX designer knows better designs bring better results. Sometimes, it’s easy to let the design speak for itself — after all, it is meant to engage the audience.

But, in doing that, you, as the designer, leave many things unsaid. For example, the initial problem, the need for the design in the first place, and your process for arriving at the design you created.

This is why you need to include UX case studies in your portfolio.

UX case studies tell a curated story or journey of your design. It explains the “who, what, when, where, and how” of your design. The text should be short and sweet but also walk the reader through the thinking behind the design and the outcome of it.

[Video: Creating a UX Case Study: Right and Wrong Way to Approach It]

There are many benefits to including UX case studies in your portfolio. Think of your UX portfolio as a well-decorated cake. The designs are the cake, and UX case studies are the icing on the cake— they will catch your audience's eye and seal the deal.

Take a look at the benefits of adding UX case studies to your portfolio.

UX Case Study Benefits Showcase skills and abilities. Explain your thinking. Highlight (solved) user issues. Define your personality.

Don't forget to share this post!

Related articles.

Eye Tracking: What Is It & How to Use It for Usability Testing

Eye Tracking: What Is It & How to Use It for Usability Testing

How Important is UX in the Future of SEO?

How Important is UX in the Future of SEO?

UX and SEO: How Important is it?

UX and SEO: How Important is it?

How to Choose the Right Fonts for Your Marketing

How to Choose the Right Fonts for Your Marketing

The Complete Guide to UX Audits

The Complete Guide to UX Audits

The Complete Guide to User Stories (+Examples)

The Complete Guide to User Stories (+Examples)

Inclusive Design: The Ultimate Guide

Inclusive Design: The Ultimate Guide

5 Website Carousel Best Practices to Enhance Your Sliders [Examples]

5 Website Carousel Best Practices to Enhance Your Sliders [Examples]

How to Add a Parallax Scrolling Effect to Your Website [Examples]

How to Add a Parallax Scrolling Effect to Your Website [Examples]

What Is GUI? Graphical User Interfaces, Explained

What Is GUI? Graphical User Interfaces, Explained

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

100% Free CRM

Nurture and grow your business with customer relationship management software.

What is a case study in UI/UX?

What is a case study in UI/UX?

A case study in UI/UX is a detailed examination of a design project that explores the designer's process and decision-making. It showcases the challenges faced, solutions implemented, and the results achieved in creating a user-centered design.

Why are case studies important in UI/UX design?

Case studies provide valuable insights into the design process, allowing other designers to learn from successes and failures. They demonstrate the impact of design decisions on the user experience and can help build trust with potential clients by showcasing past successes.

What should be included in a case study?

A UI/UX case study should typically include the following elements:

  • A brief overview of the project and its goals
  • The designer's approach and methodology
  • Details about the research and user testing conducted
  • The design iterations and decision-making process
  • The final design solution and its impact on the user experience

How can I make my case study stand out?

To make your case study stand out, be sure to highlight your unique approach to the design problem and showcase the impact your design had on the user experience. Use visuals and data to support your claims, and keep the tone of the case study clear, concise, and engaging.

Where can I find examples of UI/UX case studies?

There are several websites and resources that feature UI/UX case studies, including Behance, Dribbble, and UX Design. Additionally, many design agencies and individual designers publish case studies on their websites.

what is a case study in ui ux

About the author:

author picture

Related posts

What is a grid system in UI/UX? What is a grid system in UI/UX? A grid system in UI/UX refers to a framework of horizontal and vertical lines that are used to structure and... May 7, 2023 UI/UX -->

What is typeface in UI/UX? Typeface in UI/UX refers to the style and design of the characters that make up text on a website or application. It includes the font family, font... May 7, 2023 UI/UX -->

What is a modal UI/UX? What is a modal in UI/UX design? A modal is a type of user interface that displays content or options in a window that overlays the main screen.... May 8, 2023 UI/UX -->

Where can I study UI/UX? If you're interested in learning about User Interface (UI) and User Experience (UX) design, there are several options available. Here are some... May 7, 2023 UI/UX -->

What is user research UI/UX? User research is a critical part of designing an effective user interface and user experience. It involves understanding the needs and behaviors of... May 7, 2023 UI/UX -->

What is a senior UI/UX designer? A senior UI/UX designer is an experienced professional who specializes in creating user interfaces and experiences that are visually appealing,... May 6, 2023 UI/UX -->

What is the demand for UI/UX? UI/UX design is the process of enhancing user satisfaction by i mproving the usability, accessibility, and pleasure of user interactions with... May 7, 2023 UI/UX -->

What is a landing page in UI/UX design? What is a landing page in UI/UX design? A landing page is a web page designed to persuade visitors to take a specific action , such as signing... May 9, 2023 UI/UX -->

What is Typography in UI/UX design? What is Typography in UI/UX Design? Typography refers to the use of fonts and typefaces in design. In UI UX design, typography plays a critical... May 9, 2023 UI/UX -->

What is a UI/UX Audit? What is a UI/UX audit? A UI/UX audit is a review of a website or app's user interface and user experience. The purpose is to identify any areas... May 7, 2023 UI/UX -->

You haven't yet saved any bookmarks. To bookmark a post, just click .

InVisionApp, Inc.

Inside Design

How to write a UX case study

Sarah doody,   •   jul 19, 2019.

H ave you ever been told your UX portfolio lacks depth, or what you did is unclear, or that it doesn’t seem like you have enough experience, even though you know you do?

Or maybe you landed an in-person interview, it didn’t go very well because you stumbled through presenting and answering questions about your projects. 

These are all symptoms of an underlying problem: your UX case studies are not written well enough. 

After doing at least 100 hours of my own research through talking to UX candidates one-on-one, reviewing portfolios, and analyzing survey data, one thing became clear: UX professionals put too much emphasis on learning how to make deliverables, and not enough on articulating their design decisions. 

When you can’t articulate your design decisions, it will make your day to day role harder, because you won’t know how to deal with pushback. And it will also limit your career options because your ability to write a strong case study is the foundation for creating a strong portfolio and doing well in interviews.

We’re going to go into:

  • The role of case studies in your portfolio
  • The anatomy of a case study
  • The steps to writing a thorough, readable case study

Case studies are the UX application differentiator

It’s no longer enough to just show your work. According to the  Center Centre , the job growth of UX designers is expected to rise 22% over the next 10 years. UX is a hot field, and there’s a lot of competition. 

Your portfolio, therefore, can’t simply be a curation of sexy-looking deliverables. Recruiters and hiring managers need you to articulate your process and design decisions. A key skill for UX professionals is the ability to communicate; in any UX role, you’ll find yourself not just doing UX, but explaining it over and over. 

If you don’t have well-written UX case studies, then how can recruiters and hiring managers trust that you’ll be able to communicate what you did and why you did it if they hire you? 

Writing is a skill that we know is important, but as designers rarely practice or study enough. When it comes to UX case studies, though, the quality of your writing is one of the most important variables in the success of your portfolio.

Let’s be real, writing about your UX projects is not an easy task. However, the good news is that by following the steps that follow, you will clearly understand how to write more clearly.

Anatomy of a UX case study

When approaching your UX portfolio and case studies, my advice is to think like a lawyer. Because how do lawyers win legal cases? With strong communication, and even stronger evidence. 

The projects inside your portfolio are like evidence in a legal case. And that’s why you must choose the projects for your portfolio very carefully. 

Here’s what I recommend including in your UX case study:

  • Problem statement
  • Users and audience
  • Roles and responsibilities
  • Scope and constraints
  • Process and what you did
  • Outcomes and lessons

Want to download a copy of this template? Sign up for Sarah Doody’s newletter and get a free download.

How to write your ux case study.

As you write your case studies, don’t worry about length. Once you get it all on paper you can decide what to put into your portfolio. As you transition your written case studies to something more visual, you will edit them down and also consider how some of the text can be communicated visually.

Step 1. Give your project a title

The big mistake that people make is not giving the project title enough detail when a strong title can give context for the project.

Good: Home Depot user research for mobile app checkout

So-so: Home Depot user research

Bad: Home Depot

Step 2. Write an outline

Lay out your thoughts before you start giving up the details. An outline’s purpose is to help you understand the “big picture” of your project, so you can decide how to structure your case study or if the project is big enough to merit more than one case study.

Start your outline with the seven sections listed above, and start filling in bullet points under each section. Don’t worry about sentence structure; just write and get it out of your head. If you’ve been  documenting your projects as you work on them , then you may have some of this already written.

Step 3. Fill in the details

Now that you have an outline and you see the big picture, you can start filling in details. 

Give the “Process and what you did” section the bulk of your effort. This is where you’ll document the steps you took, just like documenting science experiments in high school. 

You should be answering these questions:

  • What did you do? For example, what research method did you use?
  • Why did you do it?  For example, why did you choose that research method?
  • What was the result?  For example, did you achieve your research goals?
  • What did you learn? For example, what would you do differently next time?

Continuing with our (completely fictional) Home Depot example:

BAD: “ We did usability testing on the checkout of the Home Depot mobile app.”

Why is this weak? Because it only tells the reader what you did. It doesn’t address why you did it, what happened, and what you learned.

GOOD: To evaluate the new checkout on the Home Depot mobile app, we relied on usage metrics in conjunction with 8 usability tests. This allowed us to gain deeper understanding through combining both qualitative and quantitative information. Although users were able to get through the checkout more quickly, they continued to struggle with the shipping section. Discussions with users discussion revealed that often times, products in one order have different shipping addresses, which was possible, but difficult in the current checkout.

This version is much stronger because it goes beyond just talking about what was done. Providing this depth is what will set you apart; articulating your design decisions and process will help position you as a more mature and thoughtful professional.

Step 4. Write headlines

At this point, you’re probably thinking something like “Who would ever read this novel?” Which is a good point. That’s why the next step will help you start to distill everything down so that you are focusing on the key highlights of the story.

The best way to do this is to pretend that you have to write your case study only in tweets. It sounds crazy, but it works.

For each section of the outline we’re working with, write a single headline or sentence—except for the Process section, where you’ll be focusing your energies. For the Process section, you’ll want to have a headline for each step. Using our previous fictitious Home Depot user research example, some of the headlines for the Process section might be:

  • Step: What type of research you did and why you did it. Example: Analytics revealed customers struggled, and sometimes abandoned, checkout at the shipping section. To understand why, we conducted eight usability tests.
  • Step: Findings from the research. Usability tests revealed that business customers, versus residential, had different shipping needs, which were not being addressed in the current checkout experience.
  • Step: Impact of research on product development. We prototyped two new versions of the checkout, allowing customers to choose shipping address on a per-product basis.

By sticking to a 140 character limit, you’ll force yourself to identify the most important points of the case study—which will then become headlines when you create your actual portfolio. 

A good way to test whether or not you have strong headlines is to ask yourself if someone would understand the main points of your project by skimming the headlines. If not, then re-write your headlines—because if you want the users of your UX portfolio to quickly understand your project, those are the most important points.

Step 5. Distill the text from your case study into your actual portfolio

Regardless of the format you choose for your portfolio , your writing needs to be clear and succinct. 

It won’t happen in one edit! Let’s say you’re working in Keynote with slides, your process will look like this:

  • Take the headlines you wrote and place one headline per slide in Keynote. 
  • Consider that you might merge some bits of information into one slide. For example, you might combine your overview and problem statement. It’s subjective, so you decide! 
  • Now, you need to go back and start to pull the most important and relevant details from your case study and put them on each slide, as supporting details or evidence. 

Examples in action

Simon Pan’s UX portfolio website went viral because he had awesome case studies. Yes, he’s also a visual designer so it looks beautiful. But what you need to focus on is the content. His Uber case study is an excellent example, let’s take a look at why it works:

  • Clear problem and framing of the project. Simon’s case study clearly states the problem and frames the project. So even if I’d never heard of Uber before, I’d have enough context to understand the project.
  • Explanation of the process. Simon does this with a story. It’s easy to read and keeps my attention. It feels like a cool article that’s well thought out … not to mention the visual design helps draw key points out. In the screenshot below, he is explaining part of the Discovery process. It sounds like I’m reading an article, therefore it keeps my attention. And the use of a user research quote helps bring the story to life even more.
  • Thoughtful conclusions and reflection. At the end, Simon concludes the case study with some results, reflections, and insights. People don’t just want to know what you did, they want to know the impact of what you did.

What comes next?

If you follow all these steps, you will have a longform case study edited down into something that’s more readable and scannable for the user of your UX portfolio. 

And remember, the UX case studies you write serve many purposes. Of course, they are the foundation of your portfolio, but they also can feed into your resume, LinkedIn, cover letters, and what you say in an interview. 

Want to read more by Sarah Doody?

  • Seriously, you need to start documenting your UX work
  • 4 steps for choosing the right projects for your UX portfolio
  • How to create a UX portfolio without UX experience

by Sarah Doody

Sarah Doody is a User Experience Designer, Entrepreneur, and Educator. She is the founder of The UX Portfolio Formula, a UX career accelerator that helps UX professionals learn how to articulate their work so they can create an awesome portfolio. In 2011, she created the curriculum for and taught General Assembly’s first 12-week UX immersive, the genesis of their popular UX programs which are now taught worldwide.

Collaborate in real time on a digital whiteboard Try Freehand

Get awesome design content in your inbox each week, give it a try—it only takes a click to unsubscribe., thanks for signing up, you should have a thank you gift in your inbox now-and you’ll hear from us again soon, get started designing better. faster. together. and free forever., give it a try. nothing’s holding you back..

How to Write a Case Study If You Are a UI/UX Designer

May 18, 2021 | Posted by admin in Web development

Professional UX consulting firms often display their case studies on their websites. However, writing about your work can be useful even if you are an individual designer who did something extraordinary. 

Reading this post to find out when you need a case study, how to write it, and the typical mistakes to avoid.

what is a case study in ui ux

What is a case study?

A case study is a detailed description of your work process on a particular task. They describe the goals of the project, tools and methodology that were used, your creative process, and the outcome. Properly designed cases will help to attract more clients if you are a freelancer. It is helpful for professional interactive design firms as well because they also present their work to potential clients. 

The benefits of case studies

1. They help to convince a potential client of expertise. If you show the person the result in numbers, this will significantly increase confidence in you as an experienced designer or design agency.

2. Help shape the value of the service. It will be easier for the customer to understand why they pay money and what result they will get in the end.

3. Case studies help to create a personal brand. People often repost well-designed cases. The fame of you will diverge on public VKontakte and groups on Facebook.

When you need to create a case study

There can be many reasons for creating a detailed report, but the main criterion is the presence of a result, measurable in numbers, as well as the feedback of your past customers. But this is not a prerequisite, and there may be other options.

Examples for creating cases for a UI/UX designer:

  • You designed a popular website or other product for a large company.
  • You have launched your own project.
  • Made a complete redesign of the digital product, increasing client income, and resource attendance.
  • Have formed a concept for a new product, for example, an operating system.
  • Failed. Yes, there are anti-cases when you tell how you did a project and, as a result, got very screwed up. Why is this needed? To show that you have learned something new and are not going to repeat mistakes.

what is a case study in ui ux

Where to start writing a successful case

The case is actually self-promotion, so in addition to web design skills, you will need some marketing skills. To get started, make a marketing headline. Most popular formats:

1. Name of the service , for example, redesign of the website for company X.

2. How we (I, if in the singular) did something and brought the customer such and such benefits.

After creating the heading, go to the lead paragraph. It must explain what will be discussed in the case, what task you had, what you did, what difficulties you overcame, how much money you spent and brought to the customer. All this should fit in 2-3 sentences for each point.

Then go to the case itself. Its structure should be as follows:

1. The source data . Here you need to indicate: the customer’s name, the budget for the work, the problem, the task, the starting point of work, the number of employees, the deadline.

2. The challenge . It describes what the goal was that motivated the customer to choose you as their vendor. For example, you develop a mobile application design. Its task is to satisfy the needs of a specific target audience.

3. The process of work . This section details what you have done. It is important to add specifics and facts. For example, you conducted an interview and interviewed 15 people, asking eight questions to each. You got the answers and made a list of pains for the target audience. After that, you began working on the design and creating concepts.

4. What difficulties have arisen? This chapter describes the difficulties you encountered during the development of the UI/UX design for your product. 

5. What happened in the end . Describes the result that arose from your actions. For example, you have successfully created a web application design for your company’s target audience. Conducted A / B testing, found out the effectiveness of the design. After some time, the attendance was calculated for the day/month, indicating how much money the customer received due to a well-thought-out design. 

6. Conclusions . This briefly describes the entire process of the case from beginning to end. Describes the tools that were used in work. It describes what results you have achieved.

You can improve the case study using storytelling, for example, how you encountered difficulties, tried to solve a problem, went on a hike to unwind, and this helped you to find a fresh solution.

A case study is an effective way to show your competencies. A well-formed case will significantly increase your chances of finding a customer. 

Share Article:

Latest posts.

what is a case study in ui ux

Enhancing Organic Visibility for Digital Marketers: Exploring Neural Search and Semantic SEO

what is a case study in ui ux

5 Key Strategies to Improve Cybersecurity in Your Organization 

what is a case study in ui ux

Business Decision Dynamo: Your Ultimate Guide to Smart Workforce Choices

what is a case study in ui ux

Building Your Cyber Security Career: 5 Vital Strategies to Secure Your Job Position

what is a case study in ui ux

Virtual Receptionist Revolution: 6 Tips for Seasonal Success and Customer Satisfaction

what is a case study in ui ux

Stay Ahead in Technology: 6 Winning Strategies for IT Outsourcing 

what is a case study in ui ux

How Effective Web Development Propels Business Success

what is a case study in ui ux

IP Address Monetization: Turning Digital Assets Into Dollars Through Leasing

what is a case study in ui ux

How To Find The Right Services For Strategic Digital Marketing

what is a case study in ui ux

  • 🇺🇦 #StandWithUkraine
  • Reviews / Why join our community?
  • For companies
  • Frequently asked questions

what is a case study in ui ux

How to Write the Perfect Introduction to Your UX Case Study

It’s tough to write beginnings, isn’t it? It can be especially difficult to write the introduction of your UX case study, since it will determine the success of your job application. What should you include? How do you make a good first impression? Fret not! We’ve got you covered here. Your introduction should include 3 key components: a design problem that involves a business need, your approach to solving the problem as well as your role in the project. Let’s go through what exactly you should include in your UX case study’s introduction. We’ve even got a step-by-step exercise you can follow!

What’s the Role of Your UX Case Study’s Introduction?

Before we begin writing our UX case study introduction, we should first understand the role it plays. We can divide your UX case study into 5 parts, based on the German playwright Gustav Freytag’s 5-part dramatic structure:

Exposition : Where you introduce key information and set expectations for the rest of the story.

Rising action : Where you bring the reader through your strategies that lead to a climax.

Climax : The peak of your story, a “wow” moment where, for instance, you uncover an unexpected insight.

Falling action : Where things fall into place and lead to the final results.

Resolution : Where you reveal the final product of your project and round your story off in a satisfying conclusion.

what is a case study in ui ux

Your UX case study should follow Freytag’s 5-part dramatic structure. Author / Copyright holder: Teo Yu Siang and the Interaction Design Foundation. Copyright terms and license: CC BY-NC-SA 3.0.

We can group Freytag’s 5 parts into 3 main sections: an introduction, a middle and a conclusion. As you can see from the image above, your UX case study’s introduction should include “exposition”, where you set the stage for the rest of your story to happen.

In other words, your UX case study’s introduction should let your recruiters know the problem you’re solving, the strategies you adopt and your role in the project. This way, you’ll provide all the context your recruiters need to evaluate your skills and appreciate what you’ve achieved in your project.

3 Essential Components of Your Case Study Introduction

Your UX case study introduction should thus contain:

A problem statement: Highlight the key problem you’re going to solve—preferably in relation to business objectives or metrics. What motivates you to take on this problem? What are your thoughts and feelings about it? If you’re revamping an existing webpage or app, then show some screenshots of how it looked and point out the problems.

Your solution: Run through your approach to solving the problem. Give your readers a taste of what to expect at the end of your story—what deliverables or final output will you produce?

Your role: Let your readers know how you have contributed to the project. Your role in the project should be linked to the job you apply for. For example, if you apply for a UX researcher job, then ideally you should have played a UX research role in your case study project.

Your introduction should be 4–5 sentences long. This ensures that your UX case study is short and sweet, since recruiters usually spend no more than 5 minutes reading your case study. However, as we’ll go through below, you shouldn’t worry about word count when you begin to write your introduction. Focus on content first, then cut down on words later.

Next, we’ll go through the best way to write the problem, the solution and your role in your introduction. After that, we’ll take a step-by-step walkthrough of how to write your introduction, so you can get started immediately. Let’s begin!

1. How to Write Your Problem Statement

Your problem statement should explain what you’re trying to solve, provide you with a strong motivation and outline the main challenge involved. It should read something like: “I wanted to [solve this problem], because [of my motivations]. This problem is particularly challenging since [describe my main challenge].”

Tie your problem statement to a business problem whenever possible. Remember, recruiters hire you to bring value to a business. Show you understand that a designer’s role is not only to provide a great experience for users but also to create value for an enterprise.

Here’s a problem statement that’s tied to a business problem:

“We launched a feature ‘X’ 2 months ago, but realized that many people were not using it because they didn’t know it even existed. I wanted to increase its discoverability , because ‘X’ will help open a new stream of revenue for our app .”

The bolded part in the example above provides a strong link between your project and the business value it provides. Compare this with the following bad problem statement:

“I set out to do a complete visual overhaul of the Podcast App so that it looks fresh and provides an exciting user experience .”

Notice what’s missing? This problem statement lacks a business-oriented “why” to it—as a result, the designer has an unclear (i.e., poor) motivation. Why did the designer do a visual overhaul of the app, other than to make it look “fresh”?

Let’s improve this problem statement by adding a compelling, business-centric motivation:

“The Podcast App is a leading podcast app, but its design looks outdated compared to its competitors . With such tight competition in the industry , a visual overhaul is long overdue. I thus set out to reimagine the Podcast App so it can maintain its lead in the years to come .”

See how much more compelling it sounds? Now you understand why it’s so important to redesign the app—its market position will likely be overtaken by a better-designed competitor!

Of course, a personal motivation works, too. For instance, you might have designed a website to solve a personal problem you face every day. Personal motivations can be equally powerful drivers of your UX case study. However, we encourage you to include at least one case study in your portfolio that has a business-oriented motivation , because that’s what recruiters love to see.

Lastly, don’t be afraid to show your emotions! Were you nervous to take on the project because of its high stakes or anxious because it was the first project you led? Showcase your humanity in your problem statement. A bit of vulnerability can make your story powerful and relatable.

2. How to Write Your Solution

In the solution portion of your introduction, give your readers a taste of what to expect. Since this is just the introduction, you don’t have to fully describe your design process or solution. Instead, briefly mention the design process you used.

Mention the key deliverables of the project. This serves as the light at the end of the tunnel, so readers know what to expect at the end. If you’ve created an interactive prototype, make it known right at the introduction to your UX case study.

Here’s a solution statement in the introduction of a case study:

“We ran 2 weeks of design sprints based on the design thinking methodology, which includes 5 stages: empathize , define, ideate , prototype and test . We eventually created and shipped a fully functional app where people can learn English in as little as 15 minutes a day.”

In the example above, we highlighted the design process we will use—namely, the design thinking methodology. We also briefly went through the 5 stages of the design thinking process and mentioned that the final product we created was a functional app. In 2 sentences, the reader can get a holistic summary of the project.

3. How to Write About Your Role in the Project

This is one of the most important parts of your introduction! If you remember just one thing, let it be this: clearly state your role . Your project might be amazing, but if the recruiter does not know how you’ve contributed to the final results, they’ll not know whether to hire you. In a field of equally qualified candidates, it can make that final difference as to whether you get invited to the interview or not. So, remember to include what you’ve contributed ( and what you did not contribute) to the project.

As UX designer Mike Curtis says, you’ve got to have a balance of “I” and “we” in your UX case studies . This means that in your introduction, you have to present yourself as a team player and also make it clear what you bring to the table. Your recruiter is going to hire you , not your team!

There’s a balance where you need to stay in the spotlight, but gracefully. So, don’t be overly generous with mentioning others (which looks fake), but don’t make yourself seem like a lone wolf. Recruiters like to see self-confident designers who can work well in teams. What if you’ve worked alone on a project? In such a case, give credit to anyone who’s helped you along the way—for instance, someone who critiqued your design.

At the same time, make sure your role in the project is crystal clear. For instance, if you helped to conduct user research and usability tests in a project, you could write something like:

“I conducted initial user research and defined key personas , and also helped evaluate our designs through usability tests before it was launched. The amazing Victor Johnson helped create the interaction design of the final product.”

A 5-Step Guide to Writing Your UX Case Study Introduction

Still feeling a little lost? Don’t worry, we’ve got your back. Follow these steps, and you’ll quickly get past the “blank page” wall that so many of us face when we start to write!

Step 1: Open an Empty Word Processor

Go ahead and open your favorite word processor.

what is a case study in ui ux

Ah, the empty page: one of the most intimidating enemies of a writer. Author / Copyright holder: Google. Copyright terms and license: Fair use.

Step 2: Create 3 Subheadings

In your document, create the following subheadings:

The problem

The solution

As we’ve discussed above, these are the 3 main components you should include in your introduction. When you create the subheadings, you’ll not only guide yourself but also quickly move away from the blank slate of an empty document.

what is a case study in ui ux

See? It’s much better already! Write down these subheadings to fight the “blank page” monster. Author / Copyright holder: Google. Copyright terms and license: Fair use.

Step 3: Fill the Subheadings Up

Start filling the 3 sections. Look at our guidelines for each section above or download our nifty template at the bottom. Type in full sentences. And, for the time being, don’t worry about your word count.

Remember to think about the visuals you can add to your introduction, too! For instance, if your case study is about a redesign of a page, it’ll be great if you include some screenshots of the existing design to highlight the design problem.

We’ll create a hypothetical UX case study introduction so you have a reference. In this made-up scenario, we want to write about a project where we created a new design system for a web-based app. We’ll focus purely on copywriting since we don’t have any visuals to provide (it is, after all, our hypothetical project), but you should also pay attention to screenshots and images in your introduction.

Here’s a rough draft of the introduction:

The problem: [Product] is one of the most established English-learning platforms in the world. However, the design of [Product] looks increasingly outdated when compared to its competitors, and parts of its user experience fell short of expectations. An overhaul feels long overdue and will help ensure that [Product] can remain competitive in the long run. The solution: We set out to completely overhaul [Product]’s look and feel and created a unifying design system that merges usability guidelines and aesthetic appeal. These changes impacted every corner of [Product]’s website, including key interactions. My role: I led the entire project and worked on creating the visual design of the new design system. I also revamped the UX of key pages and worked on motion design, while my developer colleagues applied their magic to help implement the entire project.

Step 4: Refine Your Draft

As you might have noticed, our first draft is a little long. Remember that we’re aiming for 4–5 sentences in the introduction. At this stage of the process, refine your draft. Cut down on words and improve your writing. Use the active voice and write in a conversational style. Add images and other visuals, if you haven’t already done so.

Here’s a second iteration of our introduction, this time polished and shortened to 5 sentences:

The problem: [Product] is an industry-leading English-learning platform, but its design looks outdated compared to its competitors and parts of its user experience are unpolished. An overhaul is overdue and will ensure [Product] remains competitive in the long run. The solution: We set out to create a brand-new design system to ensure [Product] encompasses best-in-class usability and aesthetics across all corners of the app. My role: I led the project and worked on all aspects of the new design system, including its visual, UX and motion design. I also revamped the UX of key pages while my developer colleagues helped implement my designs.

Step 5: Remove the Subheadings (Optional)

You can choose to leave the subheadings (The Problem, The Solution, My Role) if you like, but we feel they aren’t necessary and should be removed. In any case, you’re done! Congratulations on writing a great introduction for your UX case study!

Here’s what our hypothetical introduction looks like:

[Product] is an industry-leading English-learning platform, but its design looks outdated compared to its competitors and parts of its user experience are unpolished. An overhaul is overdue and will ensure [Product] remains competitive in the long run. We set out to create a brand-new design system to ensure [Product] encompasses best-in-class usability and aesthetics across all corners of the app. I led the project and worked on all aspects of the new design system, including its visual, UX and motion design. I also revamped the UX of key pages while my developer colleagues helped implement my designs.

In 5 sentences, our introduction:

lays out the problem we want to solve;

provides a business-oriented motivation behind the project;

briefly describes the scope of the project and its end result; and

clearly delineates my role in the project while acknowledging the support of my team.

Do a few more rounds of iteration on your introduction if you have time. There’s always room for improvement! Our sample introduction, for instance, did not contain any emotional aspects of taking on the project. Could we include that while keeping the word count at 5 sentences?

Download Our Step-by-Step Guide to Get Started Now

We know that it can be difficult to start a writing project. But the best way to get started is to do it—now! Download our step-by-step template and start working on your UX case study today:

Get your free template for “5-Step Guide to Writing Your UX Case Study Introduction”

5-Step Guide to Writing Your UX Case Study Introduction

As you write your UX case study’s introduction, know that it will mark an important milestone in your lifelong journey of writing. That’s because you’ll not only create a key artifact that will help you get a new job but also hone your craft in one of the most important elements of design: writing.

Good luck, and we hope you’ll fall in love with writing!

The Take Away

Your UX case study’s introduction should set up the context required for the reader to understand your project and evaluate your skills. Given that, you should include these 3 components:

The problem you’re solving in your project. This should include your motivations for taking on the project, which should preferably involve a business need.

The solution to the problem. You should bring your reader briefly through how you’ll solve the problem, and mention the final deliverables you’ve produced.

Your role in the project. You’ll rarely be the only contributor to a project, so you must be sure to highlight the specific things you brought to the table and give credit to your team-mates where it’s due.

References and Where to Learn More

If you need a quick lesson on how to write effectively, check out our handy guide here .

Mike Curtis shares 10 tips on how to write great UX case studies , including the need to look for “I” and “we”.

Hero image: Author / Copyright holder: Kaitlyn Baker. Copyright terms and license: Unsplash License.

How to Create a UX Portfolio

what is a case study in ui ux

Get Weekly UX Insights

Make design better: share this article, what you should read next, the top ux design books you need to read in 2023: beginner to expert.

what is a case study in ui ux

AR Heuristics to Avoid Common UX Pitfalls

what is a case study in ui ux

15 Inspiring UX Quotes for Innovation and Design

what is a case study in ui ux

What is a UX Portfolio?

what is a case study in ui ux

Spatial UI Design: Tips and Best Practices

what is a case study in ui ux

Rule of Thirds: The Definitive Guide & Examples

what is a case study in ui ux

Bad UX Exposed: A Comprehensive Guide to Avoiding Pitfalls

what is a case study in ui ux

How to Write Great Case Studies for Your UX Design Portfolio

what is a case study in ui ux

  • 2 weeks ago

Rapid Prototyping, Faking It Until You Make it in a UX Driven World

what is a case study in ui ux

  • 3 weeks ago

How to Make Full Use of Your UX Design Portfolio

what is a case study in ui ux

New to UX Design? We’re giving you a free ebook!

The Basics of User Experience Design

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

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

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

  • mindful design
  • student success
  • product design
  • ui/ux design
  • watch me work
  • design careers
  • design inspiration

Ultimate Recipe For A Magnetic UX/UI Case Study

As UX/UI and product designers, the most important instrument we have as designers to propel our career forward and to attract desirable jobs, clients and projects, lies in our ability to effectively showcase and explain the work that we’ve done. For a UX/UI designer, case studies are the main way in which we do that. Contrary to popular belief however, it’s not enough to simply list the projects you’ve worked on, show your deliverables and talk about your process.

In this guide, I’ll go into how to write an irresistible case study and what you should and shouldn’t be including in your UX/UI case study. I’ll also show you how to gather the information more effectively, how to build your portfolio website more efficiently and how to lay everything out to achieve a magnetic result that speaks to clients, recruiters and employers.

So first, let's cover the basics.

The difference between a portfolio and a case study

A design portfolio is a collection of projects that a designer has done. A simple portfolio may just include images of your work, a title and a short project summary.

A case study is an in-depth breakdown of a single project that a designer has done. A UI/UX case study can range in detail, but is commonly used to showcase the intricacies of a designer's problem solving and visual design skills. Case studies can be created as stand-alone examples or included in a portfolio. Case studies are particularly important for UI/UX and product designers because so much of what employers and clients want to see is not just what we do, but how and why we do it. An in-depth case study is a designers best chance of illustrating that.

Having done more design portfolio and case study reviews than I can count now, I can always tell when someone has created a case study as an afterthought or tried to reverse engineer their work to suit some case study template, job description or example of what they think an ideal UI/UX case study should look like. There is something in the way the study progresses and the language used to describe the process that just doesn't feel natural.

Normally, the issues I see fall into 1 or more of the following categories:

  • It's too heavily focused on the designer and their skills and not enough on the audience and the value the designer brings.
  • It is missing details, continuity and a sense of narrative.
  • It focuses too heavily on storytelling and not enough on results, outcomes and value.
  • It's too analytical and only focuses on data and metrics with no story.

The most effective case studies I've seen are the ones in which the designer is able to really capture the circumstance in which the project unfolded; their experience, their struggles, the relatable moments that happened while they were working on it and most importantly-- the outcome and the value of that outcome. The most interesting case study examples I've seen are not the ones that go into every detail about what they did, but focus on how they did it; how they came up against a wall and used their critical thinking, empathy and design skills to get them out of the problem and into a solution that worked.

If that's all a bit theoretical, here is an example of what I mean (paraphrased from actual case studies I've seen)

How not to write a case study

Case study number 1, step 1: user research.

I started out with ideating on a concept and then began to empathize with our users by talking to them and conducting ethnographic studies. I created some personas and an empathy map to share with the team.

user persona

Step 2: Defining the solution

After gaining some insights from the data I collected, I began to define a solution. We went through a few iterations to address the problem of how to help people make the perfect omelet. I used Sketch and Invision to rapidly create prototypes and adjust based on user feedback until I designed final high fidelity mocks.


How to write a case study

Case study number 2.

My grandfather always told me never to salt my eggs before they go in the pan.

"Too runny," he would say, holding one hand on the panhandle and the other on my head. "Your omelet will slide off your spoon."

My Mom, on the other hand, always added salt before the pan.

And milk. And chives. And maybe some pepper flakes, too.

My sister was rebellious. "Add cinnamon," she would say. "It gives the eggs some bite!"

And my Dad? Don't even get me started on him. I'm still coughing up shells from yesterday's brunch.

These experiences ran through my head this morning as I flipped an omelet over my stove.

Each of my family members had his or her own uniquely 'perfect' omelet.

So, how do you direct someone to make the prefect omelet? This was the first insight I set out to discover by talking to potential users.

I learned from my interviews that a sense of control over customization was a really important outcome to our persona and so I set out to enhance flow leading up to that result.

By making a few changes to our flow, we were able to convert 5% more visitors ro checkout!

user flow

This scenario is based off of this article by Jeremy Navarro.

Which one of these did you find more interesting and effective? In Case Study Number 1, you can see how this could have been written by any UI/UX designer that simply spent a few hours reading up on the 'design thinking' process. However with Case Study Number 2, it's clear that they have a very unique perspective and problem solving mindset that a company with a similar culture and need would gravitate towards.

Do the hardest part first

The hardest part for some can be the written part of their case study. The struggle to find the right words can be time-consuming and uncomfortable for many.

So how exactly do you go about capturing a case study and writing a narrative that connects?

For those starting a new case study

The most efficient way to write your case study is to start by creating it the moment you begin your project. The trick, is to set aside small amounts of time to document your process and thoughts and be mindful while you are doing the project .

For those doing a case study in retrospect

If you've already completed the project and are putting together your case study in reverse, there is a tendency to start by digging through our hard-drive trying to find copies of deliverables and trying to remember what the process was that you used to create them. Instead, I recommend starting with the content first and thinking back to how you were feeling and experiencing rather than what you were doing.

For those doing a hypothetical case study

If the project you are working on isn't being shipped and allowing you the ability to gather real world data then how do you show and communicate the value or outcome of what you're doing? One trick that I like to call aligning value by association. Before you choose a project to work do some research about how other successful companies or real world case studies have solved that problem. If you are designing an onboarding flow, take a look at a similar flow done by Uber for example, if they have published the result or outcome of their redesign than you could simply design your own onboarding flow and reference the Uber results be saying "The power of testing, measuring and iterating on your product's onboarding flow can be significant, with just a few small UI tweaks to their onboarding flow using a similar process you see here, Uber increased customer retention by 20%!" Even if you don't have your own real world outcomes yet, if you take the time to study and understand the outcomes of successful product companies and designers, you can align the value with what you do by association.

It's all in the how

Whether you are documenting as you go or thinking back about what you did on a past project, the key is to capture not just what you are doing, but how you are doing it and most importantly the feelings anxieties and thoughts you had along the way, this is what will help you step back into the mindset that your were in when you were doing it and allow you to reflect on your process more accurately and easily.

The thing that separates one designer from another is all in the HOW. By taking this approach, you'll be less likely to be lost for words because you'll be recounting your actual feelings and thoughts rather than trying to think about it from an outsider's perspective.

Here's is my 10 step process for creating an irresistible case study every time:

  • Define your process or methodology - Did you use the design thinking process, did you conduct a lean sprint, or was it more of an agile or scrum process? Maybe a hybrid of or combination? The steps in which you went about developing your project most likely involved some combination of user research, design, testing, and implementation and while it's not imperative that you follow the exact steps in any given methodology, it does help you create a more universal point of reference around our process when other others can identify it and relate to it.
  • Document everything - We tend to get so busy and focused on the project at hand that we tend to overlook the importance of documenting the process. This is why I highly recommend setting up some sort of project management software - like Notion before you begin. Create the main structure outline of pages and folders based on your process that you've decided on in step one and continuously add to that. Write your interview questions, upload your user personas and keep everything in order and in one place. Take snapshots of your wireframe sketches if you're doing them on paper, maybe capture a screencast of an interview with a user (with their permission of course) these behind the scenes moments become the building blocks of your case study.
  • Keep / write an experience journal - One of the most important parts that is almost always done in retrospect is the storytelling. You have a process and you have documented the steps you've gone through and the deliverables you've created at each stage and now it's time to create the narrative that ties it all together. The trouble is that in hindsight you really loose or forget some of the more visceral reactions and experiences that you had when you going through the process. So at the end of each day I like to take just 10 minutes to write a summary of my experience of the project. Did you feel lost during a user interview and unsure of the right questions to ask. Did you discover an insight that you didn't expect? Did you struggle to create the right layout for your landing page? Whatever happened write it down like you would in a personal journal. Again if you are doing your case study in reverse then make sure to tap into those same experiences as if you are reliving the project as best you can and write it down.
  • Choose a platform for your case study - There are no hard and fast rules about where you should host your case study what matters is that it is most accessible to the audience that you intend to see and that it's  somewhere that you can easily maintain and update based on your technical skill level. If you aren't a programmer use a content management system like wordpress or if you really are not technically savvy a no-code solution like Notion , Behance, Medium or even just a PDF. You don't need to get complicated, because chances are if you do, you will never update it and the whole point of creating a case study is to get it out there!
  • Video Enhancement - If you really want to stand out and if you have the time and know-how, consider creating a short video about your project and your process.
  • Always include outcomes - Truth be told, potential employers and clients are not particularly interested in your skillset or services in and of themselves, they view you and your skills as investment in their product and they want to understand what that return on investment will be. So it's important to clearly communicate how your skills and your services equate to value. Did the shopping cart flow you designed result in more signups? How many more? If you didn't work on a real project with real outcomes then I suggest you piggy back off of the outcomes of others. For example if you did an exercise where you designed an onboarding flow you could say that by streamlining the onboarding flow, companies like Notion and Youtube saw increased engagement of 40%. No matter how you show it, always focus on value and outcomes of your process.
  • Gather testimonials - If the project ends well and your client, boss or coworkers were happy with your contributions, ask them for a quote just as soon as sign-off happens. Things move so quickly that people will be onto the next thing before you know if, so capitalize on the opportunity to get some good feedback for your portfolio
  • It's okay to show failure too - If you worked on a project and the outcome wasn't favorable, lean into it. Case studies that illustrate what didn't work can be just as valuable to a potential employer or client as only showing what worked. It can serve as an admonition and frame you as a preventive asset to help a product avoid common pitfalls.
  • Focus on your niche - If you don't have 5+ years behind you of working on a variety of in-depth, real world projects and you don't want to spend that many years accumulating that much content for your portfolio then the counterbalance to that is to niche down. If you have one great case study working on a Fin-tech project then try and do one or two more in the same industry. This can help you position yourself as fin-tech designer and will attract those types of recruiters and opportunities to you. Employers and clients want to match what they are trying to do with what you are doing and this is a clever way to get yourself to align with that.
  • Share your journey with others -  Join communities like IndieHackers, Slack channels, Linkedin groups etc and share the lessons you've learned, the insights you've gained or start conversations around the difficulties you encountered. This will help get your case study out there and also help establish a network and authority around your work.

Now that you've captured the story you want to tell with your case study and have gathered the necessary information, what about the actual layout? How should it all be presented?

Case Study Requirements

Many UI/UX and product designers get a bit hung up on how their case studies should be laid out. The trouble with being prescriptive is that there is no one right way or preferred way to do it. That's because this part does not depend on you, it all has to do with the audience. The following steps will help you define that.

Just as you would not create a product for a user you know nothing about, it isn't wise to create a case study for an employer, recruiter or client you know nothing about.

Step 1: Research your audience - If you are mainly trying to attract private freelance clients that need a specific user flow designed they will be looking for different things than a recruiter who isn't intimately familiar with the nuances of design thinking processes and is just skimming the highlights.

Step 2: Define your audience persona - In order to make sure your case study is aligned with your audience's needs it can be helpful to define a persona for them (the same way you would for your UX work). This will help you to understand their problem and what they are looking for in a designer. Looking at job application requirements and doing some due diligence on the company or industry is a good way to do this.

Step 3: Show what your audience wants to know - In general, whether it's a client or recruiter they tend to be looking for a few main things:

  • Is their work relevant to what we do?
  • How much of this project were they responsibly for?
  • Do they understand our industry and the problem we are solving?
  • Did their solution solve the problem and what was the outcome?
  • Does their skillset align with our job requirements?

UI/UX and Product Design Case Study Outline and Template

The following outline is based on the 100s of students I've taught and insights gathered from top design recruiters and successful design hires from Facebook, Amazon, Uber, Twitter, Apple, Google, LinkedIn and Dropbox.

At a high-level, your case study should include:

  • Project Title and Subtitle
  • Your role / responsibility level
  • The client name / company
  • The industry that the product is in
  • Project Overview / Project Scope
  • The problem you are trying to solve
  • The goal / objective you are trying to achieve
  • The challenges and constraints that you faced
  • Key metrics and how you measured your proximity to that goal / objective
  • The solution - Illustrate your method and process of solving the problem, show deliverables
  • Results - What was the outcome? Was it success or not? What was the value that your work provided to the company?

If your case study is aimed at recruiters for example, it's a nice idea to have a TL;DR section at the very top that shows the problem and the solution right away before you start going into the nitty gritty of your process. Some recruiters see 100s of case studies a day so make their life easier by showing the important key insights front and center.

UI/UX and Product Design Case Study Examples

After working with many designers throughout my own career and helping many more build their job ready portfolios, there are a few case studies that I keep coming back to for inspiration and some that are inspiring a new generation of UI/UX and Product Designers to enter the field.

what is a case study in ui ux

Case Study Presentation Format

Not sure where to host your portfolio or what platform it should be on? Maybe you want to create a full website for your portfolio and case study on a CMS like WordPress or SquareSpace or perhaps you want to use a 3rd party app like Behance or Medium. Maybe the best solution for you is just a simple PDF. Go back to the research you did on your audience or job posting and try to understand what format they would most like to see your work delivered in. At DesignerUp our students enjoy using Notion as their first step into creating their portfolio and case studies, it's kind of the best of all worlds. Here is a video that shows you exactly how I set that up and the pros and cons of each format.

Case Study Template

Wanna save yourself a ton of time? You can download our 1-click Notion templates used by our DesignerUp Product Design students that is helping them land their dream roles!

what is a case study in ui ux

Don't have any projects for a UX case study yet?

And if you really want the full experience of learning UI/UX and product design with guided lessons and portfolio creation come checkout our Product (UX/UI) Design Course

what is a case study in ui ux

Creating a great case study isn't easy, but with a little foresight, research and planning you can create something truly exceptional that makes you and your work stand out.

What to read next

what is a case study in ui ux

The best design resources, in your inbox

Tips, tricks, articles and freebies. It's all happening in the DesignerUp Newsletter. View the archives →

We'll only send the occasional email and promise not to spam.

© Copyright 2023 DesignerUp. All Rights Reserved.

what is a case study in ui ux

Free web & app prototyping tool

Free online wireframing tool

Design tool for UX team

Prototyping offline software

A rapid desktop prototyping tool

Import Figma, Sketch, XD and PS files

Get all the assets, specs and code

Manage projects and product updates

what is a case study in ui ux

Mockplus - Design Faster. Collaborate Better.

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

what is a case study in ui ux

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. 

UX Case Study Example

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

Perfect Recipe

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

GnO Well Being

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. - 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 

Talent Envoy

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

My Car Parking

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

Parking Finder App

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

Pasióon dDel Cielo

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

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

Receipe App

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

Bee Better

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

Sit My Pet

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

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

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

what is a case study in ui ux

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

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ée Website

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

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

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.  

what is a case study in ui ux

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.

what is a case study in ui ux

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

what is a case study in ui ux

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

what is a case study in ui ux

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

what is a case study in ui ux

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

what is a case study in ui ux

Related Content

what is a case study in ui ux

Design Faster. Collaborate Better.

Designing the best user experience. Mockplus does it all!

what is a case study in ui ux

Interactive prototyping

what is a case study in ui ux

Unified collaboration

what is a case study in ui ux

Scalable design systems

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

what is a case study in ui ux

  • Online Degree Explore Bachelor’s & Master’s degrees
  • MasterTrack™ Earn credit towards a Master’s degree
  • University Certificates Advance your career with graduate-level learning
  • Top Courses
  • Join for Free

7 UX Designer Portfolio Examples: A Beginners Guide

Get inspiration for your entry-level UX portfolio with real world examples.

[Featured image] A smiling woman in a black shirt and necklace sits at her laptop and works on her UX portfolio in a brightly lit office.

How do you build a UX design portfolio with no experience? This is a common problem for beginning UX designers looking for their first paying job. Luckily, crafting a stellar portfolio that shows off your skills before you’ve ever had a paying client is possible.

In this article, we’ll walk through seven types of portfolio case studies you can add to your portfolio that doesn’t require you already have a job. We’ll also look at how working UX designers present these types of case studies in their portfolios and offer some takeaways and tips for making your portfolio shine.

To get started, let's look at some general guidelines and best practices for your UX design portfolio.

UX case studies for your entry-level portfolio

Just because you’ve never completed UX design work for a paying client doesn’t mean you have to apply for your first job with an empty portfolio. These seven types of UX case studies make excellent portfolio material for UX designers looking to get their start in the industry.

1. The course assignment

Sometimes, the first project to go into your portfolio will be a UX project you worked on as part of a design course , UX bootcamp , or degree program. These types of projects often simulate real-world situations by giving you the constraints of a brief to work from, as well as teammates to collaborate with.

Including a course assignment or capstone project in your portfolio can demonstrate your ability to:

Work with the constraints and challenges of a brief

Design on a fixed timeline

Collaborate with a team

Incorporate feedback into design iterations

Portfolio example: Phyllis Liu - Autonomous Ridesharing

Screenshot of Phyllis Liu's portfolio page

Courtesy of Phyllis Liu

Phyllis Liu, a Seattle-based UX designer who has worked for Facebook and Shopify, designed an autonomous car ridesharing experience as part of a project for a course at the University of Washington. In her case study, Phyllis is upfront about the constraints of the project, as well as what her team chose to focus on and why. 

Scope of work chart for the Autonomous Ridesharing case study

Scope of work chart for the Autonomous Ridesharing case study

For example, the team decided to focus their efforts on solving two specific user pain points—namely finding the car and starting the ride without a driver. The case study walks through the project’s user research, product design iterations, validation through user testing, and user journey map before wrapping up with key takeaways and lessons learned.  

Best practices:  

Outline your role in the project and who else contributed. Mention what tasks you worked on.

Be clear about the scope and limitations of your project. What isn’t in the design, and why? Include a section outlining next steps if you were to continue the work.

Choose student projects with realistic constraints and real business value. Acknowledge any unrealistic elements in your case study. 

Upon completion of the Google UX Design Professional Certificate from Coursera, you’ll have three end-to-end projects for your portfolio: a mobile app, a responsive website, and a cross-platform experience. Follow the link to get started for free. 

2. The unsolicited redesign

An unsolicited redesign (sometimes called an uninvited redesign) is an excellent way to show off your skills before you ever land your first job as a UX designer. Pick an app or website that you’re familiar with, and make it better through your design process. 

An unsolicited redesign gives you the structure of an existing product to start with—including an established target user base—while allowing you to put your user experience skills to work. This type of project is great for:

Developing UX skills for new designers

Establishing familiarity with the design process

Building your first portfolio case study

Portfolio example: Shu Jiang - Houzz

Screen capture of portfolio page of Shu Jiang, a product designer at Google

Courtesy of Shu Jiang

Shu Jiang, a product designer at Google, includes an excellent example of an unsolicited redesign of the app Houzz in her portfolio. She starts by outlining the challenge she set for herself, then walks through the steps of her design process, with plenty of images to document her work. 

She includes affinity maps, a user persona, task flow chart, and low-fidelity, high-fidelity, animated, and clickable prototypes. She even validates her design decisions by testing her clickable prototype with users.

High-fidelity prototypes from an unsolicited redesign of Houzz

High-fidelity prototypes from an unsolicited redesign of Houzz

Best practices: 

Clearly indicate that this is an unsolicited redesign and that you have no affiliation with the company.

Work through the entire process, including user research (your friends and family can be your first test subjects). Resist the urge to simply redesign the interface.

Be respectful of the original designers, and try not to insult their work. Remember, they were working with a brief and real-world constraints. 

3. The passion project

Another option for a case study you can complete without any formal UX design experience is to build a concept app or website from scratch. Think about a problem in your own life you wish had a solution, or an app you’d love to have on your phone. Then design it.

This can be more challenging than an unsolicited redesign, as it lacks the inherent structure and constraints of an existing product. But it’s also an opportunity to let your creativity shine. 

Portfolio example: Jeremy Stokes - Cultivate

Portfolio screenshot of Jeremy Stokes, a former Google UX intern and current product designer at Duolingo

Courtesy of Jeremy Stokes

Jeremy Stokes is a former Google UX intern and current product designer at Duolingo. His passion project, Cultivate, lays out a clear problem to solve: there’s a stigma around talking about mental health, particularly within the Black community. His solution? A service that uses plant care as a method to empower users to cultivate (and talk about) their own mental health. 

User journey map from the Cultivate case study

User journey map from the Cultivate case study

Jeremy begins his case study by introducing the service, then takes you behind the scenes to see his design process. His case study includes his research methods, market analysis, detailed user persona, user journey map, and lots of early sketches and website iterations.

Jeremy also highlights his visual design strengths with a full brand guide that highlights the meaning behind his design choices. (including typography, color palettes, logos, and visuals).   

Best practice:  

Focus on solving a real problem. Outline that problem and how you went about solving it in your case study.

You may not have a huge budget (or any budget at all) when working on a passion project. Be sure to mention what you would have done differently if you did. 

Choose a project you care about. It’ll make the time and effort you put into it much more worthwhile.

4. The hackathon

During a hackathon, a group of designers and programmers get together to collaborate on a project. The idea is to have a functioning piece of software by the end of the competitive event, usually constrained to 24 to 72 hours. 

Attending a hackathon allows you to design a real app while collaborating with a real team of other designers, developers, and engineers. A hackathon project in your portfolio can demonstrate that you can:

Think critically and solve problems under pressure

Be a team player

Prioritize important features and tasks

Example portfolio: Yang Qian - Matchy

Screen shot of portfolio page for Yang Qian, a product designer at Palantir Technologies

Courtesy of Yang Qian

Yang Qian, a product designer at Palantir Technologies, presents a case study from a three-day LinkedIn hackathon for design and engineering students. Her team’s challenge was to design an app to help college students better connect with their classmates. The result? Matchy. 

Yang presents the challenge, team, project duration, her role, and the skills she used to get it done in a clear and easy-to-read format. This case study does an excellent job of laying out user research findings. Short videos present user task flows in a way that doesn’t rely on big blocks of text.

Taskflow chart for Matchy case study

Taskflow chart for Matchy case study

After the event, Yang even added an illustration showing how the app would bridge the gap between user experience and business value based on feedback from hackathon judges. 

Polish your hackathon project before presenting it as a case study (and acknowledge that you did so).

Focus on process over finished product. This is your opportunity to show hiring managers how you think under pressure.

Include any positive feedback from the judges, even if your project didn’t ultimately win.

5. The volunteer project

Another way to add real client work to your UX portfolio is to complete one or two small projects pro bono. Perhaps there’s a non-profit organization, school, or small business in your community that could use a website or app redesign. 

Keep in mind that many nonprofits and small businesses may need more than just design. They may also need help with development and implementation (and the resources that go with it). In these cases, consider volunteering as a team or doing pro bono work as part of a nonprofit hackathon.

Portfolio example: Clayton Hopkins - #DullesJustice

Screenshot of Clayton Hopkins's UX portfolio

Courtesy of Clayton Hopkins

Clayton Hopkins includes a few pro bono case studies in his portfolio in the form of Medium articles. A particularly interesting example is the website design he did for a group of lawyers offering free legal aid to travelers at Dulles Airport in response to the Muslim travel ban in 2017. 

Homepage concepts for #DullesJustice project

Homepage concepts for #DullesJustice project

In addition to walking through the entire UX design process step by step, Clayton offers insights into how he and his team responded to the urgency of the process, lessons learned along the way, and the results: three days after launch, the number of volunteers had increased from 100 to 1,200.

Best practices:

Choose projects that are fun or interesting to you and that you’d be proud to display in your portfolio.

Avoid signing a non-disclosure agreement (NDA) for unpaid work.

At the end of the project, ask for a letter of recommendation for future jobs.

Looking for a way to volunteer your UX design skills ? Check out these sites for opportunities:

-Get matched with a nonprofit project on Catchafire .

-Join a Code for America brigade to help design new tools for local communities.

-Lend your graphic design skills to a worthy cause with donate:code .

6. The UX design internship

Sometimes the path toward becoming a UX designer starts with an internship. Companies like Apple, Meta, Google, Amazon, and AirBnB are known to hire interns on their UX teams. You’ll find plenty of benefits to working as an intern—even if you’re unpaid—including:

Mentorship from experienced UX designers

Real-world experience

Behind-the-scenes industry insight

Networking opportunities

Projects for your portfolio

If you have to sign an NDA, make your case study password protected or keep it general, focusing on the early ideation.

Tie your project to business results if possible.

Include a positive testimonial from your manager, supervisor, or peers from your time at the company.

7. The interview design challenge

You’ve landed your first interview for a UX designer role. But that doesn’t mean you can’t keep working on your portfolio. Many interviews include a design challenge—an interactive test meant to show how you think. With a bit of iteration and polish after the fact, you can transform these challenges (especially the take-home ones) into fresh material for your portfolio.

Portfolio example: Tammy Taabassum - Wish Design Challenge

Tammy Taabassum UX design portfolio screenshot

Courtesy of Tammy Taabassum

During an interview with the e-commerce platform Wish, Tammy Taabassum completed a four-day design challenge where she was asked to improve the app in some way. Her project got her an internship, as well as a stellar portfolio piece.

Usability testing results chart for a Wish design challenge

Usability testing results chart for a Wish design challenge

Tammy presents her case study as a slidedeck that lays out the challenge and the four steps of her design process. She digs into the insights and challenges uncovered during her user research, points back to other apps where she found inspiration and ideas, redefines the Wish app’s information architecture, and validates her design with usability testing. She also discusses how she would test and iterate with more resources, giving her interviewers a preview of the value she’d bring to the company.

If you received feedback during your challenge, include it in your case study. Show how you incorporated it into your design.

Be sure to take photos of your work when completing a whiteboard challenge during an interview. 

Make clear that this was a design challenge so recruiters are aware of the limitations, such as time constraints.

What should be in a UX design portfolio?

In most cases, your UX design portfolio should have three sections, a Home Page, an About page, and a collection of case studies (this page is often labeled Work).

Your homepage should include a compelling headline introducing who you are and what you do. Sometimes one sentence, an image, and a clear navigational menu is enough. 

Your About page is the place to go into a bit more detail about who you are and how you got started in UX, especially if you’ve switched from another career. 

Early on in your UX journey, you may not have a ton of design work to include in your portfolio. But as you take classes, participate in hackathons, and work through passion projects, your collection of materials will start to grow. 

While there’s no hard and fast rule about the number of projects to include in your portfolio, consider featuring three to five in-depth case studies . These should be your best work, and you can always swap them out for new case studies as you gain experience.

For each, consider including:

Project context, scope, and timeline

Your role and list of collaborators

Problem you set out to solve

Method or hypothesis for solving the problem

Primary and secondary research

User research and findings

User persona and user journey map

Design iterations (sketches, wireframes, low and high-fidelity prototypes)

Final product

Conclusion and metrics of success

Lessons learned

Optional sections

Depending on your amount of experience and personal preferences, you may also choose to include the following pages:

Resume : Give it its own page on the site or link to it.

Side projects or other work: If you have case studies or graphic design work beyond your few highlighted projects, give them a separate section where those who would like to see more can find them.

Contact: This doesn’t have to be its own page, but be sure to give recruiters a way to get in touch after you’ve wowed them with your work.

UX portfolios: Choosing a platform

Having your own hosted website can often be worth the extra expense. But if you’d like to get started building a portfolio for free, these platforms can help you showcase your work:

1. Behance offers a free online portfolio platform for creative work, including UI, UX, and graphic design.

2. Dribbble , another popular UX portfolio platform, lets you share screenshots of your sketches, prototypes, and design concepts.

3. Adobe Portfolio is free with most Adobe Creative Cloud plans and allows you to create a customized site that synchronizes with Behance.

How do I make my portfolio stand out?

Now that we’ve gone through the must-have sections of a UX portfolio and some examples of effective case studies, let’s take a look at some additional tips and best practices to refer to when building your portfolio.

Showcase your process, not just the finished product. Don’t skip steps.

Document your process and include visuals in your case studies. Show your design process in action through photos, sketches, and screenshots.

Use emotive language to show empathy. This is particularly important when giving background on the problem you set out to solve.

Tie great UX back to business value (how does solving a user problem impact the business in a positive way?).

Highlight your specialty. If you aim to be a generalist, choose projects where you worked on all elements of the design process. If you’re more interested in user research or user interface (UI) design , prioritize these elements in your case studies.

Make sure your portfolio provides a good UX. Your portfolio website is itself a demonstration of your skills.

Try to include at least one live case study. Some work may need to be password-protected due to NDAs, but you want to give recruiters something to look at without having to email you for a password first.

How to enhance your UX designer portfolio

If you still need projects to fill the gaps in your portfolio, you have plenty of options. The list below outlines a few 100-percent online, self-paced programs that you can use to expand your UX design skills and bulk up your portfolio.

Google UX Design Professional Certificate : In addition to earning a Professional Certificate from an industry leader, this online course can be used to add three different end-to-end projects to your portfolio:

A mobile application

A responsive website

A cross-platform experience

Meta Front-end Developer Professional Certificate : Throughout this program, you'll manage a project in GitHub using version control, Git repositories, and the Linux terminal. You'll also have the opportunity to participate in a Capstone project to build the front end of a web application. By the end, you'll have completed nine projects in a lab environment or web application and earned a Professional Certificate from Meta.

Start building your UX design portfolio today

If you’re ready to take the next step toward a career in user experience design, consider enrolling in the Google UX Design Professional Certificate on Coursera. You'll learn the skills you need for an entry-level role in less than six months, no degree or prior experience required. The first week is free.

This content has been made available for informational purposes only. Learners are advised to conduct additional research to ensure that courses and other credentials pursued meet their personal, professional, and financial goals.

RUB 1 unlocks unlimited opportunities

  • For a limited time, get your first month of Coursera Plus for RUB 1 .
  • Get unlimited access to 7,000+ courses from world-class universities and companies like Google, Microsoft, and Yale.
  • Build the skills you need to succeed, anytime you need them—whether you’re starting your first job, switching to a new career, or advancing in your current role.

Learn more about our  custom WordPress development services at htmlBurger.

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.


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;, 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.

YouTube video player

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

White-Label Web Development Services

  • Fast Turnarounds
  • Reasonable Pricing
  • NDA Protected Work

Subscribe for our newsletter

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

What is a case study in UI UX?

Last updated on September 24, 2022 @ 10:09 pm

A case study is a detailed description of how a real-world problem was solved. It can be used as a model for how to approach similar problems.

UI UX case studies can help designers and developers understand how different elements of a user interface can work together to improve the user experience.

The goal of a good UI UX case study is to provide a comprehensive view of how a problem was solved and the results. It should include details about the user interface, the problem, the solution, and the results.

UI UX case studies can be helpful in several ways. First, they can help designers and developers understand how different elements of a user interface can work together to improve the user experience.

Second, they can provide a model for how to approach similar problems. Finally, they can provide an example of how to measure the effectiveness of a solution.

4 Related Question Answers Found

What is a case study ux ui, what is case study in ux ui design, what is a case study in ux ui design, how do i study ui ux.

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.

Design interactive prototypes with ease.

Create visual flowcharts online in minutes.

Create your UI/UX design work as a team.

Power Your Prototyping with AI.

Brainstorm and express your ideas easily.

Who's using Mockitt and Why choose it?

Present your idea by sharing a simple link.

The latest updates in Mockitt.

Learn how to make better UI and UX design.

Learn all the tips and tricks to make an interesting app.

Learn how to create interactive and animated prototypes.

Learn how to make a high-fidelity wireframe easily.

Find all the topics about design, prototyping, and UI/UX here.

Any trouble using Mockitt? Find the detailed tutorial on this page.

Invite friends to earn free license for both you and your invited friend.

  • Sign in Sign up


Top 10 UX Case Studies Every Designer Should Read


Significant UX portfolios cannot be successful without well-done case studies. Recruiters use case studies to learn and evaluate the end-to-end process of how designers land on their final design solutions.

UX case studies are examples of design work that designers include in their portfolios. Via case studies, designers tell compelling stories in text and images to show how they handled problems. Such narratives showcase designers' skills and ways of thinking. Case studies are a great source of learning for the design community. Other designers learn from experiences when they read the case studies. It is also possible to apply a problem-solving approach from one problem to the other in some contexts. It is reasonable to say that reading UX case studies are essential for every designer to stay up-to-date with the design world.

Top 10 UX case studies

Here is a compilation of the top 10 UX case studies that every designer must read –

1. Helping homeowners understand their home value on Zillow

Zillow is the leading real estate and rentals marketplace for consumers in America. The company aims to empower people through data and insights to help them find a home they love. This case study focuses on the challenge of redesigning the comparable market analysis tool to be more user-friendly and help homeowners feel more confident about the market value of the home. The redesign's outcome was that homeowners who used the tool felt that they had more control in estimating their home value and had greater trust in the Zestimate (Zillow's automated home value estimate).

This case study by Frances Tung, Senior UX designer at Deloitte, integrates images in an incredibly readable way. There is just enough text to act as preambles to each step of the process. Once the reader reads the paragraph, she has an idea of what image will be presented next and how it ties into the overall design process.

2. Redesigning the New York Times app

This case study by Johny Vino is very well written and is extremely easy for anyone to understand. The case study is a goal-driven study that helped New York Times get through a crowded news app market and really stand out. The design team was challenged to retain the long-term loyalty of readers.

Instead of overhauling the existing New York Times app, the designers add a subtle and valuable feature to Timely's landing page. This enabled the user to receive notifications at opportune moments throughout a busy day: at breakfast, commute, before a meeting, during a coffee break, or right before bed. These notifications assisted the user in opening Timely and access articles. It takes a short time to read. Most importantly, the articles are catered to each user based on their interests and habits.

3. Yelp Activity Map

Yelp has always been about connecting people to great local businesses around the world. Despite this mission, there has never been an easy way to look back on these connections and places users experienced on Yelp. This project explores how one might be able to easily access a centralized place of their activity on Yelp and a look into what a visualization of one's geographical history could look like and mean to our users. Through a mix of user interviews, iterative prototyping, and concept testing, the designers' goal was to take a broad, conceptual idea and deliver something valuable to Yelp's power users.

The case study is so easy on the eyes, from the color scheme to the typography. Readers can do a quick 30-second scan and see that the author has defined product goals, talked about explorations, narrowed the selection, and then went in for the solution. There is also a video at the end, followed by learnings.

This UX case study talks about building a product for people who want to be fit and healthy but need some motivation (aka a kick in the butt) to go to the gym.

Per the author of the case study, "the general consumers of the multi-billion dollar worth of wearable fitness tracker market. Over the years, I have tried a few fitness trackers, and my current obsession is Fitbit. It's a great tracker and motivates me to be more active, but I have encountered a few problems while using their iOS app. So I decided to put my UX designer hat on and venture into the wild to see if anyone else shares my problems and if I could make any improvements to the app."

5. Managing Synced Accounts

Siftery Track is a B2B SaaS tool that helps companies make smarter decisions about their software stack through data imported from various financial accounts. As the remote Product Design Intern, the author of this case study worked with the lead product designer to improve the synced account page. The case study takes a design thinking-based approach to solve the problem.

6. Tito Taglish: designing a language learning app

User research indicated a strong desire for young Filipinx individuals who are not proficient in the Filipino language to learn Taglish, a combination of Tagalog and English commonly used in the Philippines. Although popular language learning apps like Duolingo exist, such platforms do not offer any Filipino language option. Given an enormous market gap, Tito Taglish designed and developed a responsive website and prototyped a mobile app that houses materials that encourage young FIlipinx individuals to learn Taglish.

Signal is a cryptocurrency trading platform that helps investors make the right trades by either copying other traders (copy-trading) or receiving trade suggestions based on technical and fundamental analysis (signals). Considered to be one of the most promising players in the market for its highly innovative value proposition, Zignaly had just raised funds and was willing to invest heavily in delivering the best possible experience to their users. The case study details how Zignaly discovered the right problem and came up with a meaningful solution.

8. UX Review

This case study is unique because it focuses on a UX review rather than a product design. UX studio has conducted an expert review for the IT company IncQueryLabs to discover why their website did not perform well.IncQueryLabs builds software toolchains to boost industrial digitization efforts by helping their clients to achieve higher quality, faster time to market, reduce development costs, and break vendor lock-in. The UX expert review's main goal was to discover what causes poor conversion rates and what makes visitors leave the website.

9. Perfect Recipe -UX design for cooking and shopping

Perfect Recipe is a mobile application that enables users to search for food recipes and buy what they need to cook different dishes. This case study illustrates the entire UX design process is straightforward, 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.

10. GnO Well Being

GnO Well Being 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. 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, etc. There are many ideas here that you could copy for your projects.

UX case studies are one of the essential parts of a UX designer's portfolio. Writing 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 significant 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.


Related Articles

Top ui influencers to follow on instagram, top 10 design communities for ui designers, the 5 principles of user interface design, semantic ui, a user-friendly development framework.

Pepper Square

UX Design Case Study: The What, How, and Why with Stellar Examples

19 September 2022

what is a case study in ui ux

Inspiration can come from anywhere. Sometimes, it may manifest in the most vivid dreams. Other times, it may be that unique design around the corner. At Pepper Square, we’re always fishing for the next best thing in design, and we always keep our eyes open. Yes, even if it means staring at a puddle from an unflattering angle.

Since we live in the age of the internet, some things come easy to us. We don’t have to look far to find some great sources of inspiration, especially for design. All great design begins by placing the user at the heart of the problem and gradually eliminating pain points.

Case studies are one of the best ways to understand the planning, strategizing, designing, and development process. We’ll look at a few UX design examples and elaborate on our favorite ones, so you don’t have to.

What are UX Case Studies?

Think of it this way. It’s a summary (but a detailed one) of everything that has gone into the design process and how it delivered value. UX case studies offer vital insights about the project and highlight the designer’s skillset beyond designing and design thinking.

But UX case studies are different than your typical case studies. Following Aristotle’s storytelling elements may be the only thing you need to build a case study for the latter. By leveraging his storytelling style, you already have a generous dose of material, to begin with.

For instance, although the “plot, character, and theme” may not exactly be present in these specific avatars , you already have a fair idea of where to begin. The other elements follow.

The Importance of a UX Case Study

  • A way to build trust

UX case studies showcase an agency’s past work and provide more than just an idea to prospective clients. It’s an in-depth presentation of a company’s portfolio. Since such information is readily available, it is also a form of building trust.

For it is human nature. Clients will want to work with companies that provide the right information and are transparent. Case studies are a way of doing so.

  • A showcase of skills

Case studies highlight problems, solutions, and how one got to that solutions. With the latter, you enter the area of skills where agencies can show their might. This is another important parameter that clients use to understand whether a particular agency can solve their problems.

This is also one of the main reasons why UI/UX design agencies have a section for UX case studies in their website.

  • Future references

Since case studies are essentially a record of all that has been done for a particular project, it easily becomes a repository for the future. Interns or other newly-joined members can easily go through these case studies to know more about the agency’s work.

This helps in a smoother transition of work and ensures that everyone at an agency is on board with the way they do things.

How to Build a UX Case Study?

Introducing an arc to the story for UX case studies will provide order and structure. Divide the case study into three parts with a designated introduction, middle, and conclusion.

Remember that no one has the time anymore. So, keep it crisp and hit readers with data that matters.

Step 1 – Introduction

The introduction should ideally encapsulate the main challenges and a problem statement. Then, follow it up with the solution you offered and your role in tackling the problem. It should not be more than five lines as it is essentially your elevator pitch.

At this stage, it’s also a good idea to share an outline of your approach and hint at the final deliverables.

Step 2 – Talk about the obstacles

Outline the problems and constraints you faced and explain your specific design thinking process. Briefly illustrate your research and progress leading to the next steps and, ultimately, the end goal.

Step 3 – The project’s summit

Keep the reader hooked on how you achieved your big goal. Talk about your story’s apex at this stage and knit a tight narrative to highlight the most significant bits.

Step 4 – Guiding factors

You must show how you combined extensive research and user insights to devise a plan and solution. Now is an excellent time to shed light on the ideas and decisions that led to your project’s final iterations.

Step 5 – Conclusion

The final stage of the case study should showcase the results and the resolution. Highlight how your solution helped reach or exceed a business-oriented goal or how you helped deliver value to the client with your solution.

Remember that not all UX case studies follow the five-pronged approach. You may also condense it to fewer steps if you wish, but the crux must remain the same.

What to Include in Your Case Study

UX Writing – it goes without saying that a UX case study should include all hallmarks of UX writing. It is the most basic step that users will look into as it helps them understand a point or two. UX writing also has the knack of grabbing one’s attention as it conveys the important points effortlessly.

Wireframes – a detailed case study will have a wireframe that showcases all relevant information and helps the user learn more about the whole structure. Based on the requirement, you can include a specific wireframe and depending upon the clarity needed, you can choose between the types of wireframes.

User Testing – always include results from user testing including feedback as it keeps the case study engaging and shows the different lengths you went to in order to make things work. As a parameter, user testing also helps clients understand how open you are towards feedback.

User Research – if the case study involves studying specific users or looking into a target group, you need to include results from the same. Considering the fact that user research is important, one does not need more than a single reason to have it in their case study.

Essential design aspects – a UX case study needs to include the right design aspects that in turn can drive home the more important points of the project. These aspects form a direction for the case study and take things towards a favorable outcome.

Common Mistakes that You Should Avoid

A UX case study without mistakes is what everyone wishes to see. It needs to be presentable and unique, which indirectly means that errors should be cut to a minimum or no errors at all. So to help you out, here are some common mistakes that you need to avoid while writing your UX case study.

  • Forgetting the overall experience

Focusing only on the user interface and forgetting the overall objective of experience is a common mistake that should not reflect on your UX case study. Since design is not only about the UI, you need to pay attention to what matters and looking at a number of UX case study examples will tell you the same.

The modern approach to storytelling does include a structure even though some case studies don’t directly showcase the same. Every case study brings in a specific plan, approach and thus follows a structure that you need to continue following.

Missing out on these points can eliminate the purpose of your case study and even fail to highlight the key areas of focus.

  • Failing to include the elements of storytelling

You don’t want to miss out on the elements of storytelling because you want your readers to stay focused and read what you are presenting. As mentioned before, following Aristotle’s storytelling elements is about capturing what is most important for a UX case study.

Hence include these elements and take your case study to a whole new level.

  • Forgetting to highlight what’s important

Every UX case study has important points that describe how you came to a solution and the steps that you followed to do so. These points may or may not be complex but they need to enter the mind of a human who’s attention span lasts for 7 seconds.

Thus it is a challenge to ensure that the process of creating a case study is engaging. Highlighting the most significant points is one thing, making sure the reader wants to read it is another ball-game altogether. It is important to get creative with how you present your story.

  • Not doing a thorough checkup

From punctuation errors to spelling mistakes and more, a case study could be filled with a ton of errors. So a thorough check up along with multiple readings is important before putting out your case study. Only through constant checkups can you reduce any errors that may exist.

Here’s how Pepper Square showcased its UX case studies for three leading brands and delivered exceptional solutions.

Pepper Square UX Case Study Examples

  • National Fitness Campaign (NFC)

what is a case study in ui ux

To transform the way the world views outdoor exercise and make exercising accessible and free for all, NFC tasked Pepper Square to bring free fitness to over 1,000 cities across the US by 2021. It’s a great example of UX design meets the physical world.

Pepper Square’s Solution?

  • Redesign the existing mobile app
  • Increase user engagement at local fitness courts
  • Gamify the experience for users
  • Introduce exciting fitness challenges

The Value Delivered?

Among other things, Pepper Square was able to make the refashioned app live in 3 weeks, and app downloads increased by 40% after the fresh release.

Read the entire case study here .

  • Sun Mobility

what is a case study in ui ux

Sun Mobility tasked Pepper Square to bring mass adoption of electric vehicles to reimagine the future of urban transportation.

Pepper Square created multiple touchpoint experiences for Sun Mobility that would engage OEMs, fleet operators, and end customers to transition seamlessly to new-age transportation.

One of the most crucial highlights was that the mobile app helped drivers in better decision-making by leveraging intelligent data. Promotional collaterals for Auto Expo 2018 included corporate presentations, brochures, kiosks, stickers, and cap designs that garnered buzz and traffic to the website.

Read the full case study here .

what is a case study in ui ux

To build a productivity app for mothers, two entrepreneurs shared their dream with Pepper Square to create an app to help multi-tasking mothers prioritize their ‘me-time.’

Pepper Square created an ‘exclusive for mothers’ end-to-end productivity app. The app helps mothers convert their elusive free time into ‘me-time’ to accomplish things that are important to them. It’s the ultimate organizer/planner that every mother needs.

With uniquely designed lists, notes, and a calendar, users of the app found the app beautiful and intuitive. Furthermore, Pepper Square enhanced the app experience with valuable feedback and learnings with iterative usability testing at the beta stage with real users. Here is a detailed look into our case study with Mamma Miya .

We were tasked to help a client market their new food product, digital cheese blast and promote the same.

Pepper Square’s Solution? Pepper Square created a fun new platform where users could cheese-blast themselves with the latest flavors by Old El Paso and also share these pictures on social media. The option to directly share these pictures was installed to promote virality.

The Value Delivered? The campaign was a success as it had generated 8 million impressions with the social app and increased Twitter conversations by 1000%. With an exclusive story on the website, media highlighted Ketchum as a frontrunner in leveraging the digital space.

Audience showed support for the interactive concept by sharing images on social media, thus marking a successful project and a definite case study. Learn more about the case study, here .

Pepper Square’s approach to UX case studies is simple. Introduce the problem. Emphasize the solution. Put a spotlight on the value delivered with a well-crafted UX problem statement .

Here are a few other examples of the best UX case studies you can seek inspiration from.

  • How HubSpot Redesigned Their Website – A Case Study

Here’s one of the best examples of a website redesign case study . Led by UX designer Austin Knight, the website redesign project was supported by three other team members, a marketing manager, a visual designer, and a developer. The supplement team included copywriting, product positioning, and technical development members.

With session recordings, qualitative research, and multivariate testing of minor changes in the first stage, Knight could devise a foolproof strategy to forge forward. By following the five steps of design thinking, HubSpot was able to revamp its website and make it a “data-informed UX success.”

  • How to Live a Healthier Life with Bee Better – A Case Study

The makers are Bee Better understood one thing: everyone wants to be better and live healthier lives. But most complain that they are pressed for time. Another problem people face is that when they try to pick up a good new habit, they only find the will to keep at it for merely a week. It’s because they aren’t motivated enough. After all, habit development is a tedious process.

Busy Bee offered the ideal solution by making the process of habit-building fun and interactive. By engaging the user with friends and family, the app offers additional encouragement and tracks progress.

  • Linkedin Recruiter Tool by Evelynma – A Case Study

With current recruiting tools making it hard for platforms like Linkedin to receive accurate information, UX designer Evelyn Ma Rasmussen looked to change things. Her goal was to also increase the likelihood of recruiters getting a positive response.

Rasmussen followed a detailed process of collecting information from candidates, crafting a user journey, and creating personas that in turn helped her visualize design. The outcome helped Linkedin engage with users and connect to the right candidates in order to receive a positive response.

  • Giving customers exactly what they need – Cover Girl’s Case Study

Imagine a virtual makeup store where you can try out every shade of lipstick or see how a smokey eye looks on you. Now, you don’t have to imagine that anymore. In collaboration with AR company Holition, CoverGirl introduced a virtual makeup studio.

An instantly shoppable makeup experience, it set out to solve three main problems users complained about:

  • Lack of time
  • Distance from a physical location, and
  • Removing makeup on the go

These were also the reasons why many preferred online shopping. But online shopping has its flaws too. There is no way to visualize how a particular shade would look on different skin types and textures. The virtual makeup studio took heed to user problems and found a revolutionary solution.

Existing and prospective clients always look for fresh ideas to elevate their brands and business. So, showcasing case studies to them is a great way to open more doors for further opportunities. It’s a window or a sneak peek at your team’s capabilities and what you can achieve with your set of expertise in UX project ideas .

Case studies are also a preview of your approach and your design thinking pattern. Besides this, UX case studies provide vital insights to recruiters. It helps weave a story of the task and how you navigated tricky waters. When done correctly, it helps maximize your appeal as a designer.

what is a case study in ui ux

Alka is the Chief Creative Officer at Pepper Square. She has defined the user experience for some of the finest global brands over the last eight years.

what is a case study in ui ux

The Transformation of Mobile App Designing

what is a case study in ui ux

Top UI/UX Design Trends of 2023

what is a case study in ui ux

Usability Testing: Why is it a New Competitive Advant..

  • skip navigation All Products Product Bundles DevCraft All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with: NEW : Design Kits for Figma

Case Study: How Progress Uses Figma to Manage the Design Process

Kathryn Grayson Nanz

See how the Progress design and development teams collaborate with Figma to create new components for the KendoReact UI library.

Ever wondered how the magic happens when it comes to designing and developing our Telerik and Kendo UI component libraries? Like many teams, we coordinate extensively between our design and development teams—with the help of Figma! Let’s take a look at how the component creation process works for our KendoReact team.

Identifying the Problem

The Product Manager (PM) is the first one who attempts to capture the problem that needs solving. They’re responsible for synthesizing feedback, industry trends and user stories in order to find places where the KendoReact component library can be expanded or improved.

The design process begins when a PM hands a designer a list of feature suggestions that they’ve created based on this research. The designer can then ask questions, validate and narrow down the problem to be solved based on this jumping-off point.

When the PM and designer are in agreement about the work, then the project will be added to the roadmap. At the next planning meeting, all the teams (product, design and engineering) will discuss reasonable timelines and when this might be able to fit into the release schedule. The design team is working one full release ahead of the engineering team, so this requires coordination and lots of forward planning!


Once the designer is assigned to the component, they can start their work based on the writeup that they created with the PM. This one designer will be responsible for this component throughout the entire process—they’ll see the job through from idea to implementation.

The designer will then take time to do their own exploration and research. This could include any number of things, including but not limited to: talking to users, comparing competitor approaches, looking at in-context applications of this component, and leveraging their team’s years of experience designing UI components. When they feel like they have a complete understanding of the problem this component will solve, as well as a few ideas about how to tackle it, then it’s time to start creating!

Creating the Solution

The designer begins by creating loose sketches to work through their own ideas and figure out which approach will be most effective. Once they’ve got a pretty good plan and are ready to start sharing that with others and getting feedback, they’ll turn those sketches into either wireframes or simple mockups in Figma .

Since we have a Figma Kit for each component library that provides an extensive breakdown of all our basic component parts, our designers can save a ton of time by leveraging those resources instead of building each new component completely from scratch. This also means they won’t have to think through the interaction states of each atomic piece within a larger component—buttons, dropdown menus, checkboxes, inputs and more already have well-defined and documented interaction states in the Figma Kits that can be included when building new components.

Sharing the Solution

Because the Kendo UI teams are entirely remote, we primarily communicate new component designs asynchronously using GitHub Issues. When the designer is ready to share with the engineering and product teams, they create an Issue where they can explain their suggested solution. This includes the Figma file as well as their design rationale. In this way, the designer walks the team through their thinking regarding their choices and the features included—but without having everyone literally in the same room at the same time.

Once this is posted, the engineers can explore and inspect the Figma file, ask any questions they might have, as well as estimate build time and raise any concerns about feasibility. The PM can also ask questions and ultimately sign off on whether they think this proposal adequately solves the problem they identified at the beginning of the process. If discussion gets complicated or there are lots of questions to answer, calls are scheduled as needed to hash out the details—but, more often than not, the teams can get everything they need via the written communication. Once everyone is in agreement, it’s time for the designer to really start digging in deep!

Once the designer has the feedback they need, they can take that and start building out the entirety of the component. Even if they magically received no suggestions or critiques, there are still lots of little details to finish up!

Once the full design and prototype is done, the designer then has to version out that component to reflect all of our various theming options—no small task! But it’s crucial to ensure that the user experience is equally effective, no matter how the colors or theme might change the look and feel of the component. We’ve learned from experience that you don’t want to get too far down the road on a design and then realize that it just won’t work with a specific theme.

As they work, the designer will post updates in the same GitHub Issue that they opened before. This allows them to share informative updates, as well as ask questions, get more feedback, explain any tweaks they’ve had to make since the proposal, or open up discussions about functionality of the component.

The most important part of this, though, is that the engineer has been looped in through the whole process—since the first proposal. This greatly reduces friction when it comes to the handoff, because the engineer will have a much deeper understanding of not only the original problem, but also why various design decisions were made. Furthermore, it allows them to raise any red flags or concerns they have about the feasibility of building the component early enough in the process that it’s not too disruptive to pivot. They can always peek at the shared Figma file to see the progress of a design and offer feedback.

Once everything is done on the design side and has the stamp of approval from everyone in the GitHub thread, it’s time to hand off to engineering. Developers pair with designers as they move into this phase so they can continue to ask questions and collaborate throughout this process—just because the Figma files are done doesn’t mean the designer’s work is finished!

The specifics of the handoff process are something that the paired individuals handle on their own—the designer and developer are empowered to work together however they need in order to hash out the details and make any necessary adjustments.

One of the things that we’ve found greatly contributes to this success is having a distinction between “Front of the Front End” (FotFE ) engineers and other developers. Brad Frost was the first to coin the term “Front of the Front End,” and it’s one that’s incredibly helpful and accurate—the front end has become a very wide space, and the skillset needed to manage state and architect applications can be incredibly different from the skillset needed to write beautiful and accessible HTML and CSS.

When you hire specialists on the FotFE , it allows that dev to take the lead on handoff communications because they are naturally closer to the design side of things. I’ve spoken a lot about the importance of sharing the same language, and this is that in action. Another benefit of this is how it allows our FotFE devs to collaborate across our teams using different frameworks, because those developers aren’t specialized in a framework, themselves. This is the best way we’ve found to ensure that our components look and behave the same way, no matter what framework is powering them behind the scenes.

The FotFE engineers can use the Figma inspect and Dev Mode tools to build out the UI for the new component without having to guess at values, ask the designer or speculate about responsive layouts—everything is already in the Figma file. Of course, if there are any additional questions, the designer is there for support. But most of the time, the details are already captured in Figma.

Updating the Figma Kits

The last step in the Kendo UI process is to to loop back and update our public Figma Kits with the new component designs, so all the external designers using our product are up to date on the latest and greatest.

We align the public Figma Kits with the current component release, so there’s time for the designer to update those files while the engineer is building out the component (and time for the designer to make any updates or tweaks needed to make them as clear as possible). The files we add to the public Figma Kits come directly from the design files our components are built from—it’s a way for us to “eat our own cooking” and test the Figma Kits. After all, what better way for us to make sure the Figma Kits are useful than to build directly from them ourselves?

Try It Yourself

If you’re trying to get a design process established, try using this as a basis—but don’t be afraid to make any adjustments you need in order to make it work for you! The best process is the one everyone uses, so if something is proving to be a pain point, there’s no requirement to hang on to it. See if you can troubleshoot why it’s not working; sometimes, there are just small adjustments that can be made to make something work. Tools like Figma, ThemeBuilder  and the Telerik and Kendo UI component libraries can help speed up the process and remove roadblocks. We would know—after all, we use them too!

Kathryn Grayson Nanz

Kathryn Grayson Nanz

Kathryn Grayson Nanz is a developer advocate at Progress with a passion for React, UI and design and sharing with the community. She started her career as a graphic designer and was told by her Creative Director to never let anyone find out she could code because she’d be stuck doing it forever. She ignored his warning and has never been happier. You can find her writing, blogging, streaming and tweeting about React, design, UI and more. You can find her at @kathryngrayson on Twitter.

Related Posts

Meet the themebuilder figma import, new: fluent theme figma kits and themebuilder pro support, figma for developers, 5 ways to improve design collaboration and handoff, all articles.

  • ASP.NET Core
  • Blazor Desktop/.NET MAUI
  • Design Systems
  • Document Processing
  • Accessibility

what is a case study in ui ux

Latest Stories in Your Inbox

Subscribe to be the first to get our expert-written articles and tutorials for developers!

All fields are required

Loading animation

Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.

You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info

By submitting this form, I understand and acknowledge my data will be processed in accordance with Progress' Privacy Policy .

I agree to receive email communications from Progress Software or its Partners , containing information about Progress Software’s products. I understand I may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication received.

By submitting this form, you understand and agree that your personal data will be processed by Progress Software or its Partners as described in our Privacy Policy . You may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication sent by us or our Partners.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here .

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here .


  1. Top 22 Stunning UX Case Studies You Should Know in 2020

    what is a case study in ui ux

  2. UI/UX case study: Enhancing Online Learning Experience

    what is a case study in ui ux

  3. Top 22 Stunning UX Case Studies You Should Know in 2020

    what is a case study in ui ux

  4. Nexo

    what is a case study in ui ux

  5. UX Case Study Example #1 plus free template

    what is a case study in ui ux

  6. 15 Excellent UX Case Studies Every Creative Should Read

    what is a case study in ui ux


  1. AI Audit Expert: JCAATs Introduction to Machine Learning

  2. UI UX Case Study

  3. Truth behind 3-6 months of UX/UI learning

  4. See How to do your assignment for your UX Interview

  5. Figma UI/UX Design Training Day 1/Episode 1 Intro Recap

  6. 💼 Applying for UI/UX design roles with case studies


  1. How to Create a UX/UI Case Study: A Step-by-Step Guide

    Introduction In the world of user experience (UX) and user interface (UI) design, a well-crafted case study can be a powerful tool to showcase your skills and expertise. It allows you to demonstrate your problem-solving abilities and your user-centered approach.

  2. What are UX Case Studies?

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

  3. Complete Guide to Building an Awesome UX Case Study

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

  4. The Complete Guide to UX Case Studies

    Cassie Wilson Published: August 21, 2023 Writing a UX case study can be overwhelming with the proper guidance. Designing for the user experience and writing about it in a case study is much more than writing content for a webpage. You may ask, "If my design speaks for itself, should I include a UX case study in my portfolio?"

  5. How to write a UX case study

    A UX case study is a storytelling tool designed to communicate the decisions and processes behind designs. It allows a designer to showcase their work in a way that highlights their skills and processes. Case studies can be read by anyone, but are generally aimed at potential employers.

  6. What is a case study in UI/UX?

    A case study in UI/UX is a detailed examination of a design project that explores the designer's process and decision-making. It showcases the challenges faced, solutions implemented, and the results achieved in creating a user-centered design. Why are case studies important in UI/UX design?

  7. How I Create My UX Case Studies

    Feb 16 7 Creating UX/UI case studies is a crucial part of showcasing your design skills and demonstrating the impact of your work to potential clients and employers. In this article, I will share my personal approach to creating compelling and effective UX/UI case studies.

  8. How to write a UX case study

    The role of case studies in your portfolio; The anatomy of a case study; The steps to writing a thorough, readable case study; Case studies are the UX application differentiator. It's no longer enough to just show your work. According to the Center Centre, the job growth of UX designers is expected to rise 22% over the next 10 years. UX is a ...

  9. How to Write a Case Study If You Are a UI/UX Designer

    A case study is a detailed description of your work process on a particular task. They describe the goals of the project, tools and methodology that were used, your creative process, and the outcome. ... This chapter describes the difficulties you encountered during the development of the UI/UX design for your product. 5. What happened in the ...

  10. How to create the perfect structure for a UX case study

    The structure is very simple: The idea story begins by raising a question; it ends when the question is answered.". Idea stories have a structure of discovery, so the question is naturally a "why", "how" or "what if", exactly the type of thing that UX professionals ask themselves daily.

  11. How to Create Case Studies for Your UX Design Portfolio When You ...

    Creating your first case studies for your UX design portfolio can seem challenging, but that's not the case. You can start creating case studies from scratch by following these steps: Get foundational knowledge in UX : through learning (from books, the IxDF or elsewhere) design methodologies and common UX activities.

  12. How to create a successful UX case study in 2023 to ace your first

    A case study should reflect a meaningful, learning or growth design experience where you worked with real stakeholders and created something of value for the customers. If you are creating case studies solely for the purpose of populating your portfolio, I guarantee those won't be competitive enough. So please don't think of a case study as ...

  13. UI/UX Case Study, step by step guide to the process of ...

    UI/UX Case Study, step by step guide to the process of designing an app Merabi Chakhunashvili · Follow Published in Bootcamp · 7 min read · Oct 26, 2021 Introduction The case study is about an online ticket ordering app, which provides tourists and natives to order, book, and share tickets among friends. Despite their taste and requests.

  14. How to Write the Perfect Introduction to Your UX Case Study

    Your role: Let your readers know how you have contributed to the project. Your role in the project should be linked to the job you apply for. For example, if you apply for a UX researcher job, then ideally you should have played a UX research role in your case study project. Your introduction should be 4-5 sentences long.

  15. UI/UX Design: Crafting Killer Case Studies

    When it comes to UI and UX design, typically writing case studies is the last thing on most designers' minds. That being said, you can drastically improve your odds of success in the industry by having some high-quality, heavy-hitting case studies as part of your portfolio. Today, I'm going to show you how you can create absolutely killer ...

  16. Ultimate Recipe For A Magnetic UX/UI Case Study

    A case study is an in-depth breakdown of a single project that a designer has done. A UI/UX case study can range in detail, but is commonly used to showcase the intricacies of a designer's problem solving and visual design skills. Case studies can be created as stand-alone examples or included in a portfolio.

  17. Top 22 Stunning UX Case Studies You Should Know in 2022

    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é.

  18. 7 UX Designer Portfolio Examples: A Beginners Guide

    UX case studies for your entry-level portfolio Just because you've never completed UX design work for a paying client doesn't mean you have to apply for your first job with an empty portfolio. These seven types of UX case studies make excellent portfolio material for UX designers looking to get their start in the industry. 1. The course assignment

  19. 15 Excellent UX Case Studies Every Creative Should Read

    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.

  20. What is a case study in UI UX?

    UI UX case studies can help designers and developers understand how different elements of a user interface can work together to improve the user experience. The goal of a good UI UX case study is to provide a comprehensive view of how a problem was solved and the results. It should include details about the user interface, the problem, the ...

  21. 10 Well Done UX Case Studies You Should Read in 2021

    Top 10 UX case studies. Here is a compilation of the top 10 UX case studies that every designer must read -. 1. Helping homeowners understand their home value on Zillow. Zillow is the leading real estate and rentals marketplace for consumers in America. The company aims to empower people through data and insights to help them find a home they ...

  22. Most Interesting UX Design Case Studies with Examples

    Emphasize the solution. Put a spotlight on the value delivered with a well-crafted UX problem statement. Here are a few other examples of the best UX case studies you can seek inspiration from. How HubSpot Redesigned Their Website - A Case Study. Here's one of the best examples of a website redesign case study.

  23. The difference between UX and UI and why it means everything

    The 5 elements of UX design. A recurring theme in my work involves emphasizing the significance of establishing a shared vocabulary within product teams. One of the fundamental yet frequently overlooked distinctions is the clarity surrounding UX (User Experience) and UI (User Interface), how they interrelate, and how to effectively attain them.

  24. 5 Amazingly designed UI UX Case Study

    A case study is just the account of a design project you've worked on. Of course, the idea is to highlight the abilities you utilized on the project and assist potential companies in...

  25. Case study: Simplifying bug reporting in mobile app testing

    Cafe App — UI/UX Case Study Note: This case study is a conceptual project developed as part of the Google UX Design Certificate course, and it does not represent an… 6 min read · May 16

  26. Case Study: How Progress Uses Figma to Manage the Design Process

    The design process begins when a PM hands a designer a list of feature suggestions that they've created based on this research. The designer can then ask questions, validate and narrow down the problem to be solved based on this jumping-off point. When the PM and designer are in agreement about the work, then the project will be added to the ...

  27. Increase Number of Transaction on Maxi App

    I am Umam, Ex — Junior UI/UX Designer in Maxi. The company that focused on wellbeing app. The company want to increase number of transaction by deliver "solution" based on user problems and needs. Role. UI/UX Designer : I am responsible for creating user interface design from proposed solution but still based on user's problem and needs.

  28. What is a good UX?

    Only then did I realize what UX per se meant, it was all about empathy, learning about human behavior, technology, an entrepreneurial knack, creativity, and optimization. Further on during the first lecture of UX 1, with a creative peer brainstorming session, I realized what made a good UX design. Magoosh Flashcards.

  29. Mobile-First Design Guide 2023

    To keep up with them, web designers and UI UX design consulting experts must do the same: go mobile-first themselves. In this article, we will share our in-depth understanding of mobile-first design. We will review the fundamentals of this design approach and analyze their importance in today's context. Mobile-First Design Concepts