ux design case study template free

• Portfolio Tips
• Career Tips
• Portfolio Examples
• Get UXfolio!

The Ultimate UX Case Study Template

Having a template to follow is the biggest help in UX case study writing. Even more so, if you’re a junior who doesn’t have much experience with portfolios. A template can help you plan, organize your thoughts while showing you the light at the end of the tunnel.

The UXfolio team reads hundreds of case studies every month. What we’ve found is that successful UX case studies have a similar structure. In this article, we’ve distilled this formula into a flexible UX case study template and some practical tips that you can use to polish your case studies!

About UX case studies in general:

Before you get to work, we need to clarify a few important details. Doing so will help you understand the expectations and the purpose of UX case studies:

What are UX case studies?

UX case studies are a form of professional content that mixes text and visuals to present the design process of products or product features. They make up UX portfolios, alongside optional pages such as ‘About Me’ or ‘Contact’.

How are they different from UX portfolios?

UX portfolios are made of UX case studies. Think of your portfolio as a folder that holds together your case studies. Back in the day, these used to be printed, book-like documents. Nowadays the industry prefers websites and other digital formats .

How are they different from resumés?

Your resumé lists your skills and work experience. Meanwhile, your portfolio uses case studies to showcase how you apply those skills and experience . Ultimately, you’ll need both to land a job.

How many case studies should be in a portfolio?

If you’re a junior UX designer , you should include 2-3 case studies in your portfolio. These could describe UX bootcamp assignments, re-design concepts, UX challenges , internship projects , or even fictional products. If you’re a medior or senior UX designer, write up 4-5 of your most impressive projects into case studies. Your goal should be to feature as many of your skills as possible. And remember: quality over quantity.

What to feature in your UX case studies?

Since your career depends on your UX portfolio, there’s a lot of pressure that comes with putting one together. Usually, it’s this pressure that numbs designers and leads to procrastination. But just setting straight what lays ahead will help ease your mind:

The story of your design

Design decisions, visuals with explanations.

This might sound very esoteric, but it’s really not. For every design, there was at least one problem that required a solution. You were the person who explored the problem and found the solution/solutions. There might have been moments when the whole thing went off-rails, or when you needed to go back to the drawing board. Those are all part of your design story.

Now, imagine that a friend, peer, or colleague asks you about a project. How would you talk about it? That’s almost exactly what you should put in your case studies. Just polish it a bit, leave out the curse words, add visuals and you have a case study.

Throughout the design process, you keep making decisions. Choosing a UX method to apply is a decision too, and there’s a reason why you chose it. Your UX case studies need to highlight these decisions and their contribution to the design.

The biggest mistake in UX case studie s is when UXers go on defining instead of explaining:

• Definition ➡️ “I proceeded to do an in-depth competitive analysis to find out more about competing apps in the same category.”
• Explanation ➡️ “I proceeded to do an in-depth competitive analysis to make a list of features that were missing from our products, check out how others solved the XY flow, and find out how could we improve on it in our solution.”

Then you’ll move on to explain what you’ve found and as your case study progresses, you reference those findings.

You need to be heavy-handed with your visuals when you’re creating UX case studies. Using images alongside your text will help your readers’ comprehension. So, as a first step, collect everything you can: photos, sketches, whiteboard grabs, graphs, personas, screenshots, wireframes, user flows, prototypes, mood boards, notes, and so on.

We’ve seen some creative UXers use screenshots of calls (with blurred-out faces), group photos, and prototypes of all fidelity. Such visuals help us understand what we’re reading about. But they also build an image in our heads of the designer behind the screen, which can be very powerful and memorable.

Some designers are already in the habit of keeping every scrap of paper with a scribble on it because they know that when it comes to writing a case study, you can’t have enough visuals. Follow their example to make your easier – your future self will thank you.

But it’s not enough to just throw some images into a case study. Here’s how you can make them impactful:

• Always give context ➡️ if you put that stunning photo of the wall with post-its into your case study, make sure that you place it in a section where you explain what’s happening on it (see design decisions) or give it a caption that explains it. The important thing is that visuals will only work if they are strategically placed or they come with an explanation.
• Strive for visual consistency ➡️ even if it requires some extra work, you should make sure that your visuals match each other. Yes, a persona and the user flow might not be close to each other on your layout, but they’re still in the same document so they need to have consistent styling. Believe me, this is a common criticism from design leads and HR folk as well.

How long should be a case study?

If you check a site like Behance, you’ll find that most UX projects there are rather short. Usually, they focus on the visual aspects of design, aka UI. That is a fantastic starting point for a case study. But for UX design, you will need to add some content for context.

The good news is that you don’t need to write essays for case studies. All it takes is around 500 words and some well-optimized visuals. You should never stretch your words because it’ll reflect poorly on your presentation skills. 

Also, treat this number with flexibility: If the project at hand justifies it, feel free to go above or below that. Usually, when a case study is very long, it’s because the project itself was more complicated.

