Enhancing Product Efficiency Across 40+ Products Through a Scalable Design System

Hubtel is Ghana's leading digital payment services provider, has been ranked as the Fastest Growing Company in Ghana and 30th fastest growing company in Africa. We're currently building is also building a platform that everyone can find, pay and easily partake in the digital economy.

I contribute to one of the most important piece of the puzzle at Hubtel. Notably I lead the design system team, and also a lead designer of the merchant growth and consumer growth team.

tldr; My role was to lead the product direction as the senior product designer, to create an ecosystem of tools for businesses solve the logistics needs.

Role

Lead UX Designer

Duration

May 2020 - June 2023

Hubtel Design System

Visit

Goal

The objective is to establish a cohesive visual identity for Hubtel's suite of over 40 products across all platforms. This will be achieved by:

  • Developing a set of reusable design components
  • Creating a comprehensive UI kit
  • Implementing a universally recognisable user interface

This approach aims to ensure consistency and brand unity throughout Hubtel's product ecosystem.

Design System Component

Why Are We Doing This?

The decision to create a design system is driven by the need for consistent, efficient collaboration across our expanding team and projects, ensuring a unified user experience across various products and platforms. Below are a few reasons why we are doing this.

Scale Design

Manage Design Debt

Improve Consistency

Prototype Faster

Iterate More Quickly

Process & Roadmap

The decision to create a design system is driven by the need for consistent, efficient collaboration across our expanding team and projects, ensuring a unified user experience across various products and platforms. Below are the key stages in our process and roadmap.

Inception

  • Brand & Product Audit
  • Design Principles Workshop
  • Identifying Challenges

Conception

  • Design Exploration for Web & Mobile Apps
  • Brand Alignment
  • Concept Development

Refinement

  • Product Flow Testing
  • Refining Colours, Typography, Iconography, Components
  • User Testing

Implementation

  • Component Prioritisation
  • Documentation
  • Handoff & Collaboration with Engineering
  • Design System Implementation

Next Steps

  • Feedback
  • Request Collection
  • Reviews
  • Training
  • Audit

Achievements

400+ Components

18k+ Weekly Inserts

145 Styles Created

40+ Products Use It

Used Across 7 Teams

Design System Component

Takeaways

Through out our process we realised building a design system is a team effort and people have different ways of using your products. Hence understanding how to incorporate different ideas into a grand plan is very essential, that's why we went with the open system approach for feedbacks.

By allowing users or stakeholders to share their feedback however it's convenient for them. This increases the chances of them actually providing feedback to the design ops team for constant improvement and refinement.