ARC by ChargeItSpot
ARC by ChargeItSpot
During my time at ARC by ChargeItSpot, I worked on a project overhauling their ARC Design System hosted within Storybook.js, a internal developer tool used to build and document UI components. This included enhancing the user interface according to branding guidelines, writing extensive component documentation, and a proof of concept implementation within the design system repository.
During my time at ARC by ChargeItSpot, I worked on a project overhauling their ARC Design System hosted within Storybook.js, a internal developer tool used to build and document UI components. This included enhancing the user interface according to branding guidelines, writing extensive component documentation, and a proof of concept implementation within the design system repository.
role
System Design Intern
duration
April 2025 - September 2025
tags
react
typescript
MDX
figma
Context
The ARC® , also known as Asset Recharge Center, intelligent locker system is ChargeItSpot’s solution to managing employee devices. ARC kiosks come in many sizes, with the central user interface being used by employees at brands like Sam’s Club, Walmart Canada, and DHL to make thousands of device transactions every day.
The ARC® , also known as Asset Recharge Center, intelligent locker system is ChargeItSpot’s solution to managing employee devices. ARC kiosks come in many sizes, with the central user interface being used by employees at brands like Sam’s Club, Walmart Canada, and DHL to make thousands of device transactions every day.
The ARC Design System library contains every UI component used within ARC kiosk screens. Originally created in Figma, components began being built within a Design System repository and with the help of Storybook.js, a comprehensive frontend workshop used to build and test UI components. Component documentation is done with the use of stories, which serve to show component states in isolation. For the ARC Design System, the Storybook is the main source of truth when it comes to how components behave and function on a production level.
The ARC Design System library contains every UI component used within ARC kiosk screens. Originally created in Figma, components began being built within a Design System repository and with the help of Storybook.js, a comprehensive frontend workshop used to build and test UI components. Component documentation is done with the use of stories, which serve to show component states in isolation. For the ARC Design System, the Storybook is the main source of truth when it comes to how components behave and function on a production level.
The Problem
Although the Storybook is primarily used by designers/developers, it’s default user interface felt detached from their brand identity compared to other Storybooks I found during my research. Some components did have at-length written documentation, but most only contain visuals of component props and stories with little explanation.
Although the Storybook is primarily used by designers/developers, it’s default user interface felt detached from their brand identity compared to other Storybooks I found during my research. Some components did have at-length written documentation, but most only contain visuals of component props and stories with little explanation.
Goals
My approach to the design and development process can be summarized with the following three goals:
1.
Enhance Documentation
Enhance Documentation
Write comprehensive documentation on each component within our current library and design mockups for implementation.
2.
Establish Brand Identity
Establish Brand Identity
Modify the Storybook’s user interface to better align with ARC by ChargeItSpot’s brand identity.
3.
Storybook Implementation
Storybook Implementation
Implement a proof-of-concept within Storybook utilizing the written documentation and design mockups.
Research
In my research of other design system Storybooks, I came across two that I ended up referencing the most throughout the span of the project: The Audi Design System and the Vibe (Monday) Design System. Both contained extensive component documentation along with real use cases of components within other components and even within their existing products. Their user interfaces also strongly reflected their branding, such that their utilization of Storybook was initially hard to tell.
In my research of other design system Storybooks, I came across two that I ended up referencing the most throughout the span of the project: The Audi Design System and the Vibe (Monday) Design System. Both contained extensive component documentation along with real use cases of components within other components and even within their existing products. Their user interfaces also strongly reflected their branding, such that their utilization of Storybook was initially hard to tell.
Process
Enhance Documentation
From my very first weeks at ARC by ChargeItSpot, I gave myself a lot of exposure to the ARC Design System through researching components and how they were currently being used within kiosk screens. I compiled the results of my findings using the company’s Confluence information hub, writing up documentation about visual descriptions, use cases, and do’s and don’ts for each component.
From my very first weeks at ARC by ChargeItSpot, I gave myself a lot of exposure to the ARC Design System through researching components and how they were currently being used within kiosk screens. I compiled the results of my findings using the company’s Confluence information hub, writing up documentation about visual descriptions, use cases, and do’s and don’ts for each component.
With Figma, I then outlined a typography guide and drafted simple, scalable components built specifically for use within Storybook.
With Figma, I then outlined a typography guide and drafted simple, scalable components built specifically for use within Storybook.
Establish Brand Identity
Using current design system variables to guide my approach, I first created a mockup UI within Figma to experiment with various type and color combinations.
Using current design system variables to guide my approach, I first created a mockup UI within Figma to experiment with various type and color combinations.
After approval from design leadership, I went on to make the outlined type and color changes within the design system repository using Storybook’s theming API. A few layout and styling issues came about during the process that couldn’t be resolved through the API, so workaround solutions and CSS overrides were needed in order to take care of inconsistencies.
After approval from design leadership, I went on to make the outlined type and color changes within the design system repository using Storybook’s theming API. A few layout and styling issues came about during the process that couldn’t be resolved through the API, so workaround solutions and CSS overrides were needed in order to take care of inconsistencies.
Storybook Implementation
After all of my design proposals were approved, I went to work on building my components using React and TypeScript and drafting out Storybook documentation using MDX, a version of Markdown that allows JSX to be written within normal Markdown documentation.
After all of my design proposals were approved, I went to work on building my components using React and TypeScript and drafting out Storybook documentation using MDX, a version of Markdown that allows JSX to be written within normal Markdown documentation.
Final Proof Of Concept
Reflection
I am so grateful for the knowledge gained during my time at ARC by ChargeItSpot! Not only was I able to delve deeper into the structure and architecture of a design system pertaining to a real world product, but I was able to play a role in actively contributing to its developer implementation and maintenance.
I am so grateful for the knowledge gained during my time at ARC by ChargeItSpot! Not only was I able to delve deeper into the structure and architecture of a design system pertaining to a real world product, but I was able to play a role in actively contributing to its developer implementation and maintenance.
Learning more about React and the software development cycle as a whole was an incredibly eye-opening and rewarding process. I went from knowing very little about React to pushing merge requests almost weekly, and I ended up finding a lot of joy and satisfaction in creating and updating components from scratch.
If I could take this project further, I would have loved to implement more custom components within Storybook, such as color palette swatches to showcase their visual standards and a related components section with links to similar components to the one being displayed.
If I could take this project further, I would have loved to implement more custom components within Storybook, such as color palette swatches to showcase their visual standards and a related components section with links to similar components to the one being displayed.