What’s the point of UX case studies?

1. applied designer skills.

It’s one thing to learn a skill and it’s another to use it in a way that can help drive numbers for a business. A great UX case study will prove that you are capable of applying your skills and delivering a solution even with all the distractions and obstacles that come with real-life scenarios.

2. Presentation skills

Many UXers forget about the skills that are required beyond UX. Just read a few UX designer job descriptions , and you’ll find that advocating for design best practices is one of the most common requirements.

As a designer, you’ll have many stakeholder meetings and you’ll need to present your or your team’s ideas. And the fate of those ideas might depend on the way they’re presented. Therefore, the way you articulate your thoughts is important. A great UX case study will show that you are great at structuring your thoughts and articulating complex concepts.

3. The impact of your design

You can see in our UX case study template that there’s a separate section for showcasing your impact. If you can prove that your design can drive numbers, you’re set. This is the single most powerful tool that you can use in a case study: before-and-after analytics, such as an increase in checkouts, increase in finished flows, better CTRs, user feedback, etc. Use whatever number you have to show that your design contributed to the business. It’ll convince even the UX-doubters.

Obviously, as an aspiring/junior designer , this might be impossible, so you need to be a bit more creative. We advise you to show what impact the project had on you: what you’ve learned and how you’ve improved as a designer.

4. Navigating in a team

Almost every product is a collaborative effort between professionals from various disciplines: researchers, designers, developers, marketers, etc. Therefore, navigating in a collaborative environment is an important trait. A case study should show how the team influenced the design, how you’ve collaborated with other designers, the sacrifices that had to be made, and so on.

You don’t need an elaborate plan for this. First and foremost, make sure that you introduce the team in your case study. Second, ask for quotes/recommendations and include them in a neat quotes section. Yes, tooting your own horn can be a bit uncomfortable, but unfortunately, it’s part of the game.

5. Showcase of your taste

Yes, it’s UX, but the reality is that most people don’t care: if what you present doesn’t appeal to them, it’s unlikely that you’ll get the job. Make sure that your UX case studies are visually consistent. If you want to cast a wider net, strive for sleek, minimalist solutions and harmonizing colors.

A simple yet effective UX case study template

This is a tried-and-true UX case study template that can provide a structure to your thoughts. There are 6 chapters that are standard for almost any UX case study. However, the content of these chapters is highly dependent on the project you’re writing about. But don’t worry, this doesn’t mean that we’ll leave you on your own: for each chapter, we’ll give you various options and ideas to help you get going.

UX case study template/skeleton:

• Hero section
• Project overview
• Exploration/Discovery
• UX design process
• Final design

1. Hero section

All case studies should begin with a title & subtitle. You can use various formulas for your title, but we’ve found that this is the one that works the best:

• App name + project scope + project/case study = Netflix Checkout Redesign Project

Your subtitle can provide a glimpse into the project, for which you have various options:

• What’s the product about? (An app that helps you keep your plants alive.)
• What was the project about? (6-week UX design and research project)

If you want to include something visual in your hero section go hard or go home: use spoilers, aka show screens of the final design. You don’t have to fit everything there, just the parts you’re most proud of as an appetizer. Later in the case study, you’ll have enough space to showcase everything you’ve worked on.

• 2 sentences (titles), and
• 1 optional cover image.

2. Project overview

Make sure that your readers are prepared for what’s to come. Remember: they know nothing about this project, so you need to cover the bases:

• Product description,
• Team members,
• Project length,
• Methods used, and
• 3-4 sentences for the overview, and
• 4-5 bulletpoints for the small details.

3. Exploration/discovery

Now that we have all the background information, we can move on to how you’ve approached the issue you were presented with. This part usually includes:

• Competitive analysis,
• Interviews, and

Make sure that for everything you mention you answer at least these three questions:

• Why did you choose to do it?
• What did you find out?
• How did that influence your next move?

You can end this chapter with a wrap-up to create a smooth transition to the next chapter.

• At least 3-4 sentences for each method you’ve used,
• Visualize as much information as you can.

4. UX design process

Now that we understand the scope of the project, we’re eager to see how you went on to design a solution. You can achieve a great structure here if you start from more abstract ideas and move towards the final design:

• Wireframes,
• Prototypes,
• Iteration, and
• Validation.

Again, you need to answer a few questions for every step you made:

• What did you want to achieve by doing this?
• How did this step contribute to the final design?
• At least 3-5 sentences for every method you mention.

5. Final design

Probably the most exciting part of every UX case study is the reveal of the final design. In this section, you should explain

• Why did you choose this solution?
• What other solutions were in the run?
• Before-and-after screenshots (if relevant to the project).

There are two great options to present your final designs. The first is to use galleries. You can go with a nice carousel or a grid that follows a logical order. The second is to embed your Figma prototype. This has the added benefit of making your case study interactive, which makes for a more memorable experience. (Or you can combine the two for an even better showing.)

