Sleek Design System
Making Sleek look like a billion bucks
- Role
- Senior UX/UI Designer
- Year
- 2023
- Team
- 1 Design, 1 Front-end Engineer
- Platform
- Web, Vue JS
"No proper design documentation coupled with teams that are not in sync on what frameworks to use, has lead to Sleek’s user interface being dated and inconsistent, which in turn will lead to usability issues as users need to learn and re-learn on how to use various parts of the app."
- 01Must be scalable across platforms
- 02Make use of existing tools and frameworks
- 03Update flow must be workable in Bitbucket
Atomic by design
Design from the ground up ensuring every component is properly structured before combining
Start righ
Every component the tokens they use mush be documented to reduce design debt
Adaptive by default
Each component must be responsive or have its mobile adaptive variant
Creating a shared design system powered by design tokens where developers and designers are always in sync, along with proper documentation ensuring new and current designers knows exactly how and when to use each component. By combining the power of Tokens Studio and Amazon's Style Dictionary, I was able to create a token system that was platform agnostic and can be extended to mobile and other platforms as well
Design token creation and update process
Design tokens in token studio
Design tokens exported to SCSS variables
Button component
modal component
Text input component
The hardest part wasn't designing getting started, it was trying to convince stakeholders in Tech that this was worth doing and this was before the age of AI