UX Portfolio Case Study: The Making of…

Posted on:  


tag: UI 

The Project

Source: Pedzai, C. (2022). UX Case Study Example #2 plus free template. Retrieved from https://uxdesignmastery.com/ux-case-study-example-2-plus-free-template/

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.

![Examples](https://cdn-images-1.medium.com/max/1455/1*NgVFljFqaCdxfdF48SNCCw.jpeg)
Final design

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

The Template

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

![Examples](https://cdn-images-1.medium.com/max/1455/0*HRMOV7XATpQFzYZu.gif)

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

This also allows you to plan more effectively what design artifacts you need in your case study. It’s a system by which you can rapidly roll out multiple case studies without forgetting anything 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

  1. Project Title & Subtitle (A headline and subtitle that indicates the name and goal of the project)
  2. Client/Company/Project type
  3. Project date (When did you work on the project)
  4. Your role (What you were responsible for on the project)
  5. Project Summary/About this Project (An overview that summarizes the project, goal and results)
  6. 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)
  7. Solution (What method/process were used to solve specific problem, user needs, business requirements and/or pain points? How did features address the objectives?)
  8. Results (Project success metrics, awards, reflections, project next steps and/or lessons learnt)

Making it as concise and easy as possible to digest

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 explain further what was built for the client and give more context around the project title.

![Examples](https://cdn-images-1.medium.com/max/1455/1*g-DWPEjsa9se9nBEQN9ZdA.jpeg)

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.

![Examples](https://cdn-images-1.medium.com/max/1455/1*HfrlYdpq7x2eYy98SePg6Q.jpeg)

3. Project date/duration

Length:1 line

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.

![Examples](https://cdn-images-1.medium.com/max/1455/1*rkpza4MQZowe-4pc9ugN0w.jpeg)

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.

![Examples](https://cdn-images-1.medium.com/max/1455/1*EOi6fBf93On33gqw0Wb8tA.jpeg)

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.

![Examples](https://cdn-images-1.medium.com/max/1455/1*1cScf97g7ZZu1RM9yDmC7w.jpeg)

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.

![Examples](https://cdn-images-1.medium.com/max/1455/1*QESlWHDFiswF__pIIXAO4w.jpeg)

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.

![Examples](https://cdn-images-1.medium.com/max/1455/1*pjkZ_aSwYueQPO5BozrQzg.jpeg)

8. Results

Length: 1 paragraph

The critical last section concludes the case study by outlining any achieved project success metrics. 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.

![Examples](https://cdn-images-1.medium.com/max/1455/1*y5sIB1v2MGUBhlHywL9DDg.jpeg)

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

![Examples](https://cdn-images-1.medium.com/max/1455/1*ATmE5IPiTpUxOpupOLSxoA.jpeg)

Putting it together

This part is really up to you and how you tackle it will depend on where you will 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.

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:

UX Case Study Folder structure

A folder structure is useful for organizing your assets. The following folders are recommended.

![Examples](https://cdn-images-1.medium.com/max/1455/1*j9Qurm6XNgS7mHXJfGuyoA.jpeg)

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 covers most of our UX case study sections in one go, which is super important for recruiters with limited time.

![Examples](https://cdn-images-1.medium.com/max/1455/1*akWxlez-cmbTfhh4lqBGEA.jpeg)

The About and challenge sections come directly after that.

![Examples](https://cdn-images-1.medium.com/max/1455/1*DB2_Izln61WVWFdoTUPJ-g.jpeg)

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

![Examples](https://cdn-images-1.medium.com/max/1455/1*B6qjy5lAhgWaWX9kGSAl1w.jpeg)
![Examples](https://cdn-images-1.medium.com/max/1455/1*b9cYLnnnNSmw7hBMOua4pw.jpeg)
![Examples](https://cdn-images-1.medium.com/max/1455/1*oHwLCI1xiSHBjBFrjyPsYQ.jpeg)
![Examples](https://cdn-images-1.medium.com/max/1455/1*NgVFljFqaCdxfdF48SNCCw.jpeg)

And lastly the results to round off the case study.

![Examples](https://cdn-images-1.medium.com/max/1455/1*YW7OHgfXA7Ljw8xF-tE4EQ.jpeg)



Code


Art


Design


UI/UX


Video


Projects


Social