BRANCH | 2023
NEEM DESIGN SYSTEM
Led the creation of Neem, a Material 3-based design system that reduced design debt, improved consistency, and accelerated product delivery across Branch’s mobile platforms.
Company & product Context
Branch’s design ecosystem had fragmented over time, with multiple variations of Sprout components and inconsistent icon usage. This design debt slowed development and caused UX regressions.
The existing design system lacks cohesion, resulting in inconsistencies across the app leading to usability issues, terrible user experience and a consistent user dropoffs
Slow design, increased development time, and maintenance costs led to slow product optimisation and upgrades
Outdated design components, lack of documentation for use cases, and difficulty in finding and updating components led to increased design debt
My Role & Scope
I was the senior product designer leading system architecture, token definition, component standardization, and adoption strategy across design and engineering.
A map showing my ownership and collaboration across product, engineering, growth, data and suppor
A map showing my ownership and collaboration across product, engineering, growth, data, and support
Researching the Problem
The PDE (Product Design & Engineering) teams were dealing with a fragmented legacy design system - called Sprout - that caused inconsistent user experiences across its digital products. With varying theming, color palettes, and iconography, the design and development processes were inefficient, slowing down feature development and resulting in inconsistent interfaces. The major challenges are highlighted below:
No defined colour usage guidelines
Multiple fragmented ux patterns & design themes
Inconsistent icon library
No defined component structure
Non-existing collaboration workflows for engineers
DEFINING THE PROBLEM
The existing design system is fragmented, causing inconsistent user experiences across products. Multiple themes, a disorganized color palette, and mismatched icons led to inefficiencies and slowed development.
Key Decision 1
Adopt Material 3 with Tokenization
I based Neem on Material 3 and introduced design tokens using Figma Variables for color, typography, spacing, and elevation. This ensured scalability and consistency across themes and platforms.
A video showing the defined design tokens and style guide of Neem design system
Key Decision 2
adopting fontawesome library
The legacy icon set was inconsistent in style, naming, and coverage. I audited existing icons, evaluated Material Symbols and FontAwesome, and introduced custom icons for local financial contexts.
We adopted FontAwesome due to its robust library, custom features, documentation and developer support
An image of all legacy icons available in the Branch product
A video of the refined Branch icon library with better naming and sizing
Key Decision 3
atomic component structure
I audited our product experiences across our markets to identify active components and selected a few that passed usability requirements. I redesigned these components and introduced new ones using the atomic structure, creating variants to ensure a cohesive look and modularity.
A set of some components in the Neem design system
A video showing how components are structured from atoms to templates
Key Decision 4
Establish Governance and Contribution Model
We leveraged storybook to document our design system styles, component properties and use cases. We also documented processes for versioning and ownership of the design system
I collaborated with engineering to create a roadmap for maintenance and resource allocation. Finally, we established a quarterly cadence for reviews and new updates
An image showing a component delivery and contribution process diagram
Key Decision 5
Knowledge sharing session with engineers & Stakeholders
I conducted joint workshop with engineering teams to inform stakeholders on the design system work and create shared understanding of the design system and component adoption
As the project lead, I scheduled training session on Figma Dev Mode to update engineers on the WIP and teach them how to leverage Figma's comprehensive dev tools for design specs and assets management
An image showing the cover of Figma dev mode training with engineers
Execution Highlights
Implementing design tokens significantly reduced design debt and ensured consistency across products. By using a single source of truth, we reduced time-to market for new features by 25% and reduced design inconsistencies by 49%. This unified design language also improved our brand equity and overall user experience
A unified product experience across all markets
Reduced design debt by 49% and dev time by 40%
40% reduction in design maintenance overhead
Stronger collaboration with engineering
Single source of truth for UX/UI designs
25% faster time-to-market
Predictable UX for our products based on defined patterns
Improved product consistency and team confidence
Reflection
The system succeeded because it balanced rigor with flexibility. Earlier instrumentation around adoption metrics would have strengthened long-term measurement.
Hi
Let's build something meaningful
I’m most excited by teams that value thoughtful execution, strong collaboration, and long-term thinking. If you’re building products that need to scale - in complexity, quality, or ambition - I’m always open to a conversation.
Hire Me :
BRANCH | 2023
NEEM DESIGN SYSTEM
Led the creation of Neem, a Material 3-based design system that reduced design debt, improved consistency, and accelerated product delivery across Branch’s mobile platforms.
Company & product Context
Branch’s design ecosystem had fragmented over time, with multiple variations of Sprout components and inconsistent icon usage. This design debt slowed development and caused UX regressions.
The existing design system lacks cohesion, resulting in inconsistencies across the app leading to usability issues, terrible user experience and a consistent user dropoffs
Slow design, increased development time, and maintenance costs led to slow product optimisation and upgrades
Outdated design components, lack of documentation for use cases, and difficulty in finding and updating components led to increased design debt
My Role & Scope
I was the senior product designer leading system architecture, token definition, component standardization, and adoption strategy across design and engineering.
A map showing my ownership and collaboration across product, engineering, growth, data and suppor
A map showing my ownership and collaboration across product, engineering, growth, data, and support
Researching the Problem
The PDE (Product Design & Engineering) teams were dealing with a fragmented legacy design system - called Sprout - that caused inconsistent user experiences across its digital products. With varying theming, color palettes, and iconography, the design and development processes were inefficient, slowing down feature development and resulting in inconsistent interfaces. The major challenges are highlighted below:
No defined colour usage guidelines
Multiple fragmented ux patterns & design themes
Inconsistent icon library
No defined component structure
Non-existing collaboration workflows for engineers
DEFINING THE PROBLEM
The existing design system is fragmented, causing inconsistent user experiences across products. Multiple themes, a disorganized color palette, and mismatched icons led to inefficiencies and slowed development.
Key Decision 1
Adopt Material 3 with Tokenization
I based Neem on Material 3 and introduced design tokens using Figma Variables for color, typography, spacing, and elevation. This ensured scalability and consistency across themes and platforms.
A video showing the defined design tokens and style guide of Neem design system
Key Decision 2
adopting fontawesome library
The legacy icon set was inconsistent in style, naming, and coverage. I audited existing icons, evaluated Material Symbols and FontAwesome, and introduced custom icons for local financial contexts.
We adopted FontAwesome due to its robust library, custom features, documentation and developer support
An image of all legacy icons available in the Branch product
A video of the refined Branch icon library with better naming and sizing
Key Decision 3
atomic component structure
I audited our product experiences across our markets to identify active components and selected a few that passed usability requirements. I redesigned these components and introduced new ones using the atomic structure, creating variants to ensure a cohesive look and modularity.
A set of some components in the Neem design system
A video showing how components are structured from atoms to templates
Key Decision 4
Establish Governance and Contribution Model
We leveraged storybook to document our design system styles, component properties and use cases. We also documented processes for versioning and ownership of the design system
I collaborated with engineering to create a roadmap for maintenance and resource allocation. Finally, we established a quarterly cadence for reviews and new updates
An image showing a component delivery and contribution process diagram
Key Decision 5
Knowledge sharing session with engineers & Stakeholders
I conducted joint workshop with engineering teams to inform stakeholders on the design system work and create shared understanding of the design system and component adoption
As the project lead, I scheduled training session on Figma Dev Mode to update engineers on the WIP and teach them how to leverage Figma's comprehensive dev tools for design specs and assets management
An image showing the cover of Figma dev mode training with engineers
Execution Highlights
Implementing design tokens significantly reduced design debt and ensured consistency across products. By using a single source of truth, we reduced time-to market for new features by 25% and reduced design inconsistencies by 49%. This unified design language also improved our brand equity and overall user experience
A unified product experience across all markets
Reduced design debt by 49% and dev time by 40%
40% reduction in design maintenance overhead
Stronger collaboration with engineering
Single source of truth for UX/UI designs
25% faster time-to-market
Predictable UX for our products based on defined patterns
Improved product consistency and team confidence
Reflection
The system succeeded because it balanced rigor with flexibility. Earlier instrumentation around adoption metrics would have strengthened long-term measurement.
Hi
Let's build something meaningful
I’m most excited by teams that value thoughtful execution, strong collaboration, and long-term thinking. If you’re building products that need to scale - in complexity, quality, or ambition - I’m always open to a conversation.
Hire Me :
BRANCH | 2023
NEEM DESIGN SYSTEM
Led the creation of Neem, a Material 3-based design system that reduced design debt, improved consistency, and accelerated product delivery across Branch’s mobile platforms.
Company & product Context
Branch’s design ecosystem had fragmented over time, with multiple variations of Sprout components and inconsistent icon usage. This design debt slowed development and caused UX regressions.
The existing design system lacks cohesion, resulting in inconsistencies across the app leading to usability issues, terrible user experience and a consistent user dropoffs
Slow design, increased development time, and maintenance costs led to slow product optimisation and upgrades
Outdated design components, lack of documentation for use cases, and difficulty in finding and updating components led to increased design debt
My Role & Scope
I was the senior product designer leading system architecture, token definition, component standardization, and adoption strategy across design and engineering.
A map showing my ownership and collaboration across product, engineering, growth, data and suppor
A map showing my ownership and collaboration across product, engineering, growth, data, and support
Researching the Problem
The PDE (Product Design & Engineering) teams were dealing with a fragmented legacy design system - called Sprout - that caused inconsistent user experiences across its digital products. With varying theming, color palettes, and iconography, the design and development processes were inefficient, slowing down feature development and resulting in inconsistent interfaces. The major challenges are highlighted below:
No defined colour usage guidelines
Multiple fragmented ux patterns & design themes
Inconsistent icon library
No defined component structure
Non-existing collaboration workflows for engineers
DEFINING THE PROBLEM
The existing design system is fragmented, causing inconsistent user experiences across products. Multiple themes, a disorganized color palette, and mismatched icons led to inefficiencies and slowed development.
Key Decision 1
Adopt Material 3 with Tokenization
I based Neem on Material 3 and introduced design tokens using Figma Variables for color, typography, spacing, and elevation. This ensured scalability and consistency across themes and platforms.
A video showing the defined design tokens and style guide of Neem design system
Key Decision 2
adopting fontawesome library
The legacy icon set was inconsistent in style, naming, and coverage. I audited existing icons, evaluated Material Symbols and FontAwesome, and introduced custom icons for local financial contexts.
We adopted FontAwesome due to its robust library, custom features, documentation and developer support
An image of all legacy icons available in the Branch product
A video of the refined Branch icon library with better naming and sizing
Key Decision 3
atomic component structure
I audited our product experiences across our markets to identify active components and selected a few that passed usability requirements. I redesigned these components and introduced new ones using the atomic structure, creating variants to ensure a cohesive look and modularity.
A set of some components in the Neem design system
A video showing how components are structured from atoms to templates
Key Decision 4
Establish Governance and Contribution Model
We leveraged storybook to document our design system styles, component properties and use cases. We also documented processes for versioning and ownership of the design system
I collaborated with engineering to create a roadmap for maintenance and resource allocation. Finally, we established a quarterly cadence for reviews and new updates
An image showing a component delivery and contribution process diagram
Key Decision 5
Knowledge sharing session with engineers & Stakeholders
I conducted joint workshop with engineering teams to inform stakeholders on the design system work and create shared understanding of the design system and component adoption
As the project lead, I scheduled training session on Figma Dev Mode to update engineers on the WIP and teach them how to leverage Figma's comprehensive dev tools for design specs and assets management
An image showing the cover of Figma dev mode training with engineers
Execution Highlights
Implementing design tokens significantly reduced design debt and ensured consistency across products. By using a single source of truth, we reduced time-to market for new features by 25% and reduced design inconsistencies by 49%. This unified design language also improved our brand equity and overall user experience
A unified product experience across all markets
Reduced design debt by 49% and dev time by 40%
40% reduction in design maintenance overhead
Stronger collaboration with engineering
Single source of truth for UX/UI designs
25% faster time-to-market
Predictable UX for our products based on defined patterns
Improved product consistency and team confidence
Reflection
The system succeeded because it balanced rigor with flexibility. Earlier instrumentation around adoption metrics would have strengthened long-term measurement.
Let's build something meaningful
I’m most excited by teams that value thoughtful execution, strong collaboration, and long-term thinking. If you’re building products that need to scale - in complexity, quality, or ambition - I’m always open to a conversation.
Hire Me :