• 2-3 short paragraphs.

If you have numbers or analytics that show how your design contributed to business goals, you need to showcase them. This will make your case study even more impactful. You don’t need graphs and piecharts (unless you have the time to create some); it’s enough to make a list with the quantifiable data. If you don’t have access to such data , you can also include testimonials and user quotes to underline impact. If you can include both, that’s a winning combination.

• At least 1 sentence for each achievement.
• In a bulleted list or short paragraph.

6. Learnings

There’s something to learn even from the most boring project you’ve ever done. At least, you should strive to find something positive that can contribute to your growth as a designer. This can be a soft skill, a new tool, a new method, or a different way of cooperation. Try to think of things that were new to you in this project and share the takeaways with your readers. Alternative closures include:

• What would I do differently?
• Jobs to be done
• This chapter can be as long as you please, but
• At least 3-4 sentences.

Alternate UX case study templates

We’ve provided a classic UX case study template that has been proven to be working. Now, we’ll show you how you can alter this template for different flows:

UI focused case study template

If you’re strong in UI, you should not wait to reveal your final design until the end of your case study. You needn’t worry about spoiling the surprise as a case study is not a fiction novel or Netflix show. A beautiful design will pull in your readers. What’s more, if the company doesn’t really know the difference between UI and UX, this approach will make your case study even more impactful as it’ll start with the ‘beautiful stuff’.

Here’s how that template would go:

• Project Overview
• Transition to the next section by letting your reader know that you’ll explain how you’ve arrived at this solution.
• Exploration/discovery
• (Optional: Showcase even more of your final designs)

Impact driven case study template

Every product has a business behind it. And what you can do for that business is what matters to stakeholders. We can all conclude that a screen is pretty, but if it doesn’t contribute to business goals or KPIs, it’s just that, a pretty screen. So, if you have some numbers to share, don’t be afraid to put them right after your intro section. Then go on and showcase how you’ve achieved it:

• Share numbers then follow up by showcasing the design which contributed them:

Build your UX case studies with UXfolio!

UXfolio is a portfolio and case study builder made with UX designers in mind. It offers stunning, customizable templates as well as a case study generator with text and image ideas. What’s more, UXfolio comes with built-in device mockups, easy prototype embedding, and password protection on the portfolio or the case study level. Ready to work on your portfolio? Try UXfolio for free!

UX Design Mastery

Get started with a career in UX Design

UX Case Study Example #2 plus free template

You may be wondering how should you organize a large amount of project information in a case study so that it isn’t overwhelming to recruiters? What information is vital to include in a portfolio case study? Or maybe you are just struggling to bringing together your wireframes, strategies and sections into a clean, attractive narrative. Don’t worry this article is for you. 

I recently shared a UX case study example in the previous article that described how to use the free UX Portfolio Case Study template to rapidly create comprehensive case study for your design portfolios from scratch. 

The free UX Portfolio Case Study template is based on over 60 portfolios of successful design hires from Facebook, Amazon, Uber, Twitter, Apple, Google, LinkedIn, Dropbox and the insights of top design recruiters from around the world. 

What you are going to learn

Today I want to walk you through another UX case study example on how you can use the UX Portfolio Case Study template from scratch, to create a UX case study for your UX portfolio. We will walk through the creation of each section, step by step so that you can replicate the process for your cases studies.

The project

The UX portfolio project I will use is one I did as a Senior UX Designer at a digital marketing agency. The brief was to completely redesign a responsive web platform for one of the leading investment firms in South Africa, Alexander Forbes. I worked with a project manager, a UI designer, a back-end developer and a front-end developer.

I did the work some time ago so the challenge becomes trying to remember what I did and collecting enough content for a solid case study. This is where the template comes in handy.

The secret sauce

The core idea is to try to separate your case study creation process into a writing component and designing component so that you can tackle each one without getting stuck or overwhelmed.

The template ensures that your case study has a good project narrative and understandable structure.

This also allows you to plan more effectively what design artifacts you will need in your case study. It’s a system by which you can then rapidly roll out multiple case studies without forgetting anything that’s relevant to a recruiter or client.

In case you did not read the previous article, the UX Portfolio Case Study template has 8 critical sections that recruiters are looking for.

UX Portfolio Case Study template sections

• Project Title & Subtitle (A headline and subtitle that indicates the name and goal of the project)
• Client/Company/Project type
• Project date (When did you work on the project)
• Your role (What you were responsible for on the project)
• Project Summary/About this Project (An overview that summarizes the project, goal and results)
• The challenge (What specific problem, user needs, business requirements and/or pain points that the project solves. Were there any technical constraints or business KPIs you had to keep in mind? Who are you users and what are their specific needs)
• Solution (What method/process were used to solve specific problem, user needs, business requirements and/or pain points? How did features address the objectives?)
• Results (Project success metrics, awards, reflections, project next steps and/or lessons learnt)

