Role
UX/UI Design Intern
Timeline
2 months, Summer 2022
Status
Delivered
Focus
Design systems, workshops, component libraries
Tools
Figma

Overview

Forum One is a digital consultancy that builds sites and strategy for mission-driven organizations such as the Gates Foundation, AARP and USAID.

Case study · Design system · Internship

Creating consistency with a starter design system

Every new client project at Forum One started by redrawing the same buttons, colors and type. As a summer intern I built a starter design system in Figma that any designer could duplicate and tailor, instead of starting from nothing.

The question

A design system only saves time if people use it. What would make this team's designers and developers build from one on every new project?

My part

UX/UI design intern, two months. I ran the workshops and built the style guide, the component library and the Figma guidelines. The priorities came from the team's vote.

Outcome

A starter system (style guide, components, guidelines) now duplicated and tailored for every new client project, saving an estimated 10+ hours each time.

01

The gap

The tech team recoded the same button every project

Forum One had no shared design system. On every new project the tech team rebuilt the same elements from scratch, and the designers spent their first days on wireframes a template could have produced in minutes.

I was brought on to build that base: a style guide, a component library and Figma guidelines that get duplicated and tailored for each client.

02

Priorities

The team's vote set the build order, not my taste

I didn't want to guess what the system needed to solve. So I ran a workshop with the designers and developers and mapped what each of them was trying to do and what got in the way.

A second, open brainstorm collected ideas for the system itself, and the team voted. I built in the order they chose.

What surprised me was how much they wanted a standard way to name things and talk to the developers. It mattered more than I'd expected. So I wrote the token naming guide in detail, which gave designers one way to name components and a vocabulary they share with the developers.

Passed on

Building in the order I found interesting.

Problem-statement mapping from the kickoff workshop, organized by role
Problem statements from the kickoff workshop. Four roles, one complaint: with no shared system, the same questions get asked and answered on every project.
The open brainstorm board, sorted into UX, UI, Development, Training and Presentation, then upvoted
The open brainstorm, sorted into UX, UI, Development, Training and Presentation, then upvoted. The vote set the build order.

03

The system

Color and type first, then one library for WordPress and Drupal

I surveyed dozens of other organizations' systems and gathered the components Forum One's projects reused most. Color and type came first, because every other decision touches them. The color guide is small on purpose: a primary palette plus semantic colors for status and alerts. Type is a token set for size, weight, tracking and line height.

Passed on

One fixed hex per color, and type tuned per project. Each color got its own extended scale and type became tokens, so both are accessible and responsive by default.

Then the component library: forms, buttons, alerts, navigation. Both of Forum One's build platforms support it, so nothing gets recreated per project.

Every state (default, hover, active, disabled, error) shipped with the component, not added later by whoever happened to build the screen.

Typography document: font family, size, weight, tracking and line-height primitives
Type primitives: the font families, sizes, weights, tracking and line heights everything else is built from.

Scroll ↔

Design system wireframes: buttons, forms, cards, navigation, controls, filters, alerts, icons and hero patterns
Nine categories from the library. Scroll sideways to see them.
A news article page assembled entirely from the component library
A resource-listing page assembled entirely from the component library
Two full pages built from the library alone, a news article and a resource listing. The components hold up as real navigation, cards and footers.

04

Results

A system the team is still building from

The starter system became the base for new client work. It didn't sit unused after the internship ended.

10+ hrs

Saved per project, with nobody rebuilding the same elements

2 mos

From kickoff workshop to a documented starter system

Adopted

Still what designers duplicate and tailor for new client projects

Takeaway

Design systems are living documents, not deliverables

The components weren't the hard part. Getting designers and developers to agree on priorities before I built anything was. The vote did that better than my own judgment would have.

What I'd carry into the next project is the order: workshop first, build second. A system built on the team's priorities gets adopted. One built on the designer's taste doesn't.