A Case Study Format For Emerging Designers

A versatile and user-centered approach to consider

A man with red hair, a gold shirt, and teal pants presenting image and text content on a webpage.
Source: DrawKit

The Framework

Brief Overview Section Structure

  1. Context
  2. Problem Definition
  3. Approach
  4. Customer & Business Impact
  5. Artifacts
Three columns are pictured (poor, ok, and great). Each column has 5 rectangles (context, problem, approach, output, and outcome). Rectangles are highlighted depending on what signifies a poor, ok, and great portfolio.
Source: An effective product design portfolio — Structure by Budi Tanrim
  • Experiment with how you would like to word things
  • Keep in mind that your goal is to be concise (this can be tricky)
  • Try to pull out the most important details
  • Place more visuals at the top — oftentimes, this is what draws people in and encourages them to read more

Detailed Process

Project Background




  • Did you set up any systems (ex: components, naming conventions) before getting to work on the visual design?
  • What were your initial designs?
  • How did you test your initial designs?
  • What were the most impactful user testing findings?


A mobile phone screen is centered against a lilac background with the text “What Changed?” at the top. There are annotations pointing out the changes made to an interface over time.
Highlighting the “why” behind my design decisions


  • Outcome
  • Future recommendations/testing initiatives
  • Other deliverables (ex: design system, marketing site)


Other Considerations

Responsive Web Design


  • At the bottom of your case study, add links to the next and previous projects
  • Set the position of the top navbar to fixed so it’s always available when scrolling
  • Have a logo? Link it off to the home page (this is a common approach)
  • Add a persistent back-to-top button


A mobile phone screen depicting the use of a lightbox in Webflow.
Webflow lightbox

Table of Contents

A glimpse of a case study in a portfolio. A red arrow is pointing to a table of contents that sits along the left side of the screen.
Table of contents

Type Hierarchy & Spacing



Product designer at Gusto — celinefucci.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store