Making it as concise and easy as possible to digest

Now writing and condensing long texts for these sections can be very challenging. I have included how long each section should be so that you have a guide to your writing length. Let’s walk through each section of the UX Portfolio Case Study template and fill it in.

1. Project Title & Subtitle

Length: Project Title (1 line) & Subtitle (1–2 lines)

This one is pretty straightforward. I used the name we had for the project at the agency. I generally like to use the client’s brand name as it is recognizable to recruiters and brief enough to fit any case study cover. I also added a sub-title to further explain what was built for the client and give more context around the project title.

2. Client/Company/Project type

Length:1 line

Unless stated in the title, this helps build more context to who the project was for. This was a commercial project for a client so I wrote the name of the client’s brand.

3. Project date/duration

When or how long the project was helps the recruiter establish whether this is your most recent work and most importantly, to gauge where your skill level is. Always try to put up work that is recent because it’s an accurate reflection of your skills. This one was a bit of an old one that I had not drafted a case study for.

4. Your role

Length:1–2 lines

This is a section to state everything you did and were responsible for. Recruiters are looking to accurately assess your skills in the context of the entire project’s execution. I state that I was the Senior UX Designer on the project then briefly note down all the activities I did for the project over the course of several months. If you worked with someone on the project make sure to state it.

5. Project Summary

Length: 1–2 paragraphs

This is a critical section for any reader who does not have a lot of time to read through the entire case study but wants a brief summary of the project, goals, and results. They may be going through a stack of applications and only have a few minutes to scan over one or two projects in your portfolio.

I have kept my summary to three long sentences. The first is the context of the brand. The second touches on the challenge and problem we were attempting to solve. And the last sentence describes the platform this is being built for.

6. The Challenge/Problem

Length: 2–3 paragraphs

This section specifically looks at the problems the project is trying to address. While keeping this paragraph concise I dive into the details of the problem that the client and their user were experiencing. If you are struggling with this part, take a look at your client’s original project brief. The problem you set out to solve will be stated under objectives.

7. The Solution

Length: As long as needed

This is the longest and more time consuming section to fill in depending on how long ago the project was and how fresh in your mind it still is. For this section I outlined the design process steps and methods followed during the project. I wrote down the high level project steps but at this point I am already thinking of the the relevant design artifacts recruiters might want to see. Everything that I produced from sketches to visual mockups to prototypes.

Length: 1 paragraph

The critical last section concludes the case study by outlining any project success metrics that were achieved. I was fortunate that we wanted to report back to the client how well the site had performed so this information was dug up from the Google Analytics tracking. In most cases clients are happy with just a launch and its really up to you to follow up and get the project impact.

Okay, now that we have filled in our UX Portfolio Case Study template we can move on to getting our design artifacts together. I am happy with the content I put down and importantly, I have not missed any section.

Putting it together

This part is really up to you and how you tackle it is going to depend on where you are going to host your UX case study. If you have a portfolio site you can put the text we just typed down on a page and fill in the gaps with images and project artifacts.

I have a Behance account where I house my projects and merely need to upload images and write the text in, then publish the portfolio. Taking it a step further I integrate the text and imagery in Sketch/Photoshop than just purely uploading the project’s web screenshots.

If you would like to use my Behance layout your can check out my portfolio kit with pre-made, fully customizable professional artboards for every section of a portfolio.

How to enhance your UX Case Study

Key things that I always like to include in my case studies to make them more interactive and engaging:

• Brand imagery to create a more immersive narrative
• A prototype/GIF of the final solution

UX Case Study Folder structure

I like to create a folder structure for housing everything I will need as follows.

• Client brief (Optional)
• Website screenshots (Screenshots of the final website)
• Behance submission (Final design exports for Behance upload)
• Wireframe screenshots (Wireframe and UI designs exports in here)

Here are some of the final case study design screens with the text we filled out in the UX Portfolio Case Study template.

The intro has most of our UX case study sections covered in one go. Super important for recruiters without a lot of time.

The About and challenge sections come directly after that.

Then we can dive into the work. Here is a tiny bit of the Solution section showcasing a wireframe and UI design.

And lastly the results to round off the case study.

Here is the link to my portfolio and the full project .

Calvin Pedzai on Behance I conduct website and mobile app usability audits, heuristic evaluations, user journeys, competitor analysis, user… www.behance.net

What to do next

If you really enjoy this article and would like to get down to work, download my UX Portfolio Case Study template for free . Its included with the Design Portfolio Layout Guide , which includes 20 online case studies and example scripts for each case study section.

DOWNLOAD GUIDE

What to read next

UX Case Study Example #1 plus free template

Calvin Pedzai

Analytical problem solver who enjoys crafting experiences and currently is the Senior UX designer at an awarding winning agency.

