UI | UX Case Study Free Template cover image

ux case study template xd download

UX Design Mastery

Get started with a career in UX Design

ux case study template xd download

UX Case Study Example #1 plus free template

In my last article , I shared the free UX Portfolio Case Study template that I developed 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.

We explored what recruiters look for in UX job applications/portfolios and then dived into successfully structuring any UX case study, even conceptual projects .

What you are going to learn

Today I wanted to go a step further and walk you through how to fill in the UX Portfolio Case Study template from scratch and I will use an example UX case study from my portfolio. 

ux case study template xd download

The core idea is to try to break down 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 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.

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)

Let’s begin.

The project

The UX portfolio project I will use is one I did as a Senior Designer at a digital marketing agency. The brief was to create a responsive website/microsite for an annual financial publication for an Asset Management company. 

Now 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 simple. I used the name we had for the project at the agency. It’s brief enough to fit any case study cover but does show the brand name, and the nature of the product, a journal. I added a sub-title to further explain what the heading means, and give more context around the project title.

ux case study template xd download

2. Client/Company/Project type

Length:1 line

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

ux case study template xd download

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.

ux case study template xd download

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 note down all the activities I did on a high level, for the project over the course of several months.

ux case study template xd download

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 addresses how we would know we had done a good job.

ux case study template xd download

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.

ux case study template xd download

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.

ux case study template xd download

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.

ux case study template xd download

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. 

ux case study template xd download

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 use the template content on a site 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 then just upload the images.

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:

  • A video or gif of the final product
  • A prototype
  • Brand imagery to create immersive narrative

UX Case Study Folder structure

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

  • RAW ( I collate screenshots of the final project, UI designs and wireframe exports in here)
  • Images (Relevant visual imagery that can be interlaced between project sections)
  • Videos (Optional. In most cases there won’t be one)
  • Behance submission (Final design exports for Behance upload)

ux case study template xd download

Here are some of the final design screens with the text we filled out in the UX Portfolio Case Study template. Go to this link to view the full case study .

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

ux case study template xd download

The About and challenge sections come directly after that.

ux case study template xd download

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

ux case study template xd download

And lastly the results to round off the case study.

ux case study template xd download

Here is the link to my portfolio and other UX case studies.

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

If you 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 including 20 online case studies and example scripts for each case study section.

ux case study template xd download

DOWNLOAD GUIDE

What to read next:

ux case study template xd download

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 template xd download

UX Case Study Example #2 plus free template

In Getting started

Axure RP vs Sketch

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

ux case study template xd download

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

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

The Ultimate UX Case Study Template

ux case study template xd download

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!

ux case study template xd download

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.

ux case study template xd download

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.

ux case study template xd download

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.

ux case study template xd download

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

ux case study template xd download

EXPERT TIPS + TEMPLATES

Ui/ux design case study templates + tips.

ux case study template xd download

What's Included

Ui/ux design case studies, best practices.

ux case study template xd download

Ready to take design as your career seriously?

There is only so much you can do on your own when it comes to a major career change – don’t do it alone. Spend the next 6-8 months studying with your own expert instructor dedicated to your success and make your new design career come to reality by enrolling either in School of Design or Portfolio School .

You May Also Like

ux case study template xd download

UI/UX Design School Comparisons

We’ve put together a comparison guide based on data pulled from the websites of major UI/UX design schools. We compared the top 12 most popular programs on the market.

ux case study template xd download

UI/UX Designer Salary Guide

ux case study template xd download

UI/UX Design Interview Questions

ux case study template xd download

© 2024 Path Unbound, LLC. All Rights Reserved. 1317 Edgewater Dr #6683 Orlando, FL 32804

Student reviews, free downloads.

UX Case Study

854 inspirational designs, illustrations, and graphic elements from the world’s best designers. want more inspiration browse our search results ....

Furniture App Design Case Study add to cart behance behance project case case study chair app e commerce ecommerce app ecommerce business ecommerce shop fashion app furniture furniture shop furniture store furniture website portfolio shopping app shopping cart sofa ux case study

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

UX Case Study Presentation Template

ux case study template xd download

What you'll get

Used by designers and teams from, product overview.

  • Without a solid structure, presenting a UX case study can feel disjointed or scattered. Designers also often struggle to pinpoint the most impactful highlights of their work.
  • Our UX Case Study Presentation Template captures all the important details. It gives you a clear guide to confidently show off your work, even in stressful situations like job interviews.
  • Quickly set up your UX case studies and remove the repetitive work of creating new documents. This template organizes your content to tell a polished story that showcases your successes.
  • Customize your presentation with preset elements for consistency. Use sections to define problems, identify insights, and propose solutions.
  • A well-crafted UX case study presentation can help you land new opportunities. Turn your UX case studies into a powerful narrative that impresses clients and stakeholders.

How will it help me?

  • Set up your document in seconds: Get everything you need in one straightforward template. There's no need to keep creating the same document for every new case study
  • Organize content effortlessly: Sort all the information you need with pages neatly arranged
  • Improve your workflow: Work smarter with a professional presentation that showcases your attention to detail
  • Keep it all consistent: Build the presentation to fit your brand's identity. Customize your style with color schemes, typefaces, and more
  • Template pages: Capture your UX case study in 22 pre-designed pages to guide your study ‍
  • Presentation-ready slides: Present anytime with responsive slides and a 16:9 ratio
  • Customizable style guide: Keep your presentations on-brand by customizing color schemes, fonts, and more
  • Well-defined sections: Identify key information with sections for problems, insights, solutions, and conclusions
  • Structured content: Essential elements for a strong presentation in a fuss-free, straightforward design
  • Easy navigation: Form seamless narratives with content flow arranged logically

Requirements

  • A basic understanding of UX/UI design principles and Figma
  • A desire to improve your case study presentations
  • A laptop or desktop computer with steady internet access
  • A Figma account (recommended)

Who is this product for?

Students & Junior Designers ‍

Kickstart your design career with a professional and well-organized template.

‍ Senior Designers

Highlight your design expertise by showcasing your work's depth and attention to detail.

Independent Freelancers ‍

Win over new clients and secure more projects with a polished, cohesive presentation.

Design Teams & Startups ‍

Showcase your team's achievements in a compelling and streamlined narrative.

What to expect from a Designership product

Frequently bought together.

ux case study template xd download

Practical UX Research & Strategy

ux case study template xd download

Figma Annotation Kit

Testimonials.

ux case study template xd download

Variety matters. A wider selection of component variants to work with ensures a broader audience gets the best possible experience. That’s why Shipfaster UI 2.5 is packed with new components, even more variants, and refined states.

  • Updated icon set in the latest heroicon
  • New "labels" text style in typography foundation to differentiate from paragraphs and headings
  • More grid layouts for a responsive guide to sidebar grids
  • More sizes and enhanced colors for Focused rings
  • New flag resource with complete country names and ISO
  • Added updated social and media logo icons
  • New pie chart components
  • New chip components
  • New video player components
  • More variant styles and enhanced states for accordions
  • More variant styles for badges
  • More variant styles and enhanced states for breadcrumbs
  • New icon, social, and social group components for buttons
  • New organizational components and templates for data display
  • New and specific date and time picker with more variants
  • More variant styles and enhanced states for file uploads
  • More variant styles and enhanced states for form control
  • More variant styles and enhanced states for inline alerts
  • Enhanced states, layout and component properties for input fields
  • More variant styles and enhanced states for loaders
  • More variant styles and enhanced states for progress bars
  • Marketing pages samples now have all responsive views from desktop to mobile

Shipfaster UI v.2.5 is updated just for you. We aim to bring you an elevated design experience with regular design system updates. Be the first to know about the latest news and changes to Shipfaster UI by subscribing to our newsletter.

ux case study template xd download

Meet Shipfaster UI v2.6: Your new and improved design UI kit! 🚀 We've upgraded our components and added user-friendly variants to simplify your design process. Get ready for clearer labels, more dynamic states, and a sleeker interface. Plus, we've fixed the small issues and made finding icons a breeze.

