Trunkrs Design System

UI/UX Design
UI Components
Research
Style Guide
Overview
Collaborated with the design team to build a Design System to create consistent, reusable design components and establish a more efficient workflow across teams, departments, and projects within the organization.
Figma
Tools
I. RESEARCH
Apr 2014 - Mar 2015
Challenge
Every time we started a new project or developed new features for one of our products, we always designed elements from scratch. This meant designing the same components repeatedly, creating inefficiencies in time and workflow. Additionally, we noticed numerous inconsistencies in design elements, outdated interface components, and scattered resources across our products and team departments.
I. RESEARCH
Apr 2014 - Mar 2015
Approach
We began by reviewing our current applications and its components, followed by conducting research to establish a structure and guidelines for our system components. Our main goal was to create a cohesive set of elements that could function harmoniously within a larger system. To achieve this, we adopted the Atomic Design methodology. Starting with the creation of 'atoms'—the smallest building blocks of a design system—we focused on defining typography, colors, spacing, icons, radius, and strokes. Then, we used the elements to build reusable and customizable components that we can use to create interfaces and interactions.
I. RESEARCH
Apr 2014 - Mar 2015
Benefits
  • Centralized source for viewing components, patterns, and styles.
  • Standardized to ensure alignment and consistency between design and development.
  • Ability to replicate designs quickly by utilizing pre-made components and elements.
  • Helped improve product performance by focusing more on problems and solutions, and less on tweaking visual appearance.
  • Improved team collaboration and increased scalability.
I. RESEARCH
Apr 2014 - Mar 2015
Documentation
Documentation is crucial for an effective design system because it allows everyone to make consistent decisions quickly and efficiently. We created documentation and guidelines that outline the use cases of each element and component. This effort helped us maintain consistency and be organized.
I. RESEARCH
Apr 2014 - Mar 2015
Learnings and Takeaways
I've gained valuable experience through collaboration with teammates and learning how to create one from scratch. Here are some key takeaways:
  • Building a design system requires substantial time but yields long-term benefits.
  • It is a continuous effort of iterations and improvements.
  • Feedback is important for refining and improving a design system.
  • If you work as a team, it's crucial that everyone is aligned and works cohesively to achieve success.