Skip to content
codexa

Portfolios · React

Product designer

Case-study portfolio for a product designer, with process, experience timeline and references.

Use this templateRemix
Product designer starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A clean portfolio for a product or UX designer: four case studies with outcomes, a three-step process, an experience timeline, references from colleagues and a contact form for new roles. All content lives in src/site.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/portfolio-product-designer

Explorer 13

src/site.ts
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = {  "brand": "Mira Okafor",  "nav": [    {      "label": "Work",      "href": "#work"    },    {      "label": "Process",      "href": "#process"    },    {      "label": "Experience",      "href": "#experience"    }  ],  "navCta": {    "label": "Get in touch",    "href": "#contact"  },  "sections": [    {      "kind": "hero",      "variant": "split",      "eyebrow": "Senior product designer · Toronto",      "title": "I design the boring parts of software so people stop calling support.",      "text": "Eight years on onboarding, billing and settings flows for B2B tools. I work closely with engineers, test early with real customers, and measure what changed after we ship.",      "primary": {        "label": "View case studies",        "href": "#work"      },      "secondary": {        "label": "Get in touch",        "href": "#contact"      },      "visual": {        "type": "mock",        "title": "Payroll onboarding redesign",        "rows": [          {            "label": "Setup completion",            "value": "61% → 84%"          },          {            "label": "Median time to first payroll",            "value": "6 days → 2 days",            "tone": "#0f766e"          },          {            "label": "Setup support tickets",            "value": "−38%",            "tone": "#b45309"          },          {            "label": "Steps in the flow",            "value": "14 → 7",            "tone": "#475569"          }        ],        "footer": "Measured over 90 days after launch, March 2026"      },      "note": "Open to senior and staff roles from January 2027."    },    {      "kind": "projects",      "id": "work",      "eyebrow": "Selected work",      "title": "Case studies",      "items": [        {          "title": "Payroll onboarding",          "tag": "Cut setup from 14 steps to 7 for 3,000 small businesses",          "year": "2026",          "tone": "#115e59"        },        {          "title": "Usage-based billing",          "tag": "New invoices and plan page for a developer platform",          "year": "2025",          "tone": "#334155"        },        {          "title": "Permissions model",          "tag": "Roles and access settings for 40-seat teams",          "year": "2024",          "tone": "#3f6212"        },        {          "title": "Design system v2",          "tag": "Tokens, 60 components and the docs that went with them",          "year": "2023",          "tone": "#7c2d12"        }      ]    },    {      "kind": "steps",      "id": "process",      "eyebrow": "Process",      "title": "How I usually work",      "items": [        {          "title": "Find the real problem",          "text": "Read the support tickets, sit in on sales calls and look at where people drop off before drawing anything."        },        {          "title": "Prototype with engineers",          "text": "Low-fidelity flows reviewed with the people who will build them, then tested with five to eight customers."        },        {          "title": "Ship and measure",          "text": "Agree on one or two numbers before launch and check them again at 30 and 90 days."        }      ]    },    {      "kind": "timeline",      "id": "experience",      "eyebrow": "Experience",      "title": "Where I've worked",      "items": [        {          "period": "2023 – now",          "title": "Senior product designer, Ledgerline",          "text": "Payroll and billing for small businesses. Lead designer for onboarding and payments."        },        {          "period": "2020 – 2023",          "title": "Product designer, Northpass",          "text": "Developer platform. Built the design system and owned billing and usage pages."        },        {          "period": "2018 – 2020",          "title": "UX designer, Harbour Digital",          "text": "Agency work for health and public-sector clients, mostly forms and accessibility."        },        {          "period": "2014 – 2018",          "title": "BDes, OCAD University",          "text": "Interaction design. Thesis on form errors and how people recover from them."        }      ]    },    {      "kind": "quotes",      "eyebrow": "References",      "title": "From people I've worked with",      "items": [        {          "quote": "Mira's specs were the first ones our team didn't have to ask follow-up questions about.",          "name": "Daniel K.",          "role": "Engineering lead"        },        {          "quote": "She talked us out of a feature nobody needed and into the one that moved activation.",          "name": "Sophie L.",          "role": "Product manager"        },        {          "quote": "Patient with research participants, blunt in design reviews. Exactly the right balance.",          "name": "Arjun S.",          "role": "Head of design"        }      ]    },    {      "kind": "cta",      "title": "Want the full case studies?",      "text": "Longer write-ups with research notes and prototypes are available on request.",      "primary": {        "label": "Request the deck",        "href": "#contact"      },      "secondary": {        "label": "Back to work",        "href": "#work"      }    },    {      "kind": "contact",      "eyebrow": "Contact",      "title": "Let's talk",      "text": "Hiring, a contract project or a question about one of the case studies. I reply within a few days.",      "fields": [        "name",        "email",        "company",        "message"      ],      "button": "Send message"    }  ],  "footer": {    "text": "Product designer in Toronto, working on B2B software.",    "columns": [      {        "title": "Elsewhere",        "links": [          "LinkedIn",          "Read.cv",          "Dribbble"        ]      },      {        "title": "Contact",        "links": [          "mira@okafor.design"        ]      }    ],    "legal": "© Mira Okafor. Sample content: replace it in src/site.ts."  }};

Remix

Remix this template

Describe what to change and the agent starts from Product designer's files. The box is already started for you: finish “Start from Product designer and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on Product designer

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates