case study portfolio template

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.

We use cookies to enhance your experience. You can opt out of certain cookies. For more information, please refer to our privacy policy.

Case study portfolio for designers

Advantages of using this template

• Curated resources : Easily include links to case studies and project details.
• Embedded tools : Showcase designs directly from Figma for a seamless presentation.
• Real-time notifications : Get notified when clients access the document, ensuring timely follow-up and engagement.

Comprehensive presentation : This template showcases a designer's capabilities through detailed case studies and a curated portfolio, providing potential clients with a clear understanding of their skills and successes.

Interactive elements : The use of embedded Figma designs allows clients to interact with design mockups directly within the document, enhancing engagement and demonstrating technical proficiency.

Ease of access : Bookmark elements link to important resources, ensuring clients can quickly access detailed project information and additional resources without cluttering the main document.

Real-time notifications : The template notifies the creator when a client accesses the document, enabling timely follow-ups and improving client engagement.

Notch elements used

• Rich text editor : For detailed descriptions and structured content.
• Bookmark element : To link to important resources and detailed case studies.
• Embedded figma design : To showcase design mockups interactively.
• Signature element : For a professional and personalized sign-off.

When to use this template

Client presentations : Ideal for presenting your work to potential clients during pitches or proposals.

Portfolio showcases : Use it to create a professional portfolio that highlights your best work and design process.

Case study documentation : Document and share detailed case studies with existing or potential clients to demonstrate your expertise and successful project outcomes.

About this template

A case study and portfolio template for designers is essential for showcasing expertise and successful projects to potential clients. This template uses Notch elements like the rich text editor, bookmark, and embedded Figma designs for interactive presentations. It's perfect for client presentations, portfolio showcases, and documenting case studies. Key benefits include comprehensive presentation, interactive elements, ease of access, and real-time notifications, enhancing client engagement and showcasing technical proficiency. Use this template to create a professional and impactful portfolio.

Related templates

Wedding photography contract

A wedding photography contract is a legal document between a couple and a photographer outlining the terms and conditions for capturing photos and videos at the wedding event. It specifies the date, time, location, specific requirements for the media, and the photographer's obligations and responsibilities.

Marketing agreement

A marketing agreement is a document that sets forth the terms and conditions under which a marketer assists clients with their marketing activities. Marketing services include creating brochures, websites, advertisements, pamphlets, and sales letters. This agreement ensures both parties understand their obligations and expectations.

Subcontractor agreement

A subcontractor agreement is a legally binding document between a subcontractor and a contractor (often a general contractor) that outlines the terms and conditions for a specific portion of work on a larger construction project. It details aspects such as the scope of work, payment terms, licensing requirements, and other crucial elements to ensure that both parties understand their responsibilities and expectations.

Commission agreement

A commission agreement is a formal contract between an employer and a salesperson that outlines the terms for earning commissions based on sales performance. It specifies how commissions are calculated, the payment schedule, and other important terms to ensure both parties understand their compensation structure and obligations.

Questions? We're glad you asked.

Can’t find the answer you’re looking for? Reach out to our customer support team.

What is Notch?

Notch is a web-based document editor designed to create, share, and execute contracts and offers with ease. It combines Notion-like drag-and-drop creation with actionable features like signing and payment collection.

How is Notch different from PandaDoc?

While PandaDoc is powerful, it often feels overwhelming with its extensive features. Notch simplifies the process, focusing on ease of use and actionable documents. It combines document creation with signing and payment features, making it perfect for service-based teams, freelancers, and agencies.

How is Notch different from DocuSign?

DocuSign is great for simple signing tasks but lacks document editing capabilities. Notch offers both document creation and execution features, providing a comprehensive solution for client-facing documents that require signatures and payments.

How is Notch different from Notion?

Notion is excellent for collaborative wikis and knowledge management, but it lacks actionable features. Notch fills this gap by allowing you to create interactive documents that can be signed and paid for directly within the platform.

How easy is it to onboard my team to Notch?

Notch is designed with user-friendliness in mind. We provide onboarding resources such as tutorials, webinars, and a dedicated customer success team to help your team quickly become proficient with the platform.

Get more docs signed

More actionable than Notion. More collaborative than PandaDoc. More interactive than a PDF.

• Up to 5 spaces
• Unlimited team members
• Unlimited client invites
• Unlimited signatures