ShopUp Unified

Design System

Creating a seamless user experience across all ShopUp products.

Imagine designing seamless user experiences for

Imagine designing seamless user experiences for

31

31

Million

Users

Million

Users

12

12

Mobile

Apps

Mobile

Apps

08

08

Unique

Brands

Unique

Brands

30

30

ShopUp

Teams

ShopUp

Teams

16

16

Admin

Panels

Admin

Panels

That's the challenge I tackled at ShopUp. From managing finance requests with intricate approval chains to supporting delivery hubs and warehouses across Bangladesh. ShopUp's internal operations are a complex ecosystem.

That's the challenge I tackled at ShopUp. From managing finance requests with intricate approval chains to supporting delivery hubs and warehouses across Bangladesh. ShopUp's internal operations are a complex ecosystem.

My Responsibilities

My Responsibilities

Research & User Insights

  • Designed and conducted user surveys and interviews.


  • Analyzed data to identify user needs and pain points.

  • Designed and conducted user surveys and interviews.


  • Analyzed data to identify user needs and pain points.

Team Leadership

  • Led a team of 4 designers to plan and manage workload.


  • Established timelines, coordinated UI audits and, component reviews.

  • Led a team of 4 designers to plan and manage workload.


  • Established timelines, coordinated UI audits and, component reviews.

Design Execution

  • Contributed to the creation of design components.


  • Developed comprehensive documentation of the components & patterns.

  • Contributed to the creation of design components.


  • Developed comprehensive documentation of the components & patterns.

Challenge: Existing Design System in 💎 Sketch

Challenge: Existing Design System in 💎 Sketch

Results 🏆Achieved

Results 🏆Achieved

1 Platform,

Seamless Design

1 Platform, Seamless Design

Unified library for mobile, web, and admin panels


Unified library for mobile, web, and admin panels

Unified library for mobile, web, and admin panels

3-Day Design

Sprints

3-Day Design Sprints

Design sprints slashed from 5 to 3 days - boosted efficiency

Design sprints slashed from 5 to 3 days - boosted efficiency

1.5-Days Deployment Boost

1.5-Days Deployment Boost

Development cycles increased by 1.5 days - unlocks agility

Development cycles increased by 1.5 days - unlocks agility

Unified Brand,

Happy Users

Unified Brand, Happy Users

Harmonious interactions & brand identity, user satisfaction up 25%

Harmonious interactions & brand identity, user satisfaction up 25%

117 Categories,

1500+ Variations

117 Categories, 1500+ Variations

Extensive component library with design flexibility and detailed UI patterns

Extensive component library with design flexibility and detailed UI patterns

Saved $4,500 & Improved Scalability

Saved $4,500 & Improved Scalability

Switching everything to Figma saved a huge annual budget & streamlined workflow

Switching everything to Figma saved a huge annual budget & streamlined workflow

PROBLEM STATEMENT

Inefficiencies in the Design System hinder Design & Development Workflow.

  • Sketch & Zeplin system hinders design, handoff, & raises costs.

  • Sketch & Zeplin system hinders design, handoff, & raises costs.

  • Delays projects, struggles to manage 8 brands & creating inconsistent experiences.

  • Delays projects, struggles to manage 8 brands & creating inconsistent experiences.

  • Sketch & Zeplin Designs require manual intervention impacting entire design workflow. hinders design, handoff, & raises costs.

  • Sketch & Zeplin Designs require manual intervention impacting entire design workflow. hinders design, handoff, & raises costs.

Project Timeline

Research Methodology

Research Methodology

Used a multi-pronged research approach to understand challenges affecting user experience across ShopUp's products.

  1. Comprehensive UX Audit

  1. Comprehensive UX Audit

Analyzed all app, websites, and admin panels to identify inconsistencies & improvement areas.

  1. User Interviews

  1. User Interviews

Interviewed users to understand the design system's impact on efficiency and experience.

  1. Competitor Benchmarking

  1. Competitor Benchmarking

Compared ShopUp's design system with industry leaders to adopt best practices.

  1. Developer & PM Insights

  1. Developer & PM Insights

Engaged developers and PMs to identify challenges to improve consistency.

  1. Tool Exploration

  1. Tool Exploration

Researched new tools to enhance component management and optimize workflow.

  1. Best Practices

  1. Best Practices

Explored methods for managing design systems for large companies.

Key Findings

Key Findings

Inconsistent designs across products fragmented the brand.

Inconsistent designs across products fragmented the brand.

Varied UI patterns hindered a seamless user experience.

Varied UI patterns hindered a seamless user experience.

Designers missed components, leading to duplicate efforts.

Designers missed components, leading to duplicate efforts.

Manual color changes extended design timelines.

Manual color changes extended design timelines.

Developers duplicated UI components, slowing development.

Developers duplicated UI components, slowing development.

Scaling and maintaining the design system was difficult.

Scaling and maintaining the design system was difficult.

Goals Established

Goals Established

Streamline design process with tokens and variables.

Streamline design process with tokens and variables.

Facilitate easy access and modification of components.

Facilitate easy access and modification of components.

Improve component organization and searchability.

Improve component organization and searchability.

Centralize brand color application for all business units.

Centralize brand color application for all business units.

Enhance developer handoff with clear documentation.

Enhance developer handoff with clear documentation.

Establish a robust, scalable component structure.

Establish a robust, scalable component structure.