Shipfaster UI v2.6 is all about making your design work faster and easier. Speed up your workflow—see the changes below.

  • Improvement and configuration of all the main components
  • Refined semantic naming and dynamic states
  • New & improved variants for:
  • Progress Step and Progress Bar
  • Input Fields
  • A new set of icons for File Formats
  • Improved semantic naming and states
  • New header variants in the marketing samples
  • Modified neutrals for better contrast and compatibility with our main primary color
  • Improved Video Player component
  • Fixed missing component properties and variants
  • Descriptions and tags for easier searching of icons
  • New and refined visuals for marketing sections
  • Off-site component documentation

Shipfaster UI v.2.6 is updated just for you. We aim to bring you an elevated design experience with regular design system updates. Be the first to know about the latest news and changes to Shipfaster UI by subscribing to our newsletter.

ux case study template xd download

We realised there was a small issue with some members not being able to load all the images in the design file. What we have learnt is that Figma is a browser-based app which means it’s subjected to a 2GB available memory limit that applies to each browser tab, including those in the desktop app. When loading or editing Figma files nears or or exceeds this memory limit, it can cause performance issues like long load times, crashes and others. Please keep in mind when using our design system, to limit the number of browser tabs you have opened.

  • Updated file thumbnails.
  • Moved checkboxes, radio buttons and toggles into a new section called Form Controls.
  • Compressed all JPG images in the file to reduce file size.
  • Members that raised images not loading have confirmed this has solved their issues.

A few members reported seeing ‘3 missing libraries’ upon importing the design system.

  • Fixed mission libraries issue.

Figma made some major updates to their platform in May 2022. This included component properties, a re-designed Autolayout, dark mode and much more. In v.2.3 of Shipfaster UI, we have decided to introduce a number of updates that have helped improve the kit’s performance and it’s relevancy with the latest updates.

  • Removed .styled components to improve the performance of our design system.
  • Updated all components with the new component properties and Autolayout feature.
  • Updated all templates with the revised components.
  • Migrated our icon system from ‘component variants’ to individual components, to allow for an improved toggling experience.
  • Added tablet and mobile versions for all templates.
  • Provided pre-designed templates for quick use.
  • Included a Shipfaster Starter template for anyone that wants to use a lighter version of our design system.

ux case study template xd download

With Shipfaster 2.4, we’ve focused on adding new styles and components in the Foundation section. There are new secondary color ranges, graphic elements and an all new featured Mockup page to supercharge the way you present your designs. We’ve fine-tuned every detail in v.2.4 of Shipfaster UI to help elevate your designs and keep up with the latest trends in the industry.

  • 10 new linear palette gradient options
  • 10 new mesh gradient palette options
  • Enhance Shadows to complement UI designs with natural-looking shadows
  • New blurred option (XXL) for Blurs
  • New 3D graphic elements to enhance your designs visuals
  • New divider lines to create spaces and sections in your designs
  • An all-new dedicated Mockup page which includes:
  • Credit card
  • iPhone 14 Pro
  • Screen Mock Up
  • iPad landscape & portrait
  • Macbook Pro
  • New avatar components including:
  • Integrated avatar icons with indicator for badges, status, and notifications
  • Shape variant for the master component to easily switch up avatar shape
  • New breadcrumb variants with updated indicators
  • Updated designed marketing sections and pages with all new mock-ups and avatars, new secondary color palette (with over 12 color ranges) for more color options

ux case study template xd download

Today we’re excited to announce the launch of our Shipfaster UI - A Figma Design System 2.0 🎉 This is our first major upgrade and overhaul to our design system.

  • 150+ new global design styles.
  • 2,800+ new media assets.
  • 6,000+ components and variants.
  • 140+ template examples.
  • Written instructions for every key component.
  • Master components provided with all primary components.

Frequently asked questions (FAQs)

What's the ux case study presentation template for.

The UX Case Study Presentation Template from Designership is a template that helps designers explain their work clearly and confidently in job interviews or meetings. It guides you to organize your design steps, choices, and results in an engaging way.

Is the UX Design Case Study Template free?

Yes, this is a premium template that Designership provides to help you give your project presentations a professional and consistent look.

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

