[Internal] Team Strategy & Leadership

🏢 TreeDots Enterprise Pte Ltd

👩🏼‍💻 Design Lead (Role)

📍Singapore

Company Description

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.

Project Description

I spearheaded the implementation of a unified design system across seven web and mobile products, eliminating inconsistencies and streamlining collaboration between designers and developers. This resulted in a 200%+ increase in design productivity, enhanced adherence to brand and design guidelines, and a more cohesive user experience.

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

Without a unified design system, designers created components that developers had to interpret and rebuild from scratch, often resulting in inconsistencies.

Developers might also implement their own solutions without design input, further fragmenting the product experience.

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.

Challenges

1. Lack of Shared Components

2. Disconnect Between Designers and Developers

3. No Standardized Design Guidelines

4. Scalability Issues

5. Lack of Documentation

The approach to resolve issues:

In addressing the design inconsistencies at TreeDots, I adopted a strategic and collaborative approach to implement an effective design system.

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

Results

This structured and collaborative approach led to a significant increase in prototype production speed and a more cohesive design language across TreeDots' products.

Designers were able to:

1. Rapidly create prototypes for brainstorming and discussions.

2. Facilitate effective brainstorming sessions with product managers.

3. Accelerate final prototype production by over 200%.

4. Enhance consistency and adherence to brand guidelines.

5. Quickly implement design changes for A/B testing.

6. Improve communication with developers.

7. Gain a better understanding of technical limitations and propose viable solutions.

Follow up

Key Actions for Effective Design System Management and Documentation

1. Delegate Additional Responsibilities: Assign specific tasks to team members for maintaining and updating the design system.

2. Implement Comprehensive Documentation: Develop design guidelines to ensure all designers are aligned with consistent guidelines across platforms.

3. Schedule Weekly Updates: Require all designers to attend a weekly session to provide updates on their tasks and discuss any necessary adjustments to the design system or UI Style Guide.

4. Review and Update Protocols: Ensure that any modifications to the design system, color schemes, or icon libraries are reviewed and updated in all relevant product files.

Thanks for reading! Cheers - Diana ☺️