Elisabeth Lau ✴
YVR {{time}}
← BACK TO WORK

Nokia · Nokia Design System · 2025

Helping designers get answers from the design system, not from a person

Research into how Nokia's designers actually use their design system documentation, and a proposed new structure and page template built around the questions they come with.

designsystem.nokia.com / components / actions / button
Redesigned Button documentation page: components grouped by purpose in the sidebar, alternate names and a 'matches code' status under the title, a Usage tab with when to use and when not to use, and a variants table
ROLEDesign Systems Intern
Led the research end to end
TEAMNokia Design System team, with guidance from UX research
TIMELINE5 months, alongside component work
Jun – Oct 2025
SKILLSBenchmarking, information architecture, surveys, interviews, synthesis
CONTEXT IN 30 SECONDS

A shared kit of parts, used by product teams across Nokia

The Nokia Design System (NDS) is the set of buttons, tables, charts and rules that Nokia's network software is built from. Think of it as a box of building blocks plus the instruction manual. Designers get the blocks in Figma, read the instructions on the documentation site, and developers pull the matching code from Storybook.

FIGMA LIBRARYThe building blocksComponents designers drag into their screens
DOCUMENTATION SITEThe instruction manualWhen and how to use each one. My focus.
STORYBOOKThe working codeHow each component actually behaves when built
USED BYDesigners on 6 product teamsNetwork management, planning and analytics tools
This project is password protected Enter password ↓
THE QUESTION I WAS ANSWERING

How might we make the documentation the first place designers go for answers, instead of the last?

01 · PROBLEM

The manual existed, but designers still had to ask a person

NDS was preparing its documentation for an eventual public release. The pages had been moved over from older tools, and the team suspected they were too long and too technical, but nobody knew what designers actually needed from them.

13 of 16 designers reach out to the NDS team when something is unclear
3 sources Figma, the site and Storybook, which didn't always agree
3 of 16 found the docs hard to search, and only 7 said they'd recommend them

Every question that ends up in the NDS team's inbox is time away from improving the system, and a designer waiting instead of designing.

02 · RESEARCH

I looked at the docs from four angles

First how the best public design systems do it, then how ours was organized, then what designers told us at scale, and finally why, one conversation at a time.

  1. JUNE · BENCHMARKCompareHome, foundation, component, pattern and accessibility pages from 17 public design systems, including IBM Carbon, Atlassian and Salesforce
  2. JULY · MAPMapTreemaps of NDS, the Nokia Brand Hub and Storybook, flagging every gap and mismatch
  3. AUGUST · SURVEYMeasureA 20-question survey I wrote on when, where and how designers use the docs, sent company-wide
  4. OCTOBER · INTERVIEWSUnderstand9 sessions with 11 designers across product teams to explain the numbers
20survey responses
11designers interviewed
17design systems benchmarked
8themes synthesized
Benchmark matrix comparing how IBM, Cisco, Atlassian, Salesforce, eBay, Wise, Visa, US Gov and others structure their button documentation: entry points, tabs, structural flow and usage guidelines
BENCHMARK · BUTTON PAGESOne of five comparison grids. For each system I logged how you get to the page, its tabs, the order of sections and what the usage guidance covers, then marked what stood out and what caused confusion.
03 · INSIGHTS

Designers don't read the docs. They check them.

Nobody sits down to read about a button. They arrive mid-task with one question, and leave in under five minutes.

WHAT DESIGNERS LOOK FOR ON A COMPONENT PAGE · 16 RESPONDENTS
Do's & don'ts
11
Usage
9
Examples
9
Variants
8
Anatomy
5
Placement
2
Practical guidance beat technical detail. Anatomy, the section the pages spent the most space on, was near the bottom.
01

Docs are a quick check, not a read

15 of 16 open the docs to check how a component behaves or when to use it. Most spend five minutes or less on a page.

02

When sources disagree, trust breaks

If the docs, Figma and the code showed different things, designers stopped trusting all three and messaged a person instead.

03

You can't search for a name you don't know

A "chip" in one team is a "tag" or "badge" in another. Inconsistent names and groupings made the right page hard to find.

69%

The surprise: in interviews, the "Get started" section sounded like something nobody opened. The survey showed 69% had used it, mostly while onboarding. Pairing both methods kept us from cutting a page people relied on once, but really needed.

The rest of this project is password protected

That password didn’t work. Try again, or email me for access.

The solution, key decisions, process and impact are behind this. Email eelisabethlau@gmail.com for the password.