All workFrame 08 / 08

CASE 08 — Product · Design system

Call sheetProd. No. 08

Production
Pulse
Client
Pulse Analytics
Category
Product · Design system
Year
2025
Role
Design system, React
Team
4 people

DirectorMara Voss

Pulse for Pulse Analytics

The short version

A dashboard and 140-component design system in Figma and React.

Outcome

140

140 components, 1 source

SC 01

Pulse Analytics came to me with a clear goal and a short runway: turn a promising idea into something real people use — and ship it, not just show it.

The job was to find the few things that mattered, design them properly and build them to the same standard. We worked as one small team — 4 people, one channel and a review every Friday — so what was designed on Monday was in the browser by Thursday.

SC 02

  1. 01

    Ran a two-day kick-off with the Pulse Analytics team to agree goals, users and what done means

  2. 02

    Cut the scope to the flows that mattered for launch and tested them with real users in week two

  3. 03

    Designed the system in Figma — type, colour, components and motion — as one source of truth

  4. 04

    Built the front end in React with the team and reviewed it together every Friday

  5. 05

    Handed over clean code, a component library and docs, then stayed on for two weeks of fixes

SC 03

Same hands on both sides. The frame on the left is the Figma file, the panel on the right is what shipped — type, spacing and colour come straight across, nothing gets lost in a handoff.

Hero / Desktop

pulse-dashboard/Hero.tsxTSX

// Pulse — Product · Design systemimport { Frame, Cover, Title } from "@mv/studio" export default function Hero() {  return (    <Frame name="Hero / Desktop" width={1440}>      <Cover src="/pulse-dashboard/cover.webp" grade="studio" />      <Title wdth={118} tracking={-0.04}>Pulse</Title>      <Accent color="#A58BFF" />    </Frame>  )}
SC 04

Launched on schedule, measured after launch, and handed to a team that can keep going without me.

Take 1
7 wks
Brief to launch
Take 2
1
Source of truth, Figma to React
Take 3
2 wks
Of fixes after launch

Still 01 08A
Still 02 08B
Still 03 08C

The clientPulse Analytics · 2025

She gave us one system our designers and engineers both trust.
Chris OwenHead of Product · Pulse Analytics

Next project · 01 / 08

Sole

Sole Supply · Brand · Campaign · 2026

Launch campaign and product pages for a sneaker drop.

All workFrame 08 / 08

CASE 08 — Product · Design system

Call sheetProd. No. 08

Production
Pulse
Client
Pulse Analytics
Category
Product · Design system
Year
2025
Role
Design system, React
Team
4 people

DirectorMara Voss

Pulse for Pulse Analytics

The short version

A dashboard and 140-component design system in Figma and React.

Outcome

140

140 components, 1 source

SC 01

Pulse Analytics came to me with a clear goal and a short runway: turn a promising idea into something real people use — and ship it, not just show it.

The job was to find the few things that mattered, design them properly and build them to the same standard. We worked as one small team — 4 people, one channel and a review every Friday — so what was designed on Monday was in the browser by Thursday.

SC 02

  1. 01

    Ran a two-day kick-off with the Pulse Analytics team to agree goals, users and what done means

  2. 02

    Cut the scope to the flows that mattered for launch and tested them with real users in week two

  3. 03

    Designed the system in Figma — type, colour, components and motion — as one source of truth

  4. 04

    Built the front end in React with the team and reviewed it together every Friday

  5. 05

    Handed over clean code, a component library and docs, then stayed on for two weeks of fixes

SC 03

Same hands on both sides. The frame on the left is the Figma file, the panel on the right is what shipped — type, spacing and colour come straight across, nothing gets lost in a handoff.

Hero / Desktop

pulse-dashboard/Hero.tsxTSX

