All work

(Case study)

Product

·

2023

Fieldwork: one system for

three apps and forty people.

three apps and forty people.

three apps and forty people.

Fieldwork makes scheduling software for field service teams. I led their first design system, from audit to tokens to a documentation site, so three apps could finally look and behave like one product.

Client

Fieldwork Inc.

Role

Design systems lead

Timeline

16 weeks, 2023

Services

Design system, Tokens, Docs

(01)

Overview

Three apps, four button styles each, and a support team that had to explain which blue meant what.

Three apps, four button styles each, and a support team that had to explain which blue meant what.

Fieldwork had grown by acquisition. The web dashboard, the mobile app and the customer portal were built by different teams with different libraries, and every new feature had to be designed three times.

Fieldwork had grown by acquisition. The web dashboard, the mobile app and the customer portal were built by different teams with different libraries, and every new feature had to be designed three times.

The brief was to stop designing things twice. One set of tokens, one component library and documentation good enough that engineers reach for it before they reach for a designer.

The brief was to stop designing things twice. One set of tokens, one component library and documentation good enough that engineers reach for it before they reach for a designer.

38

38

%

faster delivery of new features across the three apps

38

%

faster delivery of new features across the three apps

212

212

one-off styles replaced by 48 tokens

212

one-off styles replaced by 48 tokens

90

90

%

of new screens built only from system components

90

%

of new screens built only from system components

(02)

Approach

Three decisions that shaped it.

01

Audit before anything

We collected every screen from the three apps and sorted them on one wall. Seeing 212 colours side by side made the case for the system better than any slide.

02

Tokens the code can read

Colour, type and spacing tokens live in one file that exports to Figma, CSS and Swift. Changing a value in one place updates every app on the next release.

03

Docs people actually open

The documentation site shows each component with do and don’t examples, code snippets and a changelog. It became the most visited internal page within a month.

03

The mobile app, the first product rebuilt on the system.

(03)

Outcome

“Mara gave forty people one language for the product. Our designers design new things now, not the same thing three times.”

“Mara gave forty people one language for the product. Our designers design new things now, not the same thing three times.”

Daniel Kim, VP of product at Fieldwork

Daniel Kim, VP of product at Fieldwork

The system shipped in late 2023 and now powers all three apps. A small team of two maintains it, and new hires learn the product through the documentation site in their first week.

The system shipped in late 2023 and now powers all three apps. A small team of two maintains it, and new hires learn the product through the documentation site in their first week.

Design

Mara Hollis

Engineering

Fieldwork platform team

Research

Inês Duarte

Copy

Fieldwork docs team

(05)

Contact

Have a project in mind?

Tell me what you are building and where it hurts. I reply to every email within two working days.

Booking from November 2026. Two project slots left this quarter.

(05)

Contact

Have a project in mind?

Tell me what you are building and where it hurts. I reply to every email within two working days.

Booking from November 2026. Two project slots left this quarter.

(05)

Contact

Have a project in mind?

Tell me what you are building and where it hurts. I reply to every email within two working days.

Booking from November 2026. Two project slots left this quarter.

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