Streamlining Design System with Figma

Streamlining Design System with Figma

That's the challenge I tackled at ShopUp. From managing finance requests with intricate approval chains to supporting delivery hubs and warehouses across Bangladesh. ShopUp's internal operations are a complex ecosystem.

That's the challenge I tackled at ShopUp. From managing finance requests with intricate approval chains to supporting delivery hubs and warehouses across Bangladesh. ShopUp's internal operations are a complex ecosystem.

Building a Flexible

Design System with Figma

Building a Flexible

Design System with Figma

Building Blocks:

Primitive Variables

We created foundational variables for size and color, which would be referenced to build the components.

We created foundational variables for size and color, which would be referenced to build the components.

Design Language: Component Variables

Referencing these core primitives, we created color, string, number, & boolean variables to be used in component design.

Referencing these core primitives, we created color, string, number, & boolean variables to be used in component design.

Developer Integration:

Component Tokens

Furthermore, each component was assigned its own set of variables to create tokens for devs to embed in the UI Kit.

Furthermore, each component was assigned its own set of variables to create tokens for devs to embed in the UI Kit.

Figma's Modes: Streamlined Branding

Figma's Modes: Streamlined Branding

One system, all brands. Designers select their brand mode, and components adapt with the right colors automatically.

One system, all brands. Designers select their brand mode, and components adapt with the right colors automatically.

A Design system that can handle 8 business units of ShopUp

A Design system that can handle 8 business units of ShopUp

Complete control over component

Complete control over component

  • Each component was meticulously created to offer the utmost control & customization.


  • Each component included a placeholder for nesting other components, allowing users to create complex UIs without starting from scratch.

  • Each component was meticulously created to offer the utmost control & customization.


  • Each component included a placeholder for nesting other components, allowing users to create complex UIs without starting from scratch.

Comprehensive

component library

Designers can easily find an overview of all components present in the design system.

Designers can easily find an overview of all components present in the design system.

Intuitive search shows all similar components

Each component is labeled clearly, allowing basic search functions to showcase all similar variations.

Each component is labeled clearly, allowing basic search functions to showcase all similar variations.

Eliminated

Redundancy

Components are equipped with enough control options, making duplicate variants unnecessary.

Components are equipped with enough control options, making duplicate variants unnecessary.

Placeholder & Nesting Components

Placeholder & Nesting Components

Empty placeholders allowed designers to modify components that required frequent changes without duplicating or altering the original component.

Below are some examples demonstrating the solution.

Empty placeholders allowed designers to modify components that required frequent changes without duplicating or altering the original component.

Below are some examples demonstrating the solution.

Example of placeholder in action

Example of placeholder in action

Component Examples

Component Examples

These examples show components with similar modular properties for efficient design use.

These examples show components with similar modular properties for efficient design use.

Making the system usable for everyone

Making the system usable for everyone

Every component in the design system was fully documented, not just for handoff, but to ensure continuity long after the original designs. Each page includes:

Every component in the design system was fully documented, not just for handoff, but to ensure continuity long after the original designs. Each page includes:

  • Guidance on spacing, padding, and how components adapt across breakpoints.

  • Guidance on spacing, padding, and how components adapt across breakpoints.

  • Rules for applying system colors and handling different visual states

  • Rules for applying system colors and handling different visual states

  • Notes for developers to implement consistently and reliably in code

  • Notes for developers to implement consistently and reliably in code

  • Instructions for designers to update or scale components with confidence

  • Instructions for designers to update or scale components with confidence

The documentation was grouped by component type, such as navigation, data entry, or data display, so anyone could quickly find what they needed. The goal was simple: make sure the system could grow and evolve even without the original designers or files.

The documentation was grouped by component type, such as navigation, data entry, or data display, so anyone could quickly find what they needed. The goal was simple: make sure the system could grow and evolve even without the original designers or files.

Navigating Challenges

Navigating Challenges

While the ShopUp design system has delivered significant benefits, the journey wasn't without its hurdles.

While the ShopUp design system has delivered significant benefits, the journey wasn't without its hurdles.

Risk of New Tools

Using Figma's new features involved uncertainty due to their untested stability.

Time Management

Balancing design system development with ongoing sprints required careful scheduling.

Resource Limitations

Constraints of the Figma plan forced us to split the design system due to insufficient modes.


Constraints of the Figma plan forced us to split the design system due to insufficient modes.

Constraints of the Figma plan forced us to split the design system due to insufficient modes.

Encouraging Adoption

Convincing designers and developers to adopt and integrate the new design system into their workflows.

Since the early days of ShopUp, one phrase has echoed through every room: the product manager’s battle cry of “as soon as possible.” Instead of fighting it, we leaned in and gave our design system the only name it could ever have

Since the early days of ShopUp, one phrase has echoed through every room: the product manager’s battle cry of “as soon as possible.” Instead of fighting it, we leaned in and gave our design system the only name it could ever have

ASAP Design System

ASAP Design System

Let’s design products that make complex things feel simple.

LinkedIn

Resume

farhadh.design@gmail.com

Farhad Hassan · 2025

Let’s design products that make complex things feel simple.

LinkedIn

Resume

farhadh.design@gmail.com

Farhad Hassan · 2025

Let’s design products that make complex things feel simple.

LinkedIn

Resume

farhadh.design@gmail.com

Farhad Hassan · 2025