Design System
As lead designer, I collaborated with ViewSonic’s global UI team to develop a comprehensive design system that made the website more accessible, modern, and visually cohesive. The system is also developer-friendly, cutting development and design time per page by about 50%. This efficiency allowed me and the UX team to shift our focus from pixel-pushing to solving higher-level user experience challenges.
The Problem: The current design system has too many variables, inconsistent image and button sizing, and inconsistent font usage.
Design System Overview
Goal and guiding princples
Before building out the design system, I discovered specific issues I wanted to address with the design system:
Too many variants: There were too many variants of everything ranging from image sizes, font sizes, page layouts, and CTA buttons.
Not developer friendly: The previous process involved our front-end developers eyeballing specs for everything on the website leading to us having to make multiple rounds of revisions before we had a passable product. I wanted to make sure the design system would have everything our developers needed to build efficiently.
No scalability: I wanted to make sure that the design system I built would be scalable for if we hire more designers, or if I were to leave the company. I focused on using atomic principles to make sure that the design system would outlast me at ViewSonic.
What I fixed
3 different CTA variants are already visible above the fold, 2024
Minimizing Variants within Designs
One of the biggest challenges I faced while designing ViewSonic was the inconsistency between my designs and the live application. I started to wonder if the developers were working with outdated or different assets. To confirm my suspicions, I conducted a quick site audit—and sure enough, I found a wide range of inconsistencies. There were multiple versions of buttons, badges, and other components scattered throughout the product, leading to a fragmented user experience.
Making the Designs Developer Friendly
Modernizing the Navigation System
I realized that meeting developer needs would be just as important as the design itself. I brought a front-end designer on board to collaborate on the system. Together, we added design tokens, CSS classes, and code snippets directly into the Figma file. This not only streamlined handoff, but also helped both of us better understand how the other works and communicates.
Scalability
3 different CTA variants are already visible above the fold, 2024
Making the Design System Scalable
Designing a scalable system as a solo designer posed the challenge of building components flexible enough to support future team growth while remaining efficient for current use. The key problem was identifying which elements should be built for reuse versus which were edge-case specific. To address this, I applied atomic design principles, created nested components, and leveraged component properties to streamline variants. It remains an ongoing process of refining the system to balance consistency, scalability, and practicality.
Outcome and learning
The design system is still a work in progress and continues to evolve. However, the new components we've implemented have already started to improve the overall product. My development team shared some valuable feedback, highlighting several key benefits: less time spent coding new components, more efficient handoffs with minimal need for explanation, fewer rounds of back-and-forth during QA, and a noticeable increase in consistency across the coded design.
Looking Towards the Future
As the design system continues to grow, my goal is to create more standardized, reusable assets that can adapt to various use cases. I also plan to break down components further and document how they behave within the context of the frameworks our developers use to ensure smoother implementation.
The numbers
~50% decrease in dev hours
~50% decrease in time spent on design
Curious to know more? Reach out to me at hojun1997@gmail.com