Work in progress.
For images, videos, and extra visual materials; see the Portfolio Assets database.
See also: First-draft (Svelte), Final Design System (currently has CDN font/image problems), White-Labelling Example (Computacenter)
Vanarama is an award-winning vehicle leasing company in the UK, known for its innovative digital presence. In 2020, the company embarked on a major digital transformation – the consolidation of three separate websites into a single, unified platform. This transformation coincided with a complete brand refresh and the introduction of new online features.
As the Lead Design Engineer on this project, I was responsible for developing a robust design system to ensure consistency and efficiency throughout this overhaul. In this case study, I'll share how our team tackled the challenge using an atomic design system approach under a tight schedule and why it was key to the project's success.
Challenges and Objectives
The project was ambitious and multifaceted. We were not merely redesigning a website – we were merging multiple digital properties and reinventing the user experience from the ground up. Our team faced several key objectives and challenges:
Platform Unification: Combine content, user journeys, and products from three distinct legacy websites into one seamless experience.
UX Excellence: Preserve Vanarama’s best-in-class user experience and customer-centric design, even as we overhauled the interface.
New E-commerce Features: Introduce modern e-commerce capabilities and smoother page flows to enhance the online leasing experience.
SEO and Conversion: Retain and improve existing search engine optimisation (SEO) rankings and conversion rates throughout the transition.
Brand Consistency: Implement a design system that reflected and supported the company's refreshed brand identity across every page and element.
Tight Timeline: Deliver all of the above within a demanding schedule, while also navigating the challenges of a global pandemic.
Meeting all these requirements simultaneously was a daunting prospect. We needed an approach that would allow the design and development teams to work quickly and in harmony, without sacrificing quality or consistency. That solution was a comprehensive design system.
Approach: Atomic Design System Implementation
We adopted an atomic design methodology to achieve the required speed and consistency. This meant breaking the user interface down into fundamental building blocks (“atoms” like buttons, form fields, and colours), which we then combined into slightly larger elements (“molecules” and “organisms” such as form components or navigation bars), and eventually assembled into full page templates. By designing from the smallest elements upward, we ensured that everything was reusable and consistent. Instead of crafting each page separately, we were effectively constructing a toolkit that could create any page we needed.
To avoid the pitfalls of a traditional siloed process, I championed a code-first design approach. In practice, we built our components in code as soon as we defined them in design. This approach allowed us to test components in a realistic environment — checking accessibility, responsiveness, and interactive states early on. Designers and engineers collaborated closely, often reviewing components together in a live style guide environment. Stakeholders could also interact with these live components in real time, providing feedback much earlier than in a typical workflow.
This parallel workflow eliminated many bottlenecks. Development of pages didn't have to wait for final polished mock-ups; we could begin implementation with placeholder components and refine them as the design evolved. When design changes did occur, updating a component in the design system automatically propagated those changes across all instances, rather than requiring revisions on multiple pages.
Our use of design tokens (centralised variables for styles such as colours, typography, and spacing) further guaranteed consistency. For example, when the new brand specified an updated shade of orange, we changed the value in one place and every button, icon, and heading using that colour updated instantly across the application.
By the numbers, this system-driven approach was incredibly productive. We designed and built over 100 responsive pages using our library of components, yet we never felt like we were starting from scratch on any page. Each new page was more about selecting and combining existing, proven pieces. This not only saved time but also reduced errors and ensured that accessibility standards (which were built into our components) were consistently met. Throughout the project, the design system acted as a shared source of truth. It aligned the entire team — design, development, and stakeholders — around one visual language and set of functionality. This collective understanding helped everyone move faster and with more confidence.
Outcome: Launch and Impact
After months of intense work, we launched Vanarama’s unified platform in March 2021. The results at launch were very rewarding. Despite the challenges of remote teamwork and a compressed timeline, the new website went live on schedule as a polished, cohesive product. We not only met our original goals but actually exceeded some of them.
Most importantly, the conversion rate – a critical metric for any e-commerce driven site – surpassed the target we had set for the launch. This immediate improvement in conversion indicated that users were finding the new unified site easy to navigate and trustworthy to complete transactions. We also received highly positive feedback in multi-device user testing sessions. Participants consistently noted the improved consistency and clarity of the interface across mobile, tablet, and desktop.
For Vanarama’s team, the benefits of the design system continued to appear well beyond launch day. Because the site was built on a solid system of components and styles, adding new features or making post-launch tweaks became more efficient and predictable. There was no need to reinvent the wheel for each update – the design system provided a blueprint for expansion. In effect, we delivered not just a one-time website build, but a living framework that would support Vanarama’s digital presence into the future.
Reflections as Lead Design Engineer
From my perspective as the Lead Design Engineer, this project underscored the true value of a design system in a large-scale redesign. Establishing an atomic design system early was like laying a strong foundation for a building: it bore the weight of a fast-moving project and prevented cracks in consistency from appearing under pressure. The close collaboration it fostered between designers and developers was a highlight. By speaking the same language of components and tokens, we avoided many misunderstandings and rework that typically plague projects of this complexity.
I also learned that a design system was as much about people as it was about components. Getting the whole team on board with the system mindset was crucial. I made sure to involve everyone in the process – for instance, I demonstrated new components as they were created and invited feedback to ensure the system served the team’s needs (not just the other way around). This inclusive approach greatly helped adoption and ultimately made the end product better.
In the end, delivering the Vanarama redesign through a design system wasn’t just a one-off victory for a single project. It equipped the organisation with a sustainable asset. The website could evolve with much less effort moving forward, and the design principles we instilled would continue to guide new developments. For me, seeing the system live on in Vanarama’s continued success was one of the most gratifying aspects of this journey. It reinforced the notion that investing in systematic design up front would pay dividends long after launch.
