CS1B
/ CASE STUDYDesign System Evolution
Implementing a design token-powered UI-Kit to streamline the development workflow and improve product quality.
Potholes on the Road to Quality
Our B2C delivery team faced significant inefficiencies in its front-end development workflow due to a manual, fragmented styling process inherited from Storefront Reference Architecture (SFRA). Styles were decentralized and, in some cases, in-line across multiple pages. Each client project required developers to manually adjust every template, leading to repetitive work and extended timelines. The manual design hand-off process often caused misinterpretations, prompting additional QA passes to ensure accuracy.
These challenges posed a significant risk to the upcoming releases of our flagship product built on Salesforce Commerce Cloud. The delivery team struggled to complete projects on time, within budget, and to high-quality standards. The success of the product depended entirely on the timely and effective delivery of projects built with it, highlighting the urgency of addressing these problems.
This case study focuses on the strategic approach behind the Uplift Design System’s core UI-Kit.
For specifics of the resulting system, including components and examples, please see the companion case study Uplift Design System.
A Strategic (and tactical) Overhaul
To address our front-end workflow inefficiencies, I collaborated closely with the VP of Product to devise a comprehensive plan. We proposed implementing a white-label UI-Kit powered by design tokens.
Centralized Styling – The UI-Kit would unify front-end styling, including Page Designer styles, ensuring consistency across the entire product.
Design Tokens – Automating the style application process from design to build would reduce manual handoffs and cut down QA cycles, significantly improving development speed and accuracy.
Enhanced Theming Capabilities – The tokenized UI-Kit would support theming, enabling easy application of sub-brands, dark mode, high-contrast mode, and other stylistic variations.
Foundation for Future Advancements – The deployment of this new UI-Kit would serve as a key step towards a comprehensive design system that could extend across platforms and architectures, such as composable and headless, enabling seamless scalability.
This strategic overhaul was positioned to streamline our workflow and raise the overall quality of our deliverables, fundamentally transforming our approach to design and development.
“Quality is never an accident. It is always the result of intelligent effort. There must be the will to produce a superior thing.”
Charting the Course
First, we needed a team with diverse expertise to navigate the new territory of a tokenized UI-kit. With support from product leadership, I assembled a cross-functional group – a UX designer, a UX architect, and three developers – and facilitated open communication through weekly meetings. Our initial activities ensured everyone was aligned on the fundamentals of design tokens, as well as the project scope and deliverables.
Existing research and examples were reviewed to build a foundation for the process and define next steps.
The team determined early on that this UI-Kit, intended for white-label projects, needed to be significantly different from standard design systems¹. Its primary goal is rapid styling and flexibility to efficiently meet diverse project demands and tight deadlines, diverging from the typical focus on brand consistency.
A preliminary token inventory was created based on research, industry examples, and our specific needs. The potential inclusion of a third token tier² (component) was explored by examining available UI components.
Naming conventions and token taxonomy were investigated to prepare for Figma implementation. Building a clear taxonomy helped classify tokens consistently and provided a scalable, predictable naming convention for consumers.
We also created a proof of concept (POC) early on to validate the design tokens: a simple Figma file with a product grid, and a corresponding HTML/SCSS setup using variable changes. Presenting the POC to stakeholders with a basic SCSS compiler and Style Dictionary scripts demonstrated the workflow and identified areas for improvement, such as adjustments to base packages or custom functions.
- For consulting agencies, white-label products are more profitable than creating a new design each time. They accelerate project starts, streamline onboarding, reduce design debt, and enable continuous development.
- Later, the team decided to move forward with component tokens to provide greater flexibility for agency projects.
Sharpening the Blades
To set the stage for an improved development process and a seamless transition to design tokens, I facilitated regular collaboration sessions with the development team. Our initial steps focused on optimizing the environment, consolidating and refining the codebase, and conducting thorough quality assurance.
Environment Cleanup – FED work on the product was paused, a separate environment was created to isolate core styles, and the base repository was streamlined for improved organization and efficiency.
Code Consolidation – Common styling elements and any customizations were centralized while unnecessary code was removed to optimize the process. Styles from multiple sources were carefully merged, requiring decisions about what to keep or replace to achieve the desired outcome.
Refactoring of Key Features & Components – Front-end elements have been improved and reorganized, eliminating inefficiencies and inconsistencies to prepare for the upcoming tokenized styles.
Quality Assurance – A QA pass before tokenization ensured the newly combined styles functioned as intended and visually aligned with expectations.
Piloting the First Flight
Following the discovery phase and initial improvements to the environment and codebase, we conducted a pilot program focused on a small portion of functionality that would become our alpha release. Too often, teams rush to solve large problems without first testing solutions in a focused, controlled area. Starting small allowed us to validate our approach and process, refine quickly, and build a solid foundation for scale.
Limited Scope – Centered the pilot on the button component as a working example, prioritizing it alongside text fields and selectors to address immediate organizational needs.
Iterative Validation – Engaged small groups of participants to explore how they used the components, gathering insights to iterate and improve—whether validating our assumptions or uncovering unexpected use cases.
The Outcome – Presented the alpha to leadership, demonstrating in real time the system’s efficiency and the power of design tokens by updating all button components across the architecture from a Figma export in just 5–6 seconds.
Overall, the pilot program was a big success, earning us the support to move forward with the next phase.
Forging Ahead
Moving into implementation, my team took bold steps to make sure that every design decision was effectively translated into practical, coded elements. This stage was crucial for setting a precedent in quality and efficiency that would define our future workflows.
During this phase, I worked closely with the three developers on the project, conducting weekly design/code alignment sessions in addition to regular project scrums. This was an intense period of collaborative work, resulting in the following outcomes, some of which are still in production as of the writing of this.
Advanced Figma Components – I revamped the existing Figma library to align perfectly with front-end development best practices. Beyond merely exporting tokens, I thoroughly refactored every component in Figma to match its coded counterpart.
Building the Design Token Foundation – The team utilized Style Dictionary to convert Figma design tokens (JSON format) into usable SCSS variables, while simultaneously developing an initial library of semantic and component-based tokens within Figma.
Implementing Design Tokens – The front-end code was adjusted to incorporate the new CSS variables created by the design tokens. SCSS files across the codebase were updated to ensure seamless integration of the tokenized styles.
Automating Tokenization – A Node.js script was crafted to automate the tokenization process, incorporating learnings from the POC.
Adding Integrations – Extended tokenization to third-party cartridges included with the product, achieving consistency with the new styling standards.
Establishing Standards and Future Objectives – Our team instituted a process for regular builds and iterative improvements, solidifying clear token standards. Additionally, we outlined long-term objectives to streamline UI-kit updates.
A New Legacy
The release of the new tokenized UI-Kit marked a significant milestone, including major refactoring and tokenization of essential elements like headers, footers, and commonly used components. This foundational shift paves the way for an ever-evolving front-end framework.
Immediate Enhancements and Future Roadmap
Post-launch, we addressed initial issues, preparing for the 1.1 update and the more comprehensive Release 2.0 due in June 2024. This update will add tokens for Page Designer components as well as modal and card patterns used across the key product templates.
Efficiency and Quality Gains
Two projects completed in 2023 utilizing the partially-finished UI-Kit resulted in 40% fewer QA kickbacks and shorter delivery times, attributed to design and front-end development efficiencies introduced by the team and increased designer participation in sprints. We anticipate even further gains with future releases.
Future Applications
Moving forward, we plan to fully transition away from Bootstrap and other previous methodologies, freeing us from the constraints of the legacy framework. We are also set to initially adopt a progressive web application (PWA) framework for hybrid strategies, with plans to progress to a full PWA implementation as we optimize the base code for comprehensive functionality.
“Onur’s knowledge of all things design is vast and he is continually learning and upskilling himself on the latest and greatest. As I’ve worked with Onur on the UI-Kit, I am frequently impressed by his grasp of his technical area and with the way he is able to explain difficult concepts therein to others.”
The Aftermath
This initiative required significant time and effort from various teams. Although we regularly showcased progress, much of our work was not visible to others, making it difficult to convey the full scope and impact to executive leadership, especially when seeking additional sponsorship. A key lesson learned is the need for a more effective platform to communicate our accomplishments in terms that appeal to both high-level reviewers and subject matter experts.
This UI-Kit project project kickstarted our new design system Uplift. Currently in development, Uplift builds upon the UI-Kit and its standards, setting a robust framework for scalability. Read the companion case study to learn more.
Building on this momentum, DesignOps and DevOps are working together to establish an automated CI/CD pipeline that effectively incorporates design tokens.
In parallel, I am leading the training of the design team to utilize the tokenized styling for upcoming projects. This effort not only addresses immediate delivery needs but also helps identify areas for future enhancements, which we are incorporating into our release schedule roadmap.
