process note · design system · 2025

Reworking a timeline component people kept needing to adapt.

A small one, but it says something about how I work: I had used the component myself, kept seeing the team detach it, and rebuilt a version around the situations it actually had to cover.

at a glance

role: Design-system contribution · SG Markets Figma library
scope: Timeline component reconstruction alongside the live component
status: I left before rollout and before integration feedback

Understanding the existing component

I had used the component myself and kept seeing the same pattern in the team: designers needed to detach or modify it. I started by looking closely at the live component, collecting the situations people were using it for, and identifying what seemed too rigid or unclear. I also benchmarked other patterns separately before moving into the reconstruction.

Analysis of the existing timeline component with early change proposals and component-state explorations — Early analysis of the existing component and first proposals for what could change.

Rebuilding it, next to the live one

I rebuilt a new version alongside the live component so nothing in production moved. I used slots where teams genuinely needed freedom, while keeping orientation, states and other behaviour controlled through properties and variables.

First timeline reconstruction: component variants and properties panel — First reconstruction, based on the collected use cases.

Later timeline exploration: component variants with slots and a clearer properties panel — Later exploration, adding clearer properties and slot options.

Where it stopped

I left before rollout, so I have no adoption or integration feedback to report. What I can show is the method: start from the situations people are already in, not from one screen.