Related Articles

UX Case Study Example #1 plus free template

In Getting started

Axure vs Sketch: What’s the best prototyping tool for a UX Designer

Is Axure RP the best prototyping tool for a UX Designer?

Leave a reply cancel reply.

You must be logged in to post a comment.

⚡️ Get 30% off EVERYTHING ⚡️

Use coupon: 

UX Case Study Presentation Template

UX Case Studies made simple

Everything you need in a straightforward design template. No need to keep creating the same document for different case studies.

Sort all the information you need to make a comprehensive case study with pages arranged with a seamless narrative in mind.

Work smarter with a professional presentation that demonstrates your attention to detail. Find sections with enough space to define problems, insights, solutions, and conclusions.

Preset elements allow you to build the presentation to fit your brand's identity in no time. Customize your style with color schemes, type faces, and more.

What’s in our UX Case Study Presentation Template?

Capture your UX case study in 22 pre-designed pages to guide your study

With responsive slides and a 16:9 ratio, you can present anytime

Keep your presentations on-brand by customizing color schemes, fonts, and more

Identify key information with sections for problems, insights, solutions, and conclusions.

Form seamless narratives with content flow arranged logically

Essential elements for a strong presentation in a fuss-free, straightforward design

Create with over 740 Figma components

Pay once, access for a lifetime

Reviews from our students

Here's what our students have to say about their experience.

Great course, Mizko's workflow is very much applicable in real life. It's definitely a must try!

Love this course, what a wild ride it was. This is the step I needed to increase my overall confidence in tackling my job as a product designer.

Mizko's Ultimate Figma Masterclass is a credit to the Designership suite of courses. It is well worth time spent doing the practical exercises. There is evidence of forethought and planning as the course unfolds. Completing the course leaves the student with Figma know-how and a library of reusable components that will expand any designer's repertoire for future efforts.

A complete and well-structured course. I've learned a huge amount of tools and good practices to improve my workflow.

This was a wonderful learning experience for me and enjoyed every moment of it. Would absolutely recommend this course to others who would like to level up their skills in Figma and UI design.

After experiencing several of Mizko's YouTube courses, I eagerly embarked on this paid course with high energy and enthusiasm. True to expectation, the course is rich in information and adeptly focuses on the 'why' behind concepts. I wholeheartedly recommend it to beginners and advanced learners alike for invaluable insights. With dedication and effort, I am confident you can climb the top of the mountains

I'll recommend it to anyone with no knowledge who is interested in UX Research but it's not sure about it, because it really gives a good overview of every process!

"Mizko's Practical User Research & Strategy course was incredibly insightful and valuable. Their teaching style is engaging and effective, making complex concepts easy to grasp. Overall, it was a positive learning experience.

"Mizko's Practical User Research & Strategy course was incredibly insightful and valuable. Their teaching style is engaging and effective, making complex concepts easy to grasp. Overall, it was a positive learning experience

This Outline Kit is constantly updated by the Designership team.

Frequently asked questions

What is the purpose of the ux case study presentation template offered by designership.

The UX Case Study Presentation Template by Designership is meticulously crafted to help designers present their work confidently in job interviews, stakeholder reviews, and more. The presentation template ensures you detail your design process, decisions, and outcomes, in a structured and compelling manner.

Is this UX Design Case Study Template free?

The UX Design Case Study Template is a premium product offered by Designership, ensuring a detailed and professional layout to enhance the presentation of your projects.

Can I customize the UX Case Study Template to fit my brand's identity?

Absolutely. The UX Case Study Template is designed for adaptability, allowing designers to seamlessly integrate their brand's identity, colors, fonts, and style, making it uniquely their own.

How many pages are included in the UX Case Study Presentation Template?

The UX Case Study Presentation Template encompasses a comprehensive set of pages to cater to all aspects of a case study, providing a structured flow and ensuring all vital details are addressed.

Can I use the UX Case Study Template in Figma?

Yes, given Designership's extensive offerings for Figma users, the UX Case Study Template is optimized for use in Figma, ensuring a seamless design experience.

How does the template assist in structuring my case study?

The template offers a systematic layout with guided sections, ensuring that designers address challenges faced, solutions proposed, methodologies applied, and results achieved, providing a cohesive narrative for their design journey.

What's the difference between the UX Case Study Template and other templates available online?

The UX Case Study Template by Designership stands out due to its meticulous design, focus on storytelling, and adaptability, crafted under the guidance of industry-leading expert Michael Wong, ensuring a superior quality and approach compared to others.

Do I need any specific software to use the UX Case Study Presentation Template?

While the template is optimized for Figma, it's crafted with flexibility in mind, allowing users to adapt it across various design tools. However, for the best experience, using it in Figma is recommended.

Are there any guides or tutorials on how to best utilize the UX Case Study Presentation Template?

