ARC by ChargeItSpot - Design System
Design System Documentation Refresh
role & Scope
Sole UX/UI Designer
& Frontend Developer
Solo Project
duration
3 months
skills
Product Design
User Research
Prototyping
Context
Enterprise device management, made simple
With all that goes on in distribution facilities, managers often struggle keeping track of the devices employees need to do their jobs.
ARC® modular storage lockers are ChargeItSpot’s solution to this, centralizing the management of company-issued handheld employee devices. For brands like Sam’s Club, Walmart Canada, and DHL, ARC® kiosks provide the infrastructure for efficient device handling through an automated system of monitoring, charging, and troubleshooting.
DEVICE MONITORING
Picking up and returning a device at the beginning and end of the workday
TROUBLESHOOTING
Resolving devices that are lost, damaged, or belong to a different locker entirely
problem
Design system guidelines needed to be a two-way street
The ARC Design System, living in Storybook, was made with the intention of creating modular, reusable components to streamline the design overhaul of ARC’s user interface. With differing perspectives from Design and Engineering on the design system, it became apparent that we needed a central source of truth that served each team's goals.
A real conversation I overheard…
engineer
Ohh, I didn’t know this was in the design system. I’ll fix that right away!
designer
You need to use this component here!
sneak peak
A centralized design system hub, built for both designers and engineers
Research
Establishing knowledge gaps in the current experience
I spoke directly to the Design and Engineering teams to understand their goals with the design system on a deeper level:
DESIGN NEEDS CLARITY
Organized components & easy to navigate interface
Communicate component use cases & design best practices
Alignment with Figma for easy reference
ENGINEERING NEEDS EFFICIENCY
Detailed outline of use cases and development best practices
Make frontend development more repeatable & standardized
Maintain code quality and consistency
What makes other design systems so easy to understand?
To answer this question, I also audited a few open-source Storybook design systems, with two aligning the most to the needs of both teams:
audi design system*
Detailed specs and strong visuals depicting use cases throughout their products
vibe design system
Fun branding and examples of atomic design principles (components within components)
Both contained extensive component documentation along with real examples, making it easy for both designers and developers to understand what a component was made to do and where it belongs. Documentation was also well organized, with strong branding as an additional plus.
*Since working on this project, Audi has migrated their design system to live on an in-house web app rather than natively on Storybook!
process
Enhancing documentation & establishing the brand identity
In my first weeks working at ARC by ChargeItSpot, I started out by gaining exposure to the ARC Design System through researching components and how they were currently being used within kiosk screens. I then compiled the results of my findings within a design system Confluence hub.
With Figma, I then outlined a typography guide and drafted simple, scalable components built specifically for use within Storybook. Using current design system variables to guide my approach, I then created a mockup UI within Figma to experiment with various type and color combinations.
components & typography
The Figma mock-up
Getting into the weeds of Storybook
Digging deeper into Storybook’s documentation, I was able to get a better sense of my project scope. For example, Storybook only supports basic customization of the UI and documentation, so a lot of workaround CSS was required to take care of styling inconsistencies.
Implementation in storybook
solution
A centralized source of truth with a rehauled user interface
Before & After
What does this solve?
Consolidates information
Streamlines development
Bridges knowledge gaps between teams
Encourages cross-team collaboration
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.
If I could take this project further, I would have loved to implement more custom components within Storybook, such as color palette swatches to outline design system primitives/semantic tokens and a related components section with links to similar components to the one being displayed.
