Skip to main content
UI Coach Logo
Back to challenges
Easy

Present a Design Case Study

Design a portfolio case study that explains the problem, decisions, contribution, evidence, and outcome without exposing confidential work.

Responsive web

The brief

Understand the problem

Background

A portfolio should help a reviewer understand how someone thinks, not just display polished screens. Designers may also need to describe team work and redact client information.

User context

Ari is applying for product design roles and wants to present a checkout redesign completed with a researcher and three engineers under a confidentiality agreement.

Product problem

Dense project pages bury the narrative, while image-only pages fail to explain contribution or evidence. Confidential details need deliberate treatment.

Objective

Create a single responsive case study that communicates process and impact to a time-constrained hiring reviewer.

What to design

Define the experience

Required experience

  • Concise project overview with role and constraints
  • Narrative sections linking evidence to decisions
  • Responsive design artifacts with explanatory captions
  • Outcome and reflection with confidentiality context

Screens and states

  • Case study overview
  • Decision narrative
  • Artifact detail
  • Outcome and reflection

Core user flow

Follow the critical path

  1. 01

    A hiring manager scans the project summary and Ari's role

  2. 02

    They jump to one key design decision

  3. 03

    They inspect supporting research and the resulting interface

  4. 04

    They review measured outcomes and limitations

  5. 05

    They navigate to another project or contact Ari

Product rules

Requirements and constraints

Requirements

  • State the problem, scope, timeline, team, and personal contribution
  • Connect important decisions to evidence and constraints
  • Caption artifacts so they remain useful outside the visual sequence
  • Distinguish measured outcomes from interpretation
  • Handle redacted or reconstructed client material honestly

Constraints

  • A reviewer may spend less than three minutes initially
  • Some project details cannot be disclosed
  • The page must remain readable on a small laptop and phone

Reality check

States worth considering

A project has no public performance metrics
An embedded prototype does not load
A large process image is unreadable on mobile
The candidate's contribution changed across phases

Finish line

What to deliver

  • Design a responsive case-study page with at least four narrative sections and one mobile adaptation.

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#79674F
#EDE6D2
#090C0F
#B7B7B7
#A7A7A7
Font pairing
CorbenNobile

Corben & Nobile

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations