Cut toFrame 0304
Home
MARA VOSSMara Voss, Product designer & developer
Product designer& developer
I design digital products and build them in code, from the first sketch to the shipped release.
Available for work · Nov 2026
Berlin
9 years of shipping
Move the light · click for a new backdrop
MARAVOSSMara Voss, Product designer & developer
Product designer& developer
I design digital products and build them in code, from the first sketch to the shipped release.
Available for work · Nov 2026
Berlin
9 years of shipping
MARA VOSSMara Voss, Product designer & developer
Product designer& developer
I design digital products and build them in code, from the first sketch to the shipped release.
Available for work · Nov 2026
Berlin
9 years of shipping
Move the light · click for a new backdrop
FRAME 01 — About
I'm Mara. For nine years I've turned messy briefs into products people actually use — designed in Figma, built in React, shipped on time.
- 019 years
- 0240+ products shipped
- 03Berlin, working worldwide
FRAME 01 — About
I'm Mara. For nine years I've turned messy briefs into products people actually use — designed in Figma, built in React, shipped on time.
- 019 years
- 0240+ products shipped
- 03Berlin, working worldwide
FRAME 01 — About
I'm Mara. For nine years I've turned messy briefs into products people actually use — designed in Figma, built in React, shipped on time.
- 019 years
- 0240+ products shipped
- 03Berlin, working worldwide
FRAME 02 — Selected work
Work I'm proud of.
Contact sheet · Roll 0708 exp.
Click a frame to enlarge it
01/ 08
Sole
Sole Supply · Brand · Campaign · 2026 — 01 of 08
FRAME 02 — Selected work
Work I'm proud of.
01/ 08
Sole
Sole Supply · Brand · Campaign · 2026 — 01 of 08
FRAME 02 — Selected work
Work I'm proud of.
01/ 08
Sole
Sole Supply · Brand · Campaign · 2026 — 01 of 08
FRAME 03 — Services
What I can do for you.
Gel 01 · #FF5A3CGel 02 · #FFC94AGel 03 · #3DDC97Gel 04 · #6C8CFF01 / 04 · Product design
Plate 03 · Studio desk · f/4 · 1/125
- 015 deliverables
Product design
Apps and web products from first sketch to shipped release.
- User flows
- Wireframes
- Hi-fi screens
- Clickable prototype
- Usability tests
- 025 deliverables
Design systems
One set of components your team designs and builds with.
- Tokens
- Figma library
- React components
- Docs site
- Handover
- 035 deliverables
Front-end development
I build what I design, in React, Next.js and Framer.
- React / Next.js
- Framer sites
- Animations
- Accessibility
- Performance
- 045 deliverables
Brand & web
Identity and a website that launches with it.
- Logo
- Type & colour
- Brand guide
- Launch website
- Social kit
FRAME 03 — Services
What I can do for you.
Gel 01 · #FF5A3CGel 02 · #FFC94AGel 03 · #3DDC97Gel 04 · #6C8CFF01 / 04 · Product design
Plate 03 · Studio desk · f/4 · 1/125
- 015 deliverables
Product design
Apps and web products from first sketch to shipped release.
- User flows
- Wireframes
- Hi-fi screens
- Clickable prototype
- Usability tests
- 025 deliverables
Design systems
One set of components your team designs and builds with.
- Tokens
- Figma library
- React components
- Docs site
- Handover
- 035 deliverables
Front-end development
I build what I design, in React, Next.js and Framer.
- React / Next.js
- Framer sites
- Animations
- Accessibility
- Performance
- 045 deliverables
Brand & web
Identity and a website that launches with it.
- Logo
- Type & colour
- Brand guide
- Launch website
- Social kit
FRAME 03 — Services
What I can do for you.
Gel 01 · #FF5A3CGel 02 · #FFC94AGel 03 · #3DDC97Gel 04 · #6C8CFF01 / 04 · Product design
Plate 03 · Studio desk · f/4 · 1/125
- 015 deliverables
Product design
Apps and web products from first sketch to shipped release.
- User flows
- Wireframes
- Hi-fi screens
- Clickable prototype
- Usability tests
- 025 deliverables
Design systems
One set of components your team designs and builds with.
- Tokens
- Figma library
- React components
- Docs site
- Handover
- 035 deliverables
Front-end development
I build what I design, in React, Next.js and Framer.
- React / Next.js
- Framer sites
- Animations
- Accessibility
- Performance
- 045 deliverables
Brand & web
Identity and a website that launches with it.
- Logo
- Type & colour
- Brand guide
- Launch website
- Social kit
FRAME 04 — How I work
One project, four days that matter.
Call sheet
New project
No. 026
- Director
- Mara Voss
- Location
- Berlin + remote
- Crew call
- Mondays, 09:00
- 01
Brief
Day1We talk goals, users and constraints. You get a one-page plan.
- 02
Explore
Week1–2Flows, sketches and a clickable direction you can test.
- 03
Build
Week3–6Final design and production code, reviewed every Friday.
- 04
Ship
Week7Launch, handover docs and two weeks of fixes.
Call times move. The Friday review does not.
M. Voss
FRAME 04 — How I work
One project, four days that matter.
Call sheet
New project
No. 026
- Director
- Mara Voss
- Location
- Berlin + remote
- Crew call
- Mondays, 09:00
- 01
Brief
Day1We talk goals, users and constraints. You get a one-page plan.
- 02
Explore
Week1–2Flows, sketches and a clickable direction you can test.
- 03
Build
Week3–6Final design and production code, reviewed every Friday.
- 04
Ship
Week7Launch, handover docs and two weeks of fixes.
Call times move. The Friday review does not.
M. Voss
FRAME 04 — How I work
One project, four days that matter.
Call sheet
New project
No. 026
- Director
- Mara Voss
- Location
- Berlin + remote
- Crew call
- Mondays, 09:00
- 01
Brief
Day1We talk goals, users and constraints. You get a one-page plan.
- 02
Explore
Week1–2Flows, sketches and a clickable direction you can test.
- 03
Build
Week3–6Final design and production code, reviewed every Friday.
- 04
Ship
Week7Launch, handover docs and two weeks of fixes.
Call times move. The Friday review does not.
M. Voss
FRAME 05 — Tools
Design and code, same hands.
The kit I bring to every project. Half of it draws, half of it ships — and I use all of it myself.
Design06
- FigmaDesign · 01
- FramerDesign · 02
- RiveMotion · 03
- ProtopiePrototyping · 04
- Blender3D · 05
- NotionOps · 12
Code06
- ReactCode · 06
- TypeScriptCode · 07
- Next.jsCode · 08
- TailwindCode · 09
- StorybookCode · 10
- GitCode · 11
FRAME 05 — Tools
Design and code, same hands.
The kit I bring to every project. Half of it draws, half of it ships — and I use all of it myself.
Design06
- FigmaDesign · 01
- FramerDesign · 02
- RiveMotion · 03
- ProtopiePrototyping · 04
- Blender3D · 05
- NotionOps · 12
Code06
- ReactCode · 06
- TypeScriptCode · 07
- Next.jsCode · 08
- TailwindCode · 09
- StorybookCode · 10
- GitCode · 11
FRAME 05 — Tools
Design and code, same hands.
The kit I bring to every project. Half of it draws, half of it ships — and I use all of it myself.
Design06
- FigmaDesign · 01
- FramerDesign · 02
- RiveMotion · 03
- ProtopiePrototyping · 04
- Blender3D · 05
- NotionOps · 12
Code06
- ReactCode · 06
- TypeScriptCode · 07
- Next.jsCode · 08
- TailwindCode · 09
- StorybookCode · 10
- GitCode · 11
FRAME 06 — Résumé
The credits.
A Mara Voss production
9 years in production
Work
- Independent product designer & developer2023 — nowMara Voss StudioProduct design and front-end for startups and brands in Europe and the US.
- Lead product designer2020 — 2023Loop BankLed design of the mobile app from beta to 1.2M users.
- Design engineer2018 — 2020Pulse AnalyticsBuilt the design system in Figma and React.
- Designer2016 — 2018Studio NorthBrand and web projects for cultural clients.
Education
- BA Interaction Design2012 — 2016HfG Schwäbisch GmündThesis on motion in interfaces.
Awards
- Site of the Day2024AwwwardsFor the Atlas docs site.
Directed & built by
Mara Voss
Shot on location in Berlin
FRAME 06 — Résumé
The credits.
A Mara Voss production
9 years in production
Work
- Independent product designer & developer2023 — nowMara Voss StudioProduct design and front-end for startups and brands in Europe and the US.
- Lead product designer2020 — 2023Loop BankLed design of the mobile app from beta to 1.2M users.
- Design engineer2018 — 2020Pulse AnalyticsBuilt the design system in Figma and React.
- Designer2016 — 2018Studio NorthBrand and web projects for cultural clients.
Education
- BA Interaction Design2012 — 2016HfG Schwäbisch GmündThesis on motion in interfaces.
Awards
- Site of the Day2024AwwwardsFor the Atlas docs site.
Directed & built by
Mara Voss
Shot on location in Berlin
FRAME 06 — Résumé
The credits.
A Mara Voss production
9 years in production
Work
- Independent product designer & developer2023 — nowMara Voss StudioProduct design and front-end for startups and brands in Europe and the US.
- Lead product designer2020 — 2023Loop BankLed design of the mobile app from beta to 1.2M users.
- Design engineer2018 — 2020Pulse AnalyticsBuilt the design system in Figma and React.
- Designer2016 — 2018Studio NorthBrand and web projects for cultural clients.
Education
- BA Interaction Design2012 — 2016HfG Schwäbisch GmündThesis on motion in interfaces.
Awards
- Site of the Day2024AwwwardsFor the Atlas docs site.
Directed & built by
Mara Voss
Shot on location in Berlin
FRAME 07 — Kind words
What clients say.
Cut out and kept. A few words from the people I've designed and shipped with.
Clippings filed05 / 05
No. 01Loop Bank · Re: Loop
“Mara designed it and then built half of it. We shipped two months early.
Lena HartCEO · Loop BankNo. 02Nord Coffee · Re: Nord
“The brand looked like us from the first round. Customers ask who made our bags.
Jonas BergFounder · Nord CoffeeNo. 03Atlas Cloud · Re: Atlas
“The rare designer who reads a pull request. Our docs finally feel fast.
Amira SaidCTO · Atlas CloudNo. 04Pulse Analytics · Re: Pulse
“She gave us one system our designers and engineers both trust.
Chris OwenHead of Product · Pulse AnalyticsNo. 05Sole Supply · Re: Sole
“Fast, calm and very, very good with detail.
Sofia MarinCreative Director · Sole SupplyFRAME 07 — Kind words
What clients say.
Cut out and kept. A few words from the people I've designed and shipped with.
Clippings filed05 / 05
No. 01Loop Bank · Re: Loop
“Mara designed it and then built half of it. We shipped two months early.
Lena HartCEO · Loop BankNo. 02Nord Coffee · Re: Nord
“The brand looked like us from the first round. Customers ask who made our bags.
Jonas BergFounder · Nord CoffeeNo. 03Atlas Cloud · Re: Atlas
“The rare designer who reads a pull request. Our docs finally feel fast.
Amira SaidCTO · Atlas CloudNo. 04Pulse Analytics · Re: Pulse
“She gave us one system our designers and engineers both trust.
Chris OwenHead of Product · Pulse AnalyticsNo. 05Sole Supply · Re: Sole
“Fast, calm and very, very good with detail.
Sofia MarinCreative Director · Sole SupplyFRAME 07 — Kind words
What clients say.
Cut out and kept. A few words from the people I've designed and shipped with.
Clippings filed05 / 05
No. 01Loop Bank · Re: Loop
“Mara designed it and then built half of it. We shipped two months early.
Lena HartCEO · Loop BankNo. 02Nord Coffee · Re: Nord
“The brand looked like us from the first round. Customers ask who made our bags.
Jonas BergFounder · Nord CoffeeNo. 03Atlas Cloud · Re: Atlas
“The rare designer who reads a pull request. Our docs finally feel fast.
Amira SaidCTO · Atlas CloudNo. 04Pulse Analytics · Re: Pulse
“She gave us one system our designers and engineers both trust.
Chris OwenHead of Product · Pulse AnalyticsNo. 05Sole Supply · Re: Sole
“Fast, calm and very, very good with detail.
Sofia MarinCreative Director · Sole SupplyFRAME 08 — Playground
Outtakes, side projects and experiments.
Things I make when nobody is waiting for them. Small tools, toys and tests — most of them open source.
Frame 01 / 06
The lab reel
16 mm · 6 frames
OpenVariable type toyExperiment · 2026ReactCanvas01A ◂ MV-16
OpenUI sound kitSide project · 2025Web Audio02A ◂ MV-16
OpenShader gradientsExperiment · 2025WebGLGLSL03A ◂ MV-16
OpenToken sync pluginOpen source · 2024Figma APITypeScript04A ◂ MV-16
OpenFilm camera appConcept · 2024SwiftUIFigma05A ◂ MV-16
OpenMotion cheatsheetResource · 2023Framer06A ◂ MV-16End of reel
FRAME 08 — Playground
Outtakes, side projects and experiments.
Things I make when nobody is waiting for them. Small tools, toys and tests — most of them open source.
Frame 01 / 06
The lab reel
16 mm · 6 framesOpenVariable type toyExperiment · 2026ReactCanvas01A ◂ MV-16OpenUI sound kitSide project · 2025Web Audio02A ◂ MV-16OpenShader gradientsExperiment · 2025WebGLGLSL03A ◂ MV-16OpenToken sync pluginOpen source · 2024Figma APITypeScript04A ◂ MV-16OpenFilm camera appConcept · 2024SwiftUIFigma05A ◂ MV-16OpenMotion cheatsheetResource · 2023Framer06A ◂ MV-16End of reel
FRAME 08 — Playground
Outtakes, side projects and experiments.
Things I make when nobody is waiting for them. Small tools, toys and tests — most of them open source.
Frame 01 / 06
The lab reel
16 mm · 6 framesOpenVariable type toyExperiment · 2026ReactCanvas01A ◂ MV-16OpenUI sound kitSide project · 2025Web Audio02A ◂ MV-16OpenShader gradientsExperiment · 2025WebGLGLSL03A ◂ MV-16OpenToken sync pluginOpen source · 2024Figma APITypeScript04A ◂ MV-16OpenFilm camera appConcept · 2024SwiftUIFigma05A ◂ MV-16OpenMotion cheatsheetResource · 2023Framer06A ◂ MV-16End of reel
FRAME 09 — Writing
Notes from the studio.
Notebook · Vol. 3Written between projects
All writingAll writing- Sep 2026Why I design in the browser nowFigma is where I think. The browser is where I decide.Process6 min read
- Jul 2026A design system that people actually useFour rules from building one for 40 engineers.Systems8 min read
- May 2026Year three as an independentPricing, saying no, and the clients who stayed.Notes5 min read
- Mar 2026Prototype in code, not in slidesHow a 200-line prototype saved a six-week debate.Process7 min read
- Jan 2026Motion that means somethingThree questions I ask before anything moves on screen.Craft6 min read
- Nov 2025How I price design and build workDay rates, fixed scopes and why I stopped quoting by the screen.Notes9 min read
FRAME 09 — Writing
Notes from the studio.
Notebook · Vol. 3Written between projects
All writingAll writing- Sep 2026Why I design in the browser nowFigma is where I think. The browser is where I decide.Process6 min read
- Jul 2026A design system that people actually useFour rules from building one for 40 engineers.Systems8 min read
- May 2026Year three as an independentPricing, saying no, and the clients who stayed.Notes5 min read
- Mar 2026Prototype in code, not in slidesHow a 200-line prototype saved a six-week debate.Process7 min read
- Jan 2026Motion that means somethingThree questions I ask before anything moves on screen.Craft6 min read
- Nov 2025How I price design and build workDay rates, fixed scopes and why I stopped quoting by the screen.Notes9 min read
FRAME 09 — Writing
Notes from the studio.
Notebook · Vol. 3Written between projects
All writingAll writing- Sep 2026Why I design in the browser nowFigma is where I think. The browser is where I decide.Process6 min read
- Jul 2026A design system that people actually useFour rules from building one for 40 engineers.Systems8 min read
- May 2026Year three as an independentPricing, saying no, and the clients who stayed.Notes5 min read
- Mar 2026Prototype in code, not in slidesHow a 200-line prototype saved a six-week debate.Process7 min read
- Jan 2026Motion that means somethingThree questions I ask before anything moves on screen.Craft6 min read
- Nov 2025How I price design and build workDay rates, fixed scopes and why I stopped quoting by the screen.Notes9 min read
FRAME 10 — Contact
Have a project? Let's shoot.
Studio 1 · Rec
Tell me what you are making. I reply within a day with next steps and a rough plan.
Booking now forAvailable for work · Nov 2026
Next start dates
FRAME 10 — Contact
Have a project? Let's shoot.
Studio 1 · Rec
Tell me what you are making. I reply within a day with next steps and a rough plan.
Booking now forAvailable for work · Nov 2026
Next start dates
FRAME 10 — Contact
Have a project? Let's shoot.
Studio 1 · Rec
Tell me what you are making. I reply within a day with next steps and a rough plan.
Booking now forAvailable for work · Nov 2026
Next start dates
That's a wrap.
Thanks for watching to the end. Say hello, I read every message and reply within a day.
Write to mehello@maravoss.design