Work
Design System
How I go about creating reusable design components, guidelines, and best practices that ensure consistency in the visual and interaction design of LuckyTruck app, website, and brand products.
Role
Design Lead
Employer
LuckyTruck
Platform
Webapp
Areas
UI, UX, Design System
Problem Statement
The LuckyTruck platform needed a complete UI & UX overhaul to support the platforms growing user-base and allow them to build new features and screens on the fly. The company wanted to increase users by getting updates out quicker through a more consistent and scalable design system.
Design System Plan
1
Preliminary Research
Do initial research to understand the initial product, workflows of users, their needs and pain points. Then, gather inspiration and start setting the goals of patterns that are needed.
2
Design and Development
Create a visual style guide and guidelines that define typography, colors, iconography, and patterns. Create reusable components, variants, and patterns.
3
Publish, Present, and Maintain
Publish the design system so it is usable across all LuckyTruck design files. Show team members, especially engineers, how the design system works. Continue to build components and variants for anything needing to do more than one.
1
In a team, we started by looking at LuckyTruck's platform interviewing customers, users, and attempting to understand the friction points in the current platform and user journeys.
In this early research, we developed visuals that we started to break apart and start our initial design system.
2
We created an initial guide to define typography, colors, iconography, and patterns. This was a quick lift of this system design and not all items were perfectly structured or usable as components and variables. It was fast and got the job done, which were our priorities.
3
In the next pass, I was much more diligent about creating an organized system in Figma that could scale, was more efficient, and could be easily navigated by anyone. I provided access to all team members and routinely point to the design system for engineers to use.
Along with the design system for the product, I also created a brand book, which describes the purpose, tone, positioning, typography, and color. The brand connects the trucker’s view of colorful skies and long horizons of the land with a tech-forward, modern aesthetic by utilizing gradients and a blue-first yet broad selection of saturated colors.