// Pulse — Product · Design systemimport { Frame, Cover, Title } from "@mv/studio" export default function Hero() {  return (    <Frame name="Hero / Desktop" width={1440}>      <Cover src="/pulse-dashboard/cover.webp" grade="studio" />      <Title wdth={118} tracking={-0.04}>Pulse</Title>      <Accent color="#A58BFF" />    </Frame>  )}
SC 04

Launched on schedule, measured after launch, and handed to a team that can keep going without me.

Take 1
7 wks
Brief to launch
Take 2
1
Source of truth, Figma to React
Take 3
2 wks
Of fixes after launch

Still 01 08A
Still 02 08B
Still 03 08C

The clientPulse Analytics · 2025

She gave us one system our designers and engineers both trust.
Chris OwenHead of Product · Pulse Analytics

Next project · 01 / 08

Sole

Sole Supply · Brand · Campaign · 2026

Launch campaign and product pages for a sneaker drop.

All workFrame 08 / 08

CASE 08 — Product · Design system

Call sheetProd. No. 08

Production
Pulse
Client
Pulse Analytics
Category
Product · Design system
Year
2025
Role
Design system, React
Team
4 people

DirectorMara Voss

Pulse for Pulse Analytics

The short version

A dashboard and 140-component design system in Figma and React.

Outcome

140

140 components, 1 source

SC 01

Pulse Analytics came to me with a clear goal and a short runway: turn a promising idea into something real people use — and ship it, not just show it.

The job was to find the few things that mattered, design them properly and build them to the same standard. We worked as one small team — 4 people, one channel and a review every Friday — so what was designed on Monday was in the browser by Thursday.

SC 02

  1. 01

    Ran a two-day kick-off with the Pulse Analytics team to agree goals, users and what done means

  2. 02

    Cut the scope to the flows that mattered for launch and tested them with real users in week two

  3. 03

    Designed the system in Figma — type, colour, components and motion — as one source of truth

  4. 04

    Built the front end in React with the team and reviewed it together every Friday

  5. 05

    Handed over clean code, a component library and docs, then stayed on for two weeks of fixes

SC 03

Same hands on both sides. The frame on the left is the Figma file, the panel on the right is what shipped — type, spacing and colour come straight across, nothing gets lost in a handoff.

Hero / Desktop

pulse-dashboard/Hero.tsxTSX

// Pulse — Product · Design systemimport { Frame, Cover, Title } from "@mv/studio" export default function Hero() {  return (    <Frame name="Hero / Desktop" width={1440}>      <Cover src="/pulse-dashboard/cover.webp" grade="studio" />      <Title wdth={118} tracking={-0.04}>Pulse</Title>      <Accent color="#A58BFF" />    </Frame>  )}
SC 04

Launched on schedule, measured after launch, and handed to a team that can keep going without me.

Take 1
7 wks
Brief to launch
Take 2
1
Source of truth, Figma to React
Take 3
2 wks
Of fixes after launch

Still 01 08A
Still 02 08B
Still 03 08C

The clientPulse Analytics · 2025

She gave us one system our designers and engineers both trust.
Chris OwenHead of Product · Pulse Analytics

Next project · 01 / 08

Sole

Sole Supply · Brand · Campaign · 2026

Launch campaign and product pages for a sneaker drop.

FRAME 10 — Contact

Studio 1 · Rec

Tell me what you are making. I reply within a day with next steps and a rough plan.

Start a project

FRAME 10 — Contact

Studio 1 · Rec

Tell me what you are making. I reply within a day with next steps and a rough plan.

Start a project

FRAME 10 — Contact

Studio 1 · Rec

Tell me what you are making. I reply within a day with next steps and a rough plan.

Start a project
Prod.Portfolio 2026
SceneFooter
Take1
RollA-09
DirectorMara Voss
Date 
Buildmain · 9f3c1a

Thanks for watching to the end. Say hello, I read every message and reply within a day.

Write to mehello@maravoss.design

Create a free website with Framer, the website builder loved by startups, designers and agencies.