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

Research

Explorations

Execution

  • 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?

Refinements

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

Solution

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

Reflection

Other Considerations

Responsive Web Design

Navigation

  • 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

Lightbox

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