← All work
02Insurance / Design System / Front-end Architecture
Part of the core team that defined HDI Seguros' Design System — 15+ components documented in Storybook, turning scattered interface decisions into a shared contract.
01
Overview
- Client / Product
- HDI Seguros (via Sysmap Solutions)
- Period
- Apr 2020 — Jul 2021
- Role
- Design System Core Team
- Context
- Insurance platform modernisation, with the Design System as the shared foundation across product squads.
- Team
- Design System core team, serving multiple product squads.
- Technologies
- Angular 12TypeScriptStorybookNode.jsBFFJenkins
02
The challenge
Insurance products carry dense forms, regulated copy and long-lived screens. Without a shared system, every squad drifts — and the drift compounds into rework nobody scheduled.
03
Strategy
- —Define the component contract first — API, states and accessibility — before styling anything.
- —Documentation in Storybook as the single source of truth, so adoption never depended on tribal knowledge.
- —Angular 12 with typed inputs and outputs, making misuse a compile error instead of a bug report.
04
Solution
- —15+ components built and documented in Storybook, each with states and usage guidance.
- —A BFF layer in Node.js feeding the interfaces with data already shaped for the screen.
- —Jenkins pipeline delivering the library and its documentation together.
05
Impact
- 15+ documented components adopted as the platform's shared interface language.
- Less rework and fewer re-decisions per squad — consistency stopped being a matter of who built the screen.
06
Learnings
A design system is adopted for its documentation, not its code. The components were the easy part; making the decisions legible to everyone else was the work.