Designership, known for its commitment to user success, provides comprehensive guides and tutorials to ensure designers can make the most out of the UX Case Study Presentation Template, integrating it seamlessly into their workflow.

Sharpen your skills, streamline your workflow

Shipfaster UI: Figma UI Kit & Design System

Access 8,000+ Customizable components to supercharge your design workflow.

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

Present your UX case study confidently with a presentation template that helps you capture all the most important details

Figma Annotation Kit

For key notes, comments, and tracking progress. Streamline your design process and improve your workflow.

Join our newsletter

Get exclusive content and become a part of the Designership community

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

Currently accepting applications until …

Want to advance your career in 2024?  Our career coaching clients have been hired at Blue Origin, Capital One, IBM, Wells Fargo, and more.

Apply to our career coaching program  →

No fee to apply, we have 5 spots open:

Spots are open in our UX career coaching program

FREE UX CASE STUDY TEMPLATE

This UX case study template will help you write the story of each project for your UX portfolio

Everyone tells you to “write a story” about your UX projects, but no one tells you HOW … until now! 

This free Google Doc UX case study template will show you exactly how to write about your UX projects so stand out to UX recruiters and hiring managers.

• How to write smart titles for your UX case study
• Learn the 7 questions a UX case study should answer
• Find the right balance of detail that recruiters look for
• How to write in a succinct way so you don't overwhelm the user of your UX portfolio

UX Case study template for Figma

Today’s new freebie was made by Davio White .

A free Figma UX Case Study template which is made of 15 screens, including project overview screen, project timeline, project flowchart, and many more. You can use this template to showcase your experience, your UX design process and your knowledge in the field. it might actually help you get a better job or land new clients. As a bonus, you also get a CV and Invoice template with this.

You may also like

AProject - Figma premium responsive landing pages

Universal – Premium Figma UI kit

Figma Landing Page Templates (Premium)

Illustrator

UI | UX Case Study Free Template

Free case study template of user experience design process, you will find: 1- Scope of work 2- Persona 3- User flow with content and functional Read More

Creative Fields

No use is allowed without explicit permission from owner

UX Design Case Study

Elevate your design storytelling with our UI & UX Case Study Presentation Template. Tailored to guide UI & UX professionals through every crucial phase of case study development, this template empowers you to showcase your design projects with precision and impact. Perfect for crafting in-depth narratives that chronicle the entire design journey, from initial research to compelling outcomes.

Who can benefit from the UX Case Study template?

The UX Case Study Template is designed for UX researchers, UI designers, product designers, and teams looking to document and present their design projects in a format that is both accessible and professional. Whether you are a seasoned professional or just starting your career in UX design, this template provides a structured framework to effectively communicate your design process, insights, and outcomes.

What the UX Case Study Template helps you accomplish:

1. detail each project phase:.

From defining the user problem to discussing your design process and showcasing the solution, each section of the template prompts you to delve into the specifics of your project, ensuring a thorough presentation. By following the provided structure, you can effectively communicate the key aspects of your UI & UX projects.

2. Guide your narrative:

Utilize the guided questions provided in each section to articulate the critical aspects of your design project. These prompts are designed to help you think critically and present your findings and decisions effectively. By answering these questions thoughtfully, you can create a compelling narrative that engages your audience and highlights the value of your work.

3. Showcase your design solutions:

With dedicated sections for challenges, solutions, and the overall design process, the template allows you to demonstrate the reasoning behind your design choices and the effectiveness of the final product. By incorporating visuals such as sketches, wireframes, and data visualizations, you can enhance the visual appeal of your case study and make it more engaging.

4. Reflect on results and learnings:

Capture the success and learnings of your project with sections focused on the results and next steps. This enables continuous improvement and forward-thinking, demonstrating your ability to iterate and enhance your designs based on user feedback and project outcomes.

How to use the UX Case Study template with step-by-step instructions:

Step 1: comprehensively answer guided questions:.

Reflect on each section of your project and provide detailed responses to the questions provided in the template. This will ensure a robust and insightful case study that covers all essential aspects of your design project.

Step 2: Assemble your narrative:

Collate your answers into the template, allowing the provided structure to guide the flow of your case study. Ensure a logical and impactful progression from problem identification to solution implementation. This will help your audience understand the journey of your UI & UX project and the value it brings.

Step 3: Utilize visuals and data:

Incorporate sketches, wireframes, and data visualizations to enrich your case study. Visual elements not only make your case study visually appealing but also help communicate complex ideas and concepts effectively.

Step 4: Review and finalize:

Ensure coherence and continuity in your narrative by reviewing each section and checking that they transition smoothly to the next. This will create a comprehensive story of your UI & UX journey, leaving a lasting impression on your audience.

By using our SEO-optimized UX Case Study Template, you can confidently illustrate the depth and breadth of your design projects, making a strong impact on potential clients, employers, or stakeholders. Follow the step-by-step instructions provided to create a compelling case study that showcases your expertise in UX design and demonstrates the value of your work.

