Case study: Chargefox Design System

Challenges

I joined Chargefox during its transition from a start-up to a scale-up, and with that growth came challenges. The brand lacked a strong or consistent design identity which meant our business portal, mobile app, and website all looked and felt different.

Most of the web and mobile components were custom-built, which led to visual inconsistencies and slowed down both design and development. As the teams got bigger, the lack of a shared source of truth made it harder to collaborate, causing misalignment and duplicated work.

Figma screenshot of my starting point — Before: Figma files were disorganised and lacked a unified system, leading to inefficiencies in design workflows.

Getting started

For some engineers, a design system was simply a component library. For others, implementing a design system only made sense if your company was as large as Spotify, IBM, or Salesforce.

To measure our understanding and current pain points with not having a design system, I created a survey and had the product group complete it. I discovered most team members had never interacted with or used a design system before. The survey also set a benchmark score for how efficient we thought we were in building features and collaborating within teams.

I then set up a recurring meeting that eventually formed our design system committee. The goal was to collaborate cross-functionally, celebrate wins, and align on priorities. We decided to focus first on the core of our brand, our style guide. We made fast decisions to refine or remove elements that defined Chargefox's identity. This included:

Modifying and improving our brand font
Agreeing on primary colours and removing outdated, difficult-to-use ones
Establishing a single icon set
Defining our brand personality, which shaped our tone of voice and overall 'look' of our interface

With a stronger brand style guide and agreed-upon colours, fonts, and other essentials, we were ready to dive deeper into the details.

Figma screenshot of the colours and the system I started with — Before: Colours weren’t named and were inconsistently applied across the platform. The lack of structure made it difficult for teams to maintain visual consistency and develope features faster.

Auditing and documenting

We decided the design system rollout wouldn’t involve a complete teardown of our existing products. Instead, a handful of us would work in the background, gradually improving key user touchpoints over time.

The first step was cataloguing all existing web and mobile components to identify inconsistencies and overlaps. I gathered screenshots, old Figma files, and identified code inconsistencies.

Documenting buttons in Figma — Captured and catalogued existing components in Figma to identify inconsistencies and overlaps, laying the groundwork for the design system.

Building, testing, and rolling out changes

We started with our desktop web portal, knowing changes here carried less risk compared to the mobile app due to volume of traffic. Our focus was on improving consistency for key touchpoints on the web.

We removed bloat from our codebase like Bulma CSS and Material UI, and replaced components such as buttons, tooltips, links, and text fields with updated designs I created in Figma.

Updated navigation — Before: Navigation lacked hierarchy, consistency, and accessible colours. Users found it difficult to locate key sections and were becoming increasingly frustrated.

Semantic naming conventions for colours — After: Added semantic naming conventions to help collaboration and speed up delivery across teams.

After: Updated typography system for improved hierarchy and consistency across products.

We tested major changes like data tables, navigation, and forms as product teams implemented them in new features. While this slowed the design system’s progress, it allowed us to align changes with user research and testing results.

Redesigned data tables — Alongside rebuilding components, I provided instructions in Figma for designers to follow for improved clarity and usability.

Maintaining momentum

Once the initial excitement around the design system faded, new challenges came up. While teams understood how the system worked, gaps in resources caused inconsistencies.

A major pain point was the lack of a live component style guide. Engineers relied on static Figma files or Slack messages to build components, often guessing how to implement them, which led to inconsistencies.

I gathered feedback from engineers and helped to introduce Lookbook, a live component preview tool. This streamlined collaboration by providing real-time updates, interactivity, and a reliable reference for building components.

Lookbook implementation — Introduced Lookbook as a live reference tool for engineers for real-time updates and consistent component implementation.

Impact

The design system introduced a standardised component library, significantly reducing design discrepancies and speeding up development time.

Refreshing our brand style guide strengthened visual consistency and anchored design decisions across web and mobile platforms. The design system committee played a crucial role in driving adoption and maintaining alignment across teams.

Overall, the design system improved clarity, scalability, and collaboration, resulting in more efficient workflows and a better user experience across Chargefox products.

Lessons learned

Every design system needs a strong foundation: Without conducting internal research, defining our brand identity, and solidifying the style guide, success would have been much harder to achieve.

Repetition is key: The design system wasn’t a prioritised roadmap item, so we built it in our free time. Speaking about it regularly in showcases, all-hands meetings, and one-on-ones helped secure stakeholder buy-in.

Everyone is a user of your design system: A successful design system goes beyond designers and engineers. By involving sales, marketing, product managers, and even customers, we shaped smarter decisions and achieved broader adoption.

JULIAN HARRINGTON