Absolutely. You can easily customize the UX Case Study Template to match your own brand, including your colors, fonts, and style, to make it truly yours.

How many sections does the UX Case Study Presentation Template have?

Our UX Case Study Presentation Template comes with organized sections to define problems, insights, solutions, and conclusions. This is so that you don't miss any key details in your presentations. It has everything need to cover every part of your case study.

Can I use the UX Case Study Template in Figma?

Yes, this template works in Figma.

How will the template help organize my case study?

The template gives you a clear outline to follow. It guides you through each step of your case study, from the challenges and solutions to the methods you used and the results you achieved. That way, you tell a clear story of your project.

What sets this UX Case Study Template apart from other templates found online?

Our UX Case Study Template is crafted to help you tell the story of your project in a compelling way. It's designed for easy customization, thanks to expert input from Michael Wong (Mizko).

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

It's best to use this template in Figma to get the most out of its features, but it's also made to be flexible enough for use with other design tools.

How can I learn UX Research?

A quick Google or Youtube search can teach the theory behind UX research. But if you want to apply what you learn in the workplace, take our Practical UX Research & Strategy Course. Learn how to apply tactical UX research strategy to your designs and make better-informed decisions. This course takes you through the entire UX research process, from planning your research strategy to getting insights from participants and presenting data-backed design solutions. By the end of the course, you'll be able to deliver business-driven designs and gain the confidence of stakeholders and clients with actionable insights and clear strategies.

Start designing today!

Enter your email address to receive the resource file.

ux case study template xd download

Master highly-demanded skills in hours not weeks

ux case study template xd download

Ultimate Figma Mastery

Ux research & strategy.

ux case study template xd download

UX/UI Design Course

Fast-track your design process.

ux case study template xd download

Shipfaster UI: Figma UI Kit & Design System

ux case study template xd download

Join our newsletter

ux case study template xd download

Get 10% off on your first purchase

IMAGES

  1. UI

    ux case study template xd download

  2. Free UI/UX Case Study XD Template

    ux case study template xd download

  3. UX Case Study Template

    ux case study template xd download

  4. UX Case Study Template

    ux case study template xd download

  5. UX Case Study Template

    ux case study template xd download

  6. UI

    ux case study template xd download

VIDEO

  1. UI/UX Portfolio Case Studies that got us HIRED

  2. How to write UX/UI case studies for your design portfolio

  3. UX Case Study Review

  4. UI/UX Case study

  5. UI/UX Case Study Final 21.05.24

  6. To use this free UX Case Study Template visit: http://miro.com/uxstudy #designer #casestudy #ux #ui