Remember, a well-crafted case study can be a powerful tool to attract new opportunities and establish yourself as a skilled UX professional. Start using the UX Case Study Template today and elevate your design narratives to new heights.

• Research & Design
• Career Resources
• UX & Design

Submit your template →

Do you have a great board to share with the world? We' ll help you turn it into a template to share with the community.

Similar templates

Super-Simple Portfolio Template

Best ATS-Friendly Resume Template

• Get started

Case Study Template

All the space you need to spotlight your business or product’s value including success metrics in Tome’s comprehensive Case Study template.

About this template

Capture the attention of potential clients with Tome’s Case Study template, designed to highlight the heavy-hitting impact your product had. Create a compelling narrative with a look at the successful metrics and hard numbers you drove in this case study alongside eye-grabbing headlines. Fill in details about the challenge you faced, key info on the target audience or customer base, and the solution you provided with the product built. There is ample space for punchy headlines and images to further illustrate your business and/or product.

Template outline

• Checkmark Overview
• Checkmark Highlight Statistics
• Checkmark Challenge
• Checkmark Solution
• Checkmark Result
• Checkmark Text-Only Layout
• Checkmark Image-Only Layout

Tell a powerful story

• Double Sparkle (tome icon) Editable with AI
• Text (tome icon) Beautiful typography
• Double Sparkle (tome icon) AI layout generation
• Page Portrait (tome icon) Narrative Guidance
• Multiple Pages (tome icon) Automatic mobile layout
• Reference (tome icon) AI reference sourcing
• Share (tome icon) Share or link anywhere
• Download (tome icon) Downloadable as a PDF
• Add Person (tome icon) Real-time collaboration

More templates

Consultancy Portfolio

RFP Response

User Research Plan

Seed Round Pitch Deck

Photo Album

1:1 Meeting

Product Design Review

Retro Theme

Expert tips, what is a case study.

A case study is an in-depth look at an individual or organization. Often they’re used to show the value of a product or service with real-life examples. Your company might walk potential customers through a breakdown of your current client’s success with a particular product. That can be a compelling way to market your products and grow your business.

Case studies are often found on company websites or white papers—or presented directly to potential clients. The key is creating an easily digestible document or presentation that succinctly conveys the value of your product or service. A case study template is a quick way to craft a compelling case study that’s ready to show to clients.

How long should a case study be?

Often a case study is a written document. This is the case when it’s embedded in a white paper or another promotional document. The traditional length for these case studies is 500–1,000 words. That length can provide enough detail without overwhelming the reader.

However, your case studies don’t need to be a full-length document. Instead, consider creating a visual presentation. This format can help you create a powerful narrative that’s going to stick with your audience. After all, images and numbers are more memorable. Utilizing them within your case study can help you capture the value you’re trying to show. Try this case study template to see how compelling your case study can become.

How to write a case study

Let’s dive into how to create your own case study using this Tome template.

Write a compelling headline.

• Start with a headline that immediately tells your audience exactly what they can expect. Think of it like an email subject line. You want to convey your main message in only a sentence—that way your readers understand exactly what’s inside even if they read no further. This case study template draws attention to the headline and makes it front and center.

Give an overview of the case study.

• Next up is the overview slide. This section is an opportunity to briefly summarize the main point of the entire case study. The overview is also your chance to introduce some key stats. Adding numbers is a powerful way to show the concrete value of your products. Potential buyers can see exactly what benefits the case study client experienced.
• The Tome case study template provides you with spaces for a brief paragraph, some key numbers, and context for the stats. It’s designed to give your clients a snapshot of the entire presentation.

Introduce the client.

• After setting the stage, it’s time to explain who the client in the case study is. Outline what they do and their target customers. You might even outline the demographics of their audience. Explain some key characteristics of their business strategy and how they were performing prior to working with your company. The Tome template provides an easy way to showcase your star customer.

Present the problem.

• Your products or services are designed specifically to solve problems. No case study is complete without explaining the challenge your client faced. That perfectly sets you up to illustrate exactly how your company can solve that problem.

Detail the solution.

• Once you’ve set everything up, it’s time to address how your product met the client’s specific needs. Outline your product details and how the customer utilized each one in their own business strategy. With Tome, you can add AI-generated images that make this section more impactful.

Show the results.

• Arguably the most important part of the entire case study is the results. This slide is where you sell your product. It’s where your audience sees how your product solves real-world problems. A well-made results slide can motivate your potential buyer to try your product because they can visualize what you can do for them. The Tome template makes this section the centerpiece of your entire presentation.

End with a call to action.

• Finally, give your audience something to do. After seeing the results, they’re likely motivated. Use that momentum and drive them to convert. You might encourage them to try a demo or to get in touch with your sales team. The Tome template provides an easy way to include your team’s information.

Transform your case study with AI

A well-designed case study can be a powerful tool to build your business and sell your services. It’s a way to show a potential buyer exactly what your team offers and the results they might expect. The key is creating an effective case study presentation. To save you time, Tome provides a case study template. This template gives you these advantages:

• Powerful AI that generates text and images
• Pre-built slides beautiful typography options
• Real-time collaboration and sharing capabilities

Improve your case studies with AI from Tome. Try the template.

Craft your next great idea.

• Get started Get started for free

Figma design

Design and prototype in one place

Collaborate with a digital whiteboard

Translate designs into code

Get the desktop, mobile, and font installer apps

See the latest features and releases

• Prototyping
• Design systems
• Wireframing
• Online whiteboard
• Team meetings
• Strategic planning
• Brainstorming
• Diagramming
• Product development
• Web development
• Design handoff
• Product managers

Organizations

Config 2024

Register to attend in person or online — June 26–27

Creator fund

Build and sell what you love

User groups

Join a local Friends of Figma group

Learn best practices at virtual events

Customer stories

Read about leading product teams

Stories about bringing new ideas to life

Get started

• Developer docs
• Best practices
• Reports & insights
• Resource library
• Help center

Figma Case study templates

Present your project in pre-built editable templates to get you started.

UX Case study template

UX Case Study Template made to help UX Designers create and organize their case study without any struggle.

Case study presentation template

Case study presentation to frame key insights and outcomes.

Long form research case study template with customizable styles.

Design presentation deck

Modern design deck template with multiple sections.

Visual portfolio template

Modern visual portfolio template with 12 column grid and light and dark themes.

Behance Presentation Template

Case study template with multiple components, visual styles and frame sizes.

Case study template

Case study template with pastel style coloring.

Holistic Case Study Template

Case study presentation template complete with project overview, wireframes and key journey insights.

Case study presentation layout for interview

Case study template with multiple app UI screens.

Portfolio UI - Web & Mobile

A portfolio UI for designers and developers which has 4 unique pages includes blog, case study.

Apple device mockups

Complete Apple device mockup screens for iPhone, Mac, iPad and Apple Watch.

Explore 1,000+ templates on the Figma community

Explore even more templates, widgets, and plugins—all built by the Figma community.

Ux Case Study

Ux case study, i. introduction.

The [Your Company Name] is a leading e-commerce platform specializing in fashion and lifestyle products. The Enhancing E-commerce User Experience case study delves into the intricate process of designing a user-centric digital shopping experience. This case study aims to showcase the meticulous research, innovative design strategies, challenges encountered, and impactful solutions implemented to enhance user satisfaction and usability.

II. Background

[Your Company Name] is a renowned player in the e-commerce industry, known for its commitment to delivering exceptional digital experiences. As part of our dedication to continuous improvement and user-centric design, the Enhancing E-commerce User Experience project was initiated to address specific user needs and elevate our platform's overall user experience.

III. Research Methodology

The research phase involved a combination of qualitative and quantitative methods, including:

User interviews

Competitive analysis

Data Analytics

Insights from these methods helped us understand user behaviors, preferences, pain points, and expectations, guiding the design process effectively.

IV. Design Process

The design process followed a systematic approach, including:

Ideation and concept development based on research insights.

Iterative wireframing and prototyping tested with real users.

Validation of design decisions and gathering feedback for refinement.

The final design aimed to create a seamless and intuitive shopping journey.

V. Challenges Faced

Throughout the project, several challenges were encountered, including:

Integrating personalized recommendations

Optimizing mobile responsiveness

Streamlining checkout processes

These challenges required creative problem-solving and close collaboration across teams to ensure a cohesive and effective design solution.

VI. Solutions Implemented

To overcome the challenges faced, innovative solutions were implemented, such as:

AI-driven recommendation algorithms

Responsive design enhancements

Streamlined checkout workflows

These solutions were rigorously tested and iterated upon to ensure they aligned with user needs and enhanced overall usability.

VII. Impact and Results

The implementation of design solutions resulted in significant improvements in key metrics, including:

20% increase in conversion rates

30% reduction in cart abandonment

15% boost in customer satisfaction ratings

User feedback also indicated a smoother and more enjoyable shopping experience, validating the success of the project.

VIII. Lessons Learned

The Enhancing E-commerce User Experience project provided valuable lessons, highlighting the importance of:

Data-driven decision-making

Iterative testing

Continuous user feedback loops

These lessons will guide future projects and contribute to our ongoing pursuit of excellence in e-commerce UX design.

IX. Conclusion

In conclusion, the Enhancing E-commerce User Experience case study showcases our commitment to delivering exceptional user experiences through user-centric design principles and continuous improvement. This case study serves as a blueprint for creating impactful and engaging digital shopping experiences that resonate with users and drive business success.

Prepared By:

[Your Name]

[YOUR POSITION]

[YOUR DEPARTMENT]

Case Study Templates @ Template.net