About Trickle
Trickle is a SaaS company focused on cross-functional collaboration in the North American market. Its design principle centers on seamless task management and communication to boost productivity. In Trickle's fast-paced startup environment, design and development are dynamic. Over the past two years, we've made two major product changes driven by new user research and brainstorming sessions.
The Problem
1. The previous prototypes and design system relied on third-party libraries, leading to inconsistencies, outdated components, and broken elements as development progressed. 2. The handoff process was inefficient, causing confusion among engineers and frequent back-and-forth with designers, resulting in inconsistencies between prototypes and front-end implementation.
The Outcome
I successfully developed a new design system from scratch, which resulted in increased consistency and uniformity, enhanced development efficiency, improved user experience, simplified maintenance and updates, and enhanced cross-functional collaboration.
WHAT IS DESIGN SYSTEM
External Research
After the senior designer resigned a week into my tenure, I had to step up as the solo junior designer. Navigating through this situation felt like walking in the dark, as I had to quickly adapt and learn independently. I began by studying the essential components typically included in a design system. Additionally, I researched 10 design systems of successful software products to analyze their approaches. This research included studying methodologies for creating robust and scalable design systems. After researching different approaches, we decided that the Atomic Design methodology would be a strong foundation for our system.
Internal Research
To tailor a design system specifically for Trickle, I conducted internal research. I reviewed existing product prototypes and the storybook to identify the most frequently used elements. Collaborating with front-end engineers, we established a clear structure and guidelines for our components, ensuring consistency and efficiency in design and implementation. I used mindmap to list the components used on our platforms and organized them into an initial structure of atoms, molecules, and organisms.
Mind map - Design system
BEGINING THE DESIGN PROCESS
Foundation
Before defining components, I had several meetings with the Head of Product to confirm the fundamental parameters such as colors, typography, grid, and spacing. We define the primary colors as purple to represent the energetic and vivid branding. Afterward, I collaborated with the front-end teams to align all foundational design tokens.
Colors / Typography / Grid & Spacing
Basic Components
I began with atoms, the fundamental units that would serve as the basic components for our design system. This included elements such as avatars, buttons, badges, checkboxes, form inputs, tags, toggles, tooltips...
Basic Components Examples
Business Components
More complex and functionally rich components were categorized as Business Components. During the design process, I adhered strictly to atomic design principles, building components from atoms, molecules, organisms, and templates to complete pages. This ensured that the design system was reusable, consistent, and scalable. Example: Drawer Property Component
Example - Process of Creating Drawer Property
ITERATION & HANDOFF
Multiple Solutions
After establishing a complete design system, I could quickly assemble new pages using predefined components. This efficiency allowed me to explore various design approaches and create multiple solutions for the same problem. I held meetings with the Head of Product to discuss the pros and cons of each design solution and to provide the rationale behind my decisions. Through these collaborative discussions, we were able to align our ideas and select the best route for development.
Example - Multiple Solutions for DM Feature
Considering Extreme Cases
Once the design solution was finalized, I needed to consider extreme cases for each feature to minimize the risk of encountering unforeseen "what if" scenarios later on.
Example 1: Header project name
While designing the header, I had to consider "What if users set an extremely long project name?"To manage this, I set a maximum character limit, implemented truncation rules, and added hover tooltips for full name display. This approach ensured a seamless user experience even in edge cases.
Project name - Maximum Length Limits
Example 2: Dropdown length limit
While designing the dropdown, I had to consider not only the maximum length of the dropdown itself but also the maximum length of its content. The content length was set so that the last cell would be partially visible, indicating to users that they could scroll down to view more content. This design choice ensures a clear visual cue for additional content, enhancing user experience.
By applying these principles, I was able to address potential extreme cases and ensure the usability and scalability of the design system.
Dropdown - Maximum Length Limits
Asynchrously Communicate
The new design system streamlined the collaboration process between the engineers and me. To reduce communication overhead and increase handoff efficiency, I provided engineers with prototypes showcasing behaviors, interactions, and various states, along with detailed annotations for each feature. After the engineers pushed the feature updates, I conducted thorough inspections to ensure accurate implementation. This process ensured clarity, minimized misunderstandings, and maintained consistency between design and development.
Example - Drawer Editor Annotation
Dark Mode
With a comprehensive set of components and sufficient prototypes, we decided to explore different themes for Trickle. By redefining colors, typography, and elevation rules …(etc.), I helped establish a dark mode, enhancing the user experience significantly.
The next steps would involve recoloring other pages based on the new color system, conducting user tests to gather feedback, and iterating the design as needed to ensure optimal usability and satisfaction.
REFLECTION
TAKEAWAYS
1. Growth as a Designer: Establishing the design system allowed me to learn and implement design guidelines effectively. This experience provided me with diverse design perspectives and ensured consistency in prototypes, significantly improving the efficiency of subsequent product iterations. 2. Growth as a Communicator: Continuous communication and collaboration with front-end engineers helped me understand many of the limitations and rules of front-end development. This enabled me to find a balance between design aesthetics and engineering feasibility. 3. Growth as a Thinker: Designing the system enhanced my ability to think from the user's perspective, considering various scenarios and providing corresponding solutions.