I led the implementation of a unified design system across seven web and mobile products, eliminating inconsistencies and streamlining collaboration between designers and developers.
resulted in a 200%+ increase in design productivity, adherence to brand and design guidelines, and a more cohesive user experience.
Company
TreeDots
DELIVERABLES
Productivity Improvement
Year
2021
Role
Design Lead
About the Company
TreeDots is Asia’s first B2B marketplace tackling food loss by redistributing surplus and imperfect food supplies to businesses at lower prices. Through a tech-driven approach, TreeDots optimizes supply chain logistics, enabling wholesalers, retailers, and F&B businesses to source sustainable ingredients while minimizing waste.
My Role
Led UI/UX strategy, aligning design with business goals. Collaborated cross-functionally to assess design impact, ensure stakeholder alignment, and oversee research. Conducted design reviews, provided training, and implemented user-focused solutions driven by market analysis and user insights.
Context
When I joined, scaling the product was difficult due to the lack of a unified design system. Duplicated components, inconsistent UX, and no design guidelines led to misalignment, rework, and delays. Without standardization, introducing new features efficiently was a challenge.
Problem
Considerations to Business goals
As a Design Lead, aligning product design decisions with the company’s business goals meant creating a seamless, intuitive platform that enabled efficient transactions, clear communication between buyers and sellers, and scalable features to support future growth. In an agile startup environment, features were often added last minute, and requirements frequently changed. To ensure timely launches and a scalable foundation for future growth, design deliverables needed to be clear, intentional, and well-documented. Establishing a structured design system helped standardize components, streamline collaboration, and ensure that product managers and developers had the necessary design guidance to execute efficiently without delays.
Lack of Shared Components
Many existing UI elements were not built as reusable components, leading to inconsistencies across products and repeated effort in design and development.
Disconnect Between Designers and Developers
Designers were unaware of the front-end component libraries developers were using, resulting in unnecessary time spent designing new components that already existed in code.
No Standardized Design Guidelines
Without a unified set of design principles and patterns, different products had varying UI and UX approaches, making it difficult to maintain consistency.
Scalability Issues
Without a structured system, adding new features became inefficient, as designers and developers had to create components from scratch rather than leveraging a shared library.
Lack of Documentation
Design decisions and component usage were not well-documented, leading to miscommunication and inefficiencies in the product development process.
The Approach
Assessment and Collaboration
Recognizing the challenges of creating a design system from scratch with limited resources, I collaborated closely with the engineering team to evaluate our existing development frameworks. This partnership ensured that the chosen design system would seamlessly integrate with our current technologies, facilitating a smoother implementation process
Customization and Branding
After selecting a commercially available design system compatible with our frameworks, I led the effort to customize it to reflect TreeDots' unique brand identity. This involved working closely with the Marketing team to align on branding elements such as typography, color schemes, and iconography, ensuring that the design system authentically represented our brand
Enhancing Communication
To bridge the gap between design and development, I established regular communication channels between designers and developers. This included joint workshops, design reviews, and feedback sessions to ensure that design components were not only visually consistent but also technically feasible and aligned with user needs
Implementation and Training
I oversaw the gradual rollout of the customized design system across our projects, providing training sessions and resources to familiarize the team with the new tools and guidelines. This empowerment enabled team members to effectively utilize the design system, promoting consistency and efficiency in their workflows
Sustaining Progress
To maintain the momentum and ensure the longevity of the design system's benefits, I delegated responsibilities for its upkeep, developed a comprehensive UI style guide, and instituted weekly update sessions. These measures fostered a culture of continuous improvement and adherence to the design standards we established
Result
