About me

Experience

Resume

About me

Experience

Resume

Roots - Greenstand Design System

I designed a modular design system for Greenstand’s two flagship applications — TreeTracker and TreeTrader — used by reforestation workers across Africa and Europe.

The system streamlined UI development, ensured accessibility, and created visual consistency across platforms, empowering teams to scale faster while staying user-focused.

The Problem

TreeTracker (mobile) and TreeTrader were designed in silos, leading to inconsistent UI, duplicated work, and fragmented user experiences. Without shared patterns or guidelines, teams across regions faced misalignment, slowing down development and confusing users.

The Goal

Establish a unified design system to streamline collaboration and ensure UI consistency across both platforms. The system needed to scale across regions (Africa & Europe) and serve as a single source of truth for designers and engineers.

My Role

Lead Product Designer

I led the design system initiative from conception to implementation, working closely with engineers to ensure the system met both design and development needs.

Tools: Figma, Notion, Storybook, Miro
Scope: 2 mobile apps · 150+ reusable components

Responsibilities:

Auditing existing UI patterns across both applications
Defining design tokens and component specifications
Creating a comprehensive Figma component library
Collaborating with engineers on implementation
Documenting usage guidelines for the teams

Discovery & Audit

I conducted a comprehensive audit of existing UI elements across both applications, cataloging inconsistencies and identifying opportunities of standardization

Key Findings

Component Drift

Multiple versions of buttons, inputs, and cards existed across platforms, with no consistent behavior or styling.

Token Misalignment

Color and spacing tokens were inconsistently applied — including 7 shades of green and varying padding scales.

Interaction Inconsistencies

States like hover, focus, and disabled weren’t clearly defined, leading to unpredictable user interactions.

Component Drift

Multiple versions of buttons, inputs, and cards existed across platforms, with no consistent behavior or styling.

Token Misalignment

Color and spacing tokens were inconsistently applied — including 7 shades of green and varying padding scales.

Interaction Inconsistencies

States like hover, focus, and disabled weren’t clearly defined, leading to unpredictable user interactions.

Research & Inspiration

I researched established design systems to understand best practices and find inspiration for our approach, focusing on systems that balanced flexibiltiy and consistency.

Material UI 3

→ Atomic structure & scalability

Adopted a modular approach using atomic design principles
Defined consistent padding, grid, and responsive breakpoints
Simplified variants using nested components and properties

→ Atomic structure & scalability

Adopted a modular approach using atomic design principles
Defined consistent padding, grid, and responsive breakpoints
Simplified variants using nested components and properties

Adobe Spectrum Design System

→ Cross-platform consistency & accessibility

Applied semantic color tokens for theming and clarity
Followed accessibility standards (contrast, states, focus styles)
Took cues from Spectrum’s documentation to support dev handoff

→ Cross-platform consistency & accessibility

Applied semantic color tokens for theming and clarity
Followed accessibility standards (contrast, states, focus styles)
Took cues from Spectrum’s documentation to support dev handoff

The Roots Design System

Developed a comprehensice design system named 'Roots' to unify the visual language across all Greenstand applications while enabling flexibity for future growth.

Treetracker App Screens

Redesigned TreeTracker app showcases the Roots Design System in action, with consistent components and improved usability

Impact & Results

The implementation of the Roots Design System elevated Greenstand’s core applications — TreeTracker and TreeTrader — by improving development speed, UI consistency, and user accessibility across platforms.

Key Wins

🔧 45% Faster Development
New features shipped more quickly with reusable, standardized components.

📈 30% Increase in User Clarity
Cleaner layouts and consistent patterns reduced user confusion and boosted engagement.

🧩 60% Codebase Simplification
Redundant components were merged and modularized across TreeTracker and TreeTrader.

♿ WCAG AA Accessibility Compliance
All UI elements meet minimum color contrast and interactive state requirements.

Key Wins

🔧 45% Faster Development
New features shipped more quickly with reusable, standardized components.

📈 30% Increase in User Clarity
Cleaner layouts and consistent patterns reduced user confusion and boosted engagement.

🧩 60% Codebase Simplification
Redundant components were merged and modularized across TreeTracker and TreeTrader.

♿ WCAG AA Accessibility Compliance
All UI elements meet minimum color contrast and interactive state requirements.

Conclusion

The Roots Design System helped bring consistency, scalability, and clarity to Greenstand’s digital ecosystem. By aligning two independently built apps under one unified system, we streamlined design and development workflows, improved accessibility, and made the user experience more intuitive across platforms.

This project not only strengthened my skills in systems thinking and documentation but also showed me how impactful a well-crafted design system can be and not just for designers, but for teams, products, and users at scale.

Things I learnt in this project

Cross-Functional Collaboration

Working closely with engineers throughout the process helped bridge the gap between design intent and implementation. It reminded me that a system is only successful if it's usable by everyone and not just designers.

Thinking in Systems

Designing components to be flexible yet consistent taught me to zoom out from screens and think in tokens, patterns, and structures. This mindset shift helped me scale UI decisions faster across apps.

The Power of Documentation

I learned that thoughtful naming, clear guidelines, and real-world examples make or break adoption. Good documentation reduced guesswork and improved design-dev handoff significantly.