2023

Tokenizing Design

Design System
UI/UX
Case Study
Product
Project Description
Implementing design tokens to enhance web design consistency, minimize human error, and astronomically accelerate development.
Problem
In web design, human error, inconsistency, and redundancy can hinder product quality, increase development costs, and slow down the speed to market. The lack of a cross-team source of truth for web styling and insufficient collaboration between content, creative, development, and ITQE teams further exacerbates these issues.
Solution
Implementing Web Design Process Automation, Figma Tokens, and Storybook Components offers a systematic approach to tackle these challenges. By automating the design process and establishing a single source of truth for web styling, the solution aims to minimize human error, ensure consistency, and eliminate redundancy. Additionally, it fosters better cross-team collaboration by transitioning from the Waterfall methodology to Agile.
Process

I collaborated with the lead developer on the team to propose a solution for the cross-team workflow. The proposal included the following:

- Integrate Web Design Process Automation to streamline the design workflow and reduce the chances of human error.

- Utilize Figma Tokens to establish a consistent design language and maintain design specifications across the teams.

- Implement Storybook and Amazon Style Dictionary to create reusable, modular UI components that can be easily shared and updated.

- Transition from the Waterfall methodology to Agile, promoting cross-team collaboration, iterative development, and rapid product improvement.

Design Elements
Results

The adoption of Web Design Process Automation, Figma Tokens, and Storybook Components effectively reduced new product development costs and increased speed to market by around 80% (from a projected 45%). By minimizing human error, ensuring consistency, and eliminating redundancy, product quality is significantly improved. The enhanced collaboration between content, creative, development, and ITQE teams fosters a more efficient development process, ultimately leading to better product outcomes and happier teams.

Tools Used
Project Links

See also

Flan.me Mobile Application
A purpose-driven networking app that leverages intelligent matchmaking and community-centric features to connect like-minded professionals
UI/UX
Branding
Case Study
Product
Design System
View project
Medicare Advantage Online Plan Shop
A senior-friendly online experience for finding, comparing, and enrolling in Medicare Advantage plans.
Case Study
Product
UI/UX
View project
Jadal Music Videos
A set of 3 lyric videos that generated millions of views and paved the way for audio-reactive, Arabic kinetic-typography.
Motion
View project
Spatial System & Acceptable Variance
A set of rules for how we measure, size, and space our UI elements and report defects.
Design System
Case Study
Product
View project
Anhelo Salud
Where hispanic seniors access the best health insurance options without hassle or pressure.
UI/UX
Branding
Design System
View project
United Nations on Digital Cooperation
Advancing global multi-stakeholder dialogue on working better together to realize the potential of digital technologies while mitigating the risks.
Motion
Sound
View project
Flan.design Web Application
A freelance platform for best-in-class design talent specializing in Metaverse, NFT and Web3 applications.
UI/UX
Branding
Motion
Case Study
Product
View project
Smartlink Launch
Innovation realized. Smartlink+ is a surge protector, an AC power bank, and a Bluetooth speaker.
Product
UI/UX
Branding
Motion
View project

Let's talk!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.