Automotive Design System

2018 - 2024

This is the story of how a design system of several thousand components skyrocketed the work capacity of a software agency by 18x.

‍

This agency is Nexus Point, who's suite of market-leading software is renowned in the automotive industry. The goal of this project was to radically expedite the assembly of client websites by constructing an Atomic Design library, styled with SASS and built with Vue components.

Role

Designer

Researcher

Project Manager

Team

‍Frontend / Backend

Quality Assurance

Project Manager

Marketing

Senior Management

Duration

6 years

The problem

The process to design, build and launch new websites is very manual and time-consuming.

Around six years ago, the process for Nexus Point's website builds took around 2 weeks to design, 4 months to develop and a further 2 weeks to test and launch. Each website was a fresh environment, or had applicable functionality copied over from previous builds.

However, this meant that any existing bugs or outdated practices were widespread, and so executing significant fixes or innovations became a challenge.

These lengthy timescales and high demand on resource had denied the company the opportunity to flourish, limiting the acquisition of numerous leads. This is the point we workshopped methods to streamline our deliverables and conceive a resource that could be created once and endlessly drawn from thereafter...

The solution

Establish a master component library; the wellspring for all new websites.

Rapid workflows

  • An average website now takes as little as 2 hours to design and 5 days to develop
  • Design / dev time is slashed by 95%
  • Capacity to onboard and commit to new prospects increased by 18x‍

Streamlined rollouts

  • Just one thorough test for each new component
  • Global bugs fixed once at the source
  • All clients benefit from the latest UX developments

Notable client wins

  • 70% increase in finance leads for CarSupermarket.com
  • Following the launch of their new website, Fords of Winsford wins Online Consumer Experience of the Year 3 years in a row with AM Awards and Website of the Year 2024 with MotorTrader Independent Dealer Awards
Timeline

The design system was launched within 4 years of conception.

We planned a series of crucial phases for the project:

Scope (2018-19)

  • List and categorise all required components, applying the atomic design methodology
  • Formulate a master stylesheet (typography, colours, grids, spacing, border radius...)
  • Assess performance of current clients to seek improvement opportunities for the new system (Hotjar, Google Analytics)
  • Research effective UX methods for high-functioning components and journeys
  • Submit proposal for approach to Lead UX/UI Designer, Managing Director and Heads of Department

Conceptualise (2019-21)

  • Collate wireframes and explore multiple approaches for key components (Sketch)
  • Regular creative team reviews to decide which ideas to finesse and which to drop
  • Design high-fidelity version of agreed components, while consistently implementing the latest tools Figma has to offer (at this point, we trade Zeplin, Sketch and InVision for Figma - the all-in-one powerhouse)
  • Prototype user journeys; apply for finance, buy a car and value your car (InVision, FigJam) - check out my FigJam User Journeys

Build, Test, Repeat (2021-22)

  • Regular reviews of progress with managers and frontend developers to ensure design and build methods are synchronised
  • Components with design sign-off are built by Frontend in Vue and tested by QA, then released into Nexus Point's CMS
  • I project manage a consistent cycle of Design → Dev → Test → Launch as we gradually populate the CMS with configurable components (Jira, Browserstack, Storybook)
  • Component revisions following the needs of new prospects are fed into the cycle

Distribute, Revisit, Evolve (2022-now)

  • The first client websites are visualised rapidly by dropping components from the library into client projects; the brand stylesheets are applied with just a few clicks
  • ‍Fords of Winsford and CarSupermarket.com are the first clients to enjoy the new system (a very exciting moment!)
  • The Apex CMS allows users to update content and apply an ever-growing array of personal config (styles, layouts, bespoke user journeys etc)
  • Workshop the bespoke needs of new clients while not compromising the integrity of the website's templated foundation
  • Working with clients and internal departments with ongoing analysis of performance (CrazyEgg, Microsoft Clarity) with proposals to roll out UX improvements
Within the last 18 months alone, Nexus Point has launched 15 component-based websites!
The solution

Establish a master component library; the wellspring for all new websites.

Rapid workflows

  • An average website now takes as little as 2 hours to design and 5 days to develop
  • Design / dev time is slashed by 95%
  • Capacity to onboard and commit to new prospects increased by 18x‍

Streamlined rollouts

  • Just one thorough test for each new component
  • Global bugs fixed once at the source
  • All clients benefit from the latest UX developments

Notable client wins

  • 70% increase in finance leads for CarSupermarket.com
  • Following the launch of their new website, Fords of Winsford wins Online Consumer Experience of the Year 3 years in a row with AM Awards and Website of the Year 2024 with MotorTrader Independent Dealer Awards
Timeline

The design system was launched within 4 years of conception.

We planned a series of crucial phases for the project:

Scope (2018-19)

  • List and categorise all required components, applying the atomic design methodology
  • Formulate a master stylesheet (typography, colours, grids, spacing, border radius...)
  • Assess performance of current clients to seek improvement opportunities for the new system (Hotjar, Google Analytics)
  • Research effective UX methods for high-functioning components and journeys
  • Submit proposal for approach to Lead UX/UI Designer, Managing Director and Heads of Department

