Xchangeplus
Design systems
Xchangeplus Design System
Problem
How can we help the development team (6 developers) confidently build and ship scalable products?
Solution
Build a design source to communicate designs for all web based platforms.
Impact
Increased team productivity by 2× year over year.
Improved design–engineering communication and empowered developers to make independent decisions without relying on design.
Background
About
Great design systems allow teams to innovate and create at faster speeds. Our goal was to rapidly improve the velocity with which the dev team at XchangePlus build, in addition to creating a shared design language around software for future teams to leverage. I created a design system to unify the XP software suite. Everything from typography and color, to buttons, flags (or toasts), banners, dialogs, illustration guidelines, list views, switches, badges, and more were designed over the span of just a few months.
Design Questions
What are the current disadvantages?
What is the main problem in our handoff process?
Initial Research
The history of design systems can be traced back to large enterprises. It is difficult to avoid mistakes at scale when working with large teams of designers and engineers, resulting in a requirement for design systems.
We can design, develop, and ship products more efficiently with the help of a design system. Designers and engineers can collaborate more effectively and spend more time developing. This is true for businesses of all sizes.
Organize
I began with an interface inventory.
Tech stack context:
React + Vanilla JS + legacy jQuery.
Key observations:
Text styles were undefined.
Color themes didn’t match between web and mobile.
Component files were incomplete and scattered.
This audit became the foundation for a unified system.
The exciting part…
Components
Defined, documented, and shipped reusable component libraries for web:
Each component included states, usage guidelines, and code references, making it easier for developers to integrate and extend.
Core foundations
Color
Design language represents essential design properties. Our main priority was to design clear and accessible colors that help convey intent. XP’s design language spans over color, iconography, and typography.
Variables define values you can reuse between elements. This ensures consistency, scalability, and easier maintenance. Two types:
Primitive variables represent the most basic value. For example the naming would be associated to a visual attribute like red or grey-light. These are the source and never applied directly to the component!!
Semantic variables are built on top of primitives. Named to describe use, like border.primary or foreground.subtle. These are the only variables applied directly to components!
Naming = generic to specific
Element → Modifier → State
For example background.primary.hover tells you where it's applied, what variant, and when. Always aim to make it simple.
Typography
Adopted Inter as the primary typeface, chosen for its readability on screens and support for tabular numbers and contextual alternatives.
Iconography
Grids & Layout
It's vital to determine which efforts have the most influence on a design system. In our situation, grids, layout, and space were crucial. A responsive grid of 8 pixels allows a layout to adapt to the size of the screen. This guarantees consistency across the products.
Spacing
Challenges
One of the most difficult aspects of developing a design system is demonstrating its intrinsic value to the company. This, I believe, occurs because measuring influence is rather subjective. Should the number of components be used to determine success or failure? Or in the structure's complexity?
Another challenge was taking patterns from XP that were never intended to work on mobile and evolving them without sacrificing the data shown. To solve this problem we approached each component carefully, considering how the dev team determined standards for their guidelines while also looking at mobile conventions and optimal user experience.
Outcome
During sprint reviews in the early months of using and improving it, our engineers began to discuss the design system. They understood how rapidly we could design and create when the product's components are consistent across platforms.
We worked 2x faster!
What did I learn?
Design sytems are beneficial and a work in progress. Its important for collaborators to understand and communicate a design system.
Overall- helped showcase the importance of product design to all teams 😀️