Case Study
Creating a scalable component library and design foundation to modernise Markel’s internal product ecosystem.
At a glance
The problem
Internal applications varied widely in UI patterns, usability, visual language and code conventions, creating inconsistency and growing UX debt.
The work
I led the design and front-end architecture of a reusable Angular and Bootstrap design system, covering foundations, components, documentation and governance.
The outcome
The system became the foundation for new internal applications and redesigns, improving consistency, delivery speed and scalability across Markel products.
Role
Design system owner
Company
Markel
Stack
Angular, Bootstrap, SCSS
Focus
Enterprise product ecosystem
Design system structure
Organising components by product use case
Components were grouped into categories such as feedback, forms, navigation and data-heavy table patterns to help teams find and apply them consistently.
Context
When I joined Markel, internal applications varied widely across visual design, usability, UI patterns and code conventions. Teams were often rebuilding similar components from scratch, which created duplicated effort, inconsistent experiences and growing design and technical debt.
As part of a broader initiative to modernise internal tools, I led the creation of a scalable design system for use across the business. The system defines both the visual foundation and reusable front-end component architecture for future Markel products.
Problem
Markel’s internal products support complex, data-heavy workflows, particularly across underwriting and operational tools. These interfaces need to handle dense information, validation, filtering, multi-step flows, status indicators, batch actions and contextual menus.
Without shared standards, teams approached these problems differently. This led to visual inconsistency, duplicated code, slower onboarding for developers and a less predictable experience for users moving between internal applications.
Established shared principles for colour, typography, spacing, accessibility, iconography and interaction behaviour across internal products.
Designed and implemented core Angular and Bootstrap components, supported by a custom SCSS token library for consistent styling.
Created documentation covering component behaviour, code examples, accessibility notes, usage guidance, limitations and anti-patterns.
Established a contribution model so teams could request enhancements, validate needs and adopt components with clearer release guidance.
Decision
Why
Many Markel applications rely on dense operational data, so components like grids, filters, badges and contextual menus would have the biggest immediate value.
Impact
Helped teams support complex workflows more consistently while reducing the need to rebuild common interface patterns from scratch.
Decision
Why
The design system needed to be practical for real implementation, not just a Figma library disconnected from engineering workflows.
Impact
Made adoption easier by providing reusable Angular, Bootstrap and SCSS patterns that developers could integrate directly into applications.
Decision
Why
A design system only scales if teams understand when to use components, how they behave and how to request changes safely.
Impact
Improved consistency, reduced ambiguity and created a more sustainable model for evolving the system over time.
Decision
Why
Markel’s internal tools will continue to grow, especially through initiatives such as One Workflow and future analytics capabilities.
Impact
Created a foundation that can expand into new components, layout templates, notifications and cross-application behaviours.
Component variants
Badge variants for status, labels and counters
Badge documentation covered multiple variants including text labels, square counters and pill badges, helping teams apply consistent status and notification patterns across internal applications.
Interaction patterns
Alert banner variations with actions and close behaviour
Alert banner documentation covered different combinations of actions, close behaviour and usage patterns to support consistent feedback across internal applications.
Design & build
The design system includes foundations and reusable components for the patterns most commonly needed across Markel’s internal tools. This includes form controls, navigation patterns, buttons, status badges and complex table interactions.
One of the most important components is the data grid, designed to support server-side async loading, configurable columns, validation, conditional formatting, sorting, filtering, pagination, multi-select and row or cell-level actions.
Scaling adoption
To keep the system stable and trustworthy, I established documentation and contribution guidance covering component usage, accessibility, code examples, release notes and known limitations.
Teams can request enhancements or new components, which are reviewed against user need, technical feasibility and wider product consistency before being added to the system.
Workflow component
Progress tracker designed for complex multi-step processes
The progress tracker component was documented with support for multiple steps and optional sub-step labels, helping teams apply a consistent pattern across longer enterprise workflows.
Outcome
Learning
This project has been a valuable opportunity to combine my UX design and front-end development experience. The most important lesson has been that a design system is not just a collection of components — it is a shared product that needs governance, documentation, adoption and continuous improvement.
It has also reinforced how powerful a design system can be in complex enterprise environments, where consistency, accessibility and delivery speed all have a direct impact on the quality of internal tools.
