System design through the lens of Veeam.
Turned an unstructured, non-responsive component library into a documented system Veeam's own team could run and extend.
Note: Due to the end of the contract with Veeam I no longer have access to or permitted to display the working files. What follows are visual snippets of a case study with explanation of the process.
Role
Design Lead, Tank Design
Timeframe
4 Months, 2024
Scope
1 library, 64 organisms with respective atomic elements across desktop, tablet, and mobile.
Deliverables
Figma component library with variable taxonomy / Responsive rebuild implementing updated visual brand / Training & handoff docs
1
Problem
No shared taxonomy existed, every component was fixed-width, and the gaps were slowing releases and creating constant rework.
2
Approach
Audited the existing library, rebuilt each component against a defined breakpoint set, and tested it end to end.
3
Outcome
Ran training sessions and left documentation so Veeam could own and extend the system without Tank.
TLDR
A component library that slows every release and gets rebuilt from scratch each time isn't really a system. In 2024, I led the standardization of Veeam's design system. No clear taxonomy existed, and none of the components were responsive. Over a few months, I audited, rebuilt, and tested the system, then handed it off in a form Veeam's own team could run day to day, backed by a series of training sessions so they could own it long term.
Taxonomy
The system had grown component by component with no shared naming or structure, so before I touched a single component I mapped what existed. I sorted everything into three layers: foundations (color, type, spacing, grid, built to WCAG AA from the start rather than patched in after), components (buttons, inputs, cards, and etc.), and patterns (how those components combine into real page flows).
Responsive Rebuild
The existing component library worked fine for whoever lived in it every day. It wasn't built for a global company with this many stakeholders, partners, agencies, and an in-house design team. Components were incomplete, off-spec, sitting next to unused variants with no indication which to use, inconsistent structure, tokens with no real system, unnamed layers. I know. A cardinal sin.
I rebuilt it into a scalable system with a token structure that's easy to follow. Every component was rebuilt from scratch to match dev spec, with variable-driven responsive controls across desktop, tablet, and mobile, so rogue one-off components can't slip through again. Complex content components got consolidated into flexible modules that adapt to whatever content type you drop in.
Training and Handoff
A system nobody can maintain isn't really a system, so the last phase was getting Veeam's team able to run it without me. I ran three training sessions on the taxonomy, how to extend it without breaking consistency, and how to update a component correctly, plus a written guide covering how to grow, use, and maintain the order, tokens, and controls.
I also defined a new role for their design team, a Figma admin, backed by a roadmap and governance document covering the gatekeeper's responsibilities, approval workflows, and daily duties.