COMMENTS

  1. UI UX Case Study Template Free Presentation For Behance

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

  2. Free UI/UX Case Study XD Template

    Available Format: .Xd. Category: Wireframe Kit. License: Free for personal projects. File Size: 3 MB. Download file type: Zip file. Author: Amr Abd Elhady. Download the latest version of Adobe Xd for free. Download "Free UI/UX Case Study Template" Downloaded 3578 times - 112 KB. App Design Application Design iOS Mobile Template Wireframe ...

  3. UX Case Study Template

    Description: Carex is a UX Case Study Template made to help UX Designers create and organize their case study without any struggle. It covers almost all the UX research processes and methods making it easier for designers to build and enhance their projects. The contents in the template are created as easily editable components so that the ...

  4. Casey

    Description. Casey is a UX Case Study template made to help UX designers seamlessly organize their case studies. It is made up of a large number of the UX research methods, making it a desirable tool for designers. It has a rich set of components that are easily editable and includes a dark mode version, so you can make your presentation stand out. ...

  5. UI

    The first step in the UX design process is the design document we usually start with a UX case study, this is a free case study template of (user experience design process), you will find: 1- Scope of work 2- Persona 3- User flow with content and functionality mappings. 4- Wire Frame 5- UI Design the case study was made with @adobexd, you can import the files with the other UX designs platform ...

  6. UX Case Study Template (Free)

    A UX case study tells the story of how you improved the user experience (UX) of a product. It highlights the problem users faced, your research to understand their needs, the design solutions you created, and the positive impact those solutions had. Think of it as a mini-documentary showcasing your design thinking process and the success of ...

  7. UX Case Study Example #1 plus free template

    Now 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 simple. I used the name we had for the project at the agency.

  8. UI

    Advanced analytics, your own customized portfolio website, and more features to grow your creative career. Start your 7 day free trial. Free case study template of user experience design process, you will find: 1- Scope of work2- Persona 3- User flow with content and functionality mappings. 4- Wire Frame5- UI Design.

  9. UI

    Free case study template of user experience design process, you will find: 1- Scope of work2- Persona 3- User flow with content and functionality mappings. 4- Wire Frame5- UI Design.

  10. Free Adobe XD File Website Templates, UI Kits & Resource Downloads

    Download The latest free Adobe XD templates file, UI kits, Mockups, Wireframe, Tutorials, and Xd, Sketch, Figma resources files. ... Free UI/UX Case Study XD Template. Free Adobe Xd Wireframes by Amr Abd Elhady. Load More . Congratulations. You've reached the end of the internet.

  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. Behance UI & UX Case Study Template

    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 ... Behance UI & UX Case Study Template designed by Yahia Anas. Connect with them on Dribbble; the global community for designers ...

  13. UX Case Study Template

    UX Case Study Template. Description: The Comprehensive Case Study Template is a thoughtfully designed Figma file created to help you showcase your projects and share your design process with the Figma community. This template is perfect for designers, researchers, and UX professionals who want to present their work in a clear and engaging manner.

  14. UX Portfolio Case Study template (plus examples from ...

    Show your overall project steps, why you chose the methods you used, Recruiters want to see all the relevant design artifacts that you produced from sketches to visual mockups to prototypes. Here are some examples for showing the overall process: Slyvia Yu, SimpleLegal. Slyvia Yu, SimpleLegal. Bre Huang, Uber.

  15. UX Case Study Example #2 plus free template

    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 wanted to walk you through another UX case study example on how you can use the UX Portfolio Case Study template from ...

  16. UI/UX Design Case Study Templates

    Templates. To help ease your workload, we have included a case study template that can be applied to all kinds of design-related projects.With our template, you can be assured that your case study presentation is concise, on-point and engaging, which are all the elements you need to get that coveted design job.

  17. UX Case Study designs, themes, templates and downloadable graphic

    Print. Product Design. Discover 800+ UX Case Study designs on Dribbble. Your resource to discover and connect with designers worldwide.

  18. UX Case Study Presentation Template

    Template pages: Capture your UX case study in 22 pre-designed pages to guide your study. ‍. Presentation-ready slides: Present anytime with responsive slides and a 16:9 ratio. Customizable style guide: Keep your presentations on-brand by customizing color schemes, fonts, and more. Well-defined sections: Identify key information with sections ...

  19. 15+ Case Study Templates

    UX Case Study Template made to help UX Designers create and organize their case study without any struggle. ... Case study template with multiple components, visual styles and frame sizes. Learn more. ... Adobe XD; Framer; Miro; Company. About us;

  20. Starbucks UX UI Case Study Template (Download) :: Behance

    Starbucks UX UI Case Study Template (Download) This is a Starbucks Website Redesign Figma Template. Designed for Designers who needs to create a behance case study. You can get this figma fil Read More. 110. 2.2k. 12. Published: August 17th 2021. Creative Fields. UI/UX. Web Design

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

  22. Free UX Case Study Template (Google Doc)

    This UX case study template will help you write the story of each project for your UX portfolio. This free Google Doc will show you how to write about your UX projects and stand out as a candidate. Learn the 7 questions a UX case study should answer. Find the right balance of detail recruiters look for.

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

    Starbucks UX UI Case Study Template (Download) Salim Dabanca. 110 2.2k. Save. Baxstyle / UI/UX Case study/ Hairstyle Booking App. Ayodele Timothy Adebodun. 5 22. Save. Pitch Deck Presentation. Salma khatun ( Goldenpixel) 143 1.3k. Save. Brand Strategy Template. Creative Slides. 106 674. Save. Design Portfolio Template. Mukhlasur Rahman.