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

The Ultimate UX Case Study Template

behance 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!

behance case study template

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.

Image of a case study template generator

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.

Password protection feature for portfolios and case studies

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.

behance case study template

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.

Screenshot of a project overview section in a UX case study

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.

Screenshot of a survey section in a UX case study

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.

behance case study template

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.

Screenshot of UIs presented in a grid gallery

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.

behance case study template

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!

Facebook

100+ Behance Top Case Studies for UI/UX Designer

behance case study template

Find the best design inspiration for your next UI/UX case study

All the case studies mentioned in this list are chosen on the basis of how they represent their work structurally & visually.

This list is not based on my personal design biases, most case studies in this list are either featured projects on Behance or have very high appreciation by designers on Behance.

This resource has case studies in the following categories

  • Mindfulness
  • Finance & Banking

Still have any doubts?

Send your feedback or queries to [email protected] or drop a hi on LinkedIn

Building UI/UX Behance Case Studies from Scratch

Behance UI & UX Case Study Template

Yahia Anas

  • For designers
  • Hire talent
  • Inspiration
  • Advertising
  • © 2024 Dribbble
  • Freelancers

COMMENTS

  1. Case Study Template Projects :: Photos, videos, logos ...

    476 9.5k. Upgrade to Behance Pro today: Get advanced analytics, a custom portfolio website, and more features to grow your creative career. Start your 7 day free trial. Jump to Main Content. Behance is the world's largest creative network for showcasing and discovering creative case study template work.

  2. Free Case Study Template Design Projects

    UI UX Case Study Template Free Presentation For Behance. Amr Abd Elhady. 668 32.9k. Save. Dashboard Design System & Dashboard Builder. Zubaear Rahman. 300 6.2k. Save. Portfolio Template. ... Upgrade to Behance Pro today: Get advanced analytics, a custom portfolio website, and more features to grow your creative career. Start your 7 day free trial.

  3. Case-study Template Projects :: Photos, videos, logos ...

    UI UX Case Study Template Free Presentation For Behance. Amr Abd Elhady. 628 30.5k. Save. Case Study Template. Pexelart 001. 72 96. ... Upgrade to Behance Pro today: Get advanced analytics, a custom portfolio website, and more features to grow your creative career. Start your 7 day free trial.

  4. Tips and Tricks for Building a High-quality Case Study on Behance

    Brainstorming, materials prep, and concept building are key. If you skip those steps, you are probably creating a case study that doesn't do justice to the work you put into the project. Try to ...

  5. 15+ Case Study Templates

    Behance Presentation Template. Case study template with multiple components, visual styles and frame sizes. Learn more. Case study template. Case study template with pastel style coloring. Learn more. Holistic Case Study Template. Case study presentation template complete with project overview, wireframes and key journey insights.

  6. Behance Presentation Template UI/UX Case study

    Behance Presentation Template UI/UX Case study. This design is intended for designers who are confused about making a UI/UX design case study, and want to publish it on Behance. in this file there are several design pages and research : If you need design file for mobile page, just click here. Hope you enjoy guysss 👋👋👋👋👋.

  7. How to Build a Better Behance Case Study

    So you can combine both: Use super-catchy thumbnail for the first week or two and then change it to fit the rest of your project in your profile. 7. Get Featured. My approach is simple: Try to ...

  8. Free Behance Case Study

    Ali. Free Behance Case Study. Design file. 4. 130 users. Open in Figma. About. Comments 1. Download Free Behance Case Study and use it for your projects.

  9. How to design an amazing Behance Case Study

    Design amazing Behance case studies by Emmauel Akpan. Hello designers, so I'm sure you already know Behance is a top platform for design research, inspiration and a place to put out your work. If you're like me, you'll probably be spending a lot of time there just exploring the cool work designers are doing from all over the planet.

  10. UI UX Case Study Template Free Presentation For Behance

    Download (Figma File) to view personalized recommendations, follow creatives, and more. Owner. Amr Abd Elhady. Alexandria, Egypt. Follow. Hire. UI UX Case Study Template Free Presentation For Behance. The Xd file is fully layered and editable, you are free to use this file in whatever you want. #ui #ux #uidesign #uikits.

  11. The Ultimate UX Case Study Template

    The Ultimate UX Case Study Template. Ákos Izsåk. April 4, 2024. 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.

  12. UX Portfolio Case Study template (plus examples from successful hires)

    That's why I want to share with you this UX Portfolio Case Study template from UX Design Mastery.It 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.. How do you write a UX case study. The core idea is to try to break down your case study creation process into a writing ...

  13. Portfolio/Behance Case Study Template

    This UX Case Study Template is designed to help designers organise their case studies effortlessly. It includes essential components for covering UX research and design processes. The template's contents are easily editable, allowing designers to efficiently build their projects. Keep in mind that the presentation template serves as a guide ...

  14. Behance Case Study designs, themes, templates and ...

    Squire Patton Boggs Mobile Law App - Behance Case Study Like. United Ideas Team. Like. 51 7.6k View Trust Estate Mobile App Design. Trust Estate Mobile App Design Like. Mithun 🔥 Pro. Like. 38 7.2k Shot Link. View TSM Website Concept - Case Study. TSM Website Concept - Case Study Like. STRV Team. Like. 177 24k View Guidelines For Trust Estate ...

  15. Case Study Projects :: Photos, videos, logos, illustrations ...

    Multiple Owners. 1.2k 12.9k. Event Pro App - UX Case Study. Multiple Owners. 51 334. Doctor Appointment App UI/UX Case Study :) Salman S. 🎨. 181 5.2k. Upgrade to Behance Pro today: Get advanced analytics, a custom portfolio website, and more features to grow your creative career.

  16. Case-study Template Case Study Projects

    Behance is the world's largest creative network for showcasing and discovering creative work

  17. 100+ Behance Top Case Studies for UI/UX Designer

    Find the best design inspiration for your next UI/UX case study. All the case studies mentioned in this list are chosen on the basis of how they represent their work structurally & visually. This list is not based on my personal design biases, most case studies in this list are either featured projects on Behance or have very high appreciation ...

  18. Behance UI & UX Case Study Template

    Behance UI & UX Case Study Template. Yahia Anas. Available for work Follow Following. Like. Get in touch. Case study.xd. 6 MB. Download. Case study UI UX template.fig. 900 KB. Download. design developer graphic design illustration interactive logo ui user experince user interface ux. View all tags. Posted on Dec 10, 2022

  19. UI/UX Case Study Template

    Description: This UI/UX Case Study Template will help you to build a stunning & magnetic case study for your portfolio. This case study covers almost all categories of UX research as well as UI design. This Case Study is 100% fully editable so that you can easily edit it as per your project need.

  20. UIUX Case study template :: Behance

    UIUX Case study template. Explore and expand on knowledge and file from my templates of uiux case study, cv and invoice. Keep creating magic DOWNLOAD HERE https://www.f Read More. 370. 8.2k.

  21. Behance Case Study Presentation Template (Web & Mobile)

    The aim of this design is to assist designers who may be uncertain about how to create a UI/UX design case study and would like to showcase it on Behance. Template for both web and mobile design presentations. All you need to do is insert your own images into the phone mockups and modify the placeholder text. Additionally, you can include extra ...

  22. Behance Project Template

    Behance Project Template. Created this free template for designers who want to publish their work and case studies on Behance. Comes in two styles - colored and dark mode. Simply add your own images in the phone mockups and edit dummy text. You can add more sections as you might require. Duplicate and have fun with the file. Comment your thoughts.