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
Mind map - Design system
Colors / Typography / Grid & Spacing
Basic Components Examples
Example - Process of Creating Drawer Property
Example - Multiple Solutions for DM Feature
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
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.