Conceptualise (2019-21)

  • Collate wireframes and explore multiple approaches for key components (Sketch)
  • Regular creative team reviews to decide which ideas to finesse and which to drop
  • Design high-fidelity version of agreed components, while consistently implementing the latest tools Figma has to offer (at this point, we trade Zeplin, Sketch and InVision for Figma - the all-in-one powerhouse)
  • Prototype user journeys; apply for finance, buy a car and value your car (InVision, FigJam) - check out my FigJam User Journeys

Build, Test, Repeat (2021-22)

  • Regular reviews of progress with managers and frontend developers to ensure design and build methods are synchronised
  • Components with design sign-off are built by Frontend in Vue and tested by QA, then released into Nexus Point's CMS
  • I project manage a consistent cycle of Design → Dev → Test → Launch as we gradually populate the CMS with configurable components (Jira, Browserstack, Storybook)
  • Component revisions following the needs of new prospects are fed into the cycle

Distribute, Revisit, Evolve (2022-now)

  • The first client websites are visualised rapidly by dropping components from the library into client projects; the brand stylesheets are applied with just a few clicks
  • ‍Fords of Winsford and CarSupermarket.com are the first clients to enjoy the new system (a very exciting moment!)
  • The Apex CMS allows users to update content and apply an ever-growing array of personal config (styles, layouts, bespoke user journeys etc)
  • Workshop the bespoke needs of new clients while not compromising the integrity of the website's templated foundation
  • Working with clients and internal departments with ongoing analysis of performance (CrazyEgg, Microsoft Clarity) with proposals to roll out UX improvements
Within the last 18 months alone, Nexus Point has launched 15 component-based websites!
Framework

3,200+ Atoms. 2,250 Molecules. 900 Organisms. 175 Templates.

Embracing Atomic Design for the first time

I researched the essential ingredients to make a strong and inclusive product. As a result, I explored stylesheets, grid systems, type hierarchies, icon sets, and of course the nature of the Atom → Molecule → Organism → Template framework.

It was thrilling to be immersed in establishing the foundations of a robust and methodical design system that would act as the source of truth for all future projects. The generic 'master' stylesheet - represented in the cards below - can be swiftly overridden with client branding in Figma and Vue.

One
Two
Three
Framework

3,200+ Atoms. 2,250 Molecules. 900 Organisms. 175 Templates.

Embracing Atomic Design for the first time

I researched the essential ingredients to make a strong and inclusive product. As a result, I explored stylesheets, grid systems, type hierarchies, icon sets, and of course the nature of the Atom → Molecule → Organism → Template framework.

It was thrilling to be immersed in establishing the foundations of a robust and methodical design system that would act as the source of truth for all future projects. The generic 'master' stylesheet - represented in the cards below - can be swiftly overridden with client branding in Figma and Vue.

No items found.
Introducing

Automotive Design System

Rapid assembly

Drop. Reskin. Repeat.

The desired components are dropped into the client project, and in just a few clicks, their brand supplants the fonts, colours and global borders of the generic styles and the design instantly becomes something fresh.

Nexus Point and its clients can rapidly build up any webpage imaginable and in any configuration. This visual is a small showcase of the sheer amount of features on offer; blogs, promotions, image galleries, calculators, reviews, banners, carousels, forms and more.

iPhone frameAn iPhone screen depicting a key feature of the solution.
iPhone frameAn iPhone screen depicting a key feature of the solution.
Engagement

Amplifying lead generation

The Car Dealership clients have 10 years of Nexus Point's pinnacle design and development poured into the new system. The journeys they value most are at the forefront of the experience; Vehicle Listings and the new "Dealstacker", as well as Part Exchange and Finance Applications.

Dealstacker is the all-in-one checkout at the heart of the product. It has been chiseled and refined over the years following user feedback, internal testing and consistent research.

Take a peek

I'm proud of my Figma files; I keep my layers, components and styles super tidy for designers and developers to get stuck in.

View project

Get hands-on

Explore the interactive prototype and navigate all of the important functions and user journeys outlined in this case study.

Open prototype

Explore my FigJam flows

Check out the user flow charts that form the journeys outlined in this project.

Open FigJam

Lessons

Gained major insights into the full life cycle of a large-scale, long-term project

Maintaining a constant and critical position from conception to launch has been extremely insightful and rewarding, and has surely elevated my confidence in attacking every step.

Atomic Design is absolutely the baseline for my future projects

I am so grateful to have had the opportunity to lead the way in devising my own design system, and this invaluable insight will guide me in designing bigger and better systems.

Reflections

There are always better methods when creating a design system

Throughout the project, I learned how I could have implemented things more effectively such as expanding on the stylesheet or streamlining variants further, but these are lessons I will be taking into my next system library to improve its scalability.

There is always room for further user insights

The sheer influx of new prospects attributed to the rollout of this system (which is fantastic), has meant that research and development time has been limited. Conducting in-depth surveys with real users and critically analysing the core journeys would really support the evolution of this product.

More work

View all

Physiobuddie

Elevating recovery for NHS patients through physiotherapy.

NOVOCAR

Rethinking electric vehicle ownership.

Like what you see?

Let's chat!

Imagined in -- and brought to life with --

CV document icon
CV
Email icon
Email
LinkedIn icon
Profile
keyboard_arrow_up