Overview
Hubtel is a leading fintech and e-commerce company in Ghana, renowned for its innovative digital payment solutions and strong customer engagement services. Since its inception, Hubtel has transformed Ghana's financial technology landscape with seamless, secure, and efficient payment systems. Their diverse offerings include mobile money services, e-commerce platforms, and digital wallets, serving millions of customers and businesses. Hubtel's commitment to technological excellence and user-centric design has solidified its position as a market leader in the region.
Role
As a core team member, I directed most design initiatives and partnered with designers, product managers, and developers throughout the project.
Goal
The objective is to establish a cohesive visual language across platforms, ensuring consistency for over 40 Hubtel products. This entails developing reusable design components and a comprehensive UI kit for a universally recognisable user interface
Why do this?
Why do this? The decision to create this design system is driven by our need for efficient collaboration across our expanding team and projects, ensuring a consistent user experience across different products and platforms. Here's why:
- Scale Design: A unified design system supports effective expansion of our design efforts as we grow.
- Manage Design Debt: It allows us to handle and reduce inconsistencies over time.
- Design Consistency: Ensures all our products have a cohesive look and feel, enhancing usability and brand identity.
- Iterate More Quickly: Enables faster feedback collection and design refinement.
- Focus on User Experience: Provides clear guidelines, allowing teams to focus on delivering an exceptional user experience.
Team
- Design Ops
- Product Managers
- Engineering
Roadmap
June 2023 - Present
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 Colors, Typography, Iconography, Components
- User Testing
Implementation
- Component Prioritisation
- Documentation
- Handoff & Collaboration with Engineering
- Design System Implementation
Inception
What is the Visual Language of Hubtel?
Hubtel's visual language is guided by our design principles: Simplicity, Accessibility, Aesthetic, Consistency, and Usability. These principles ensure a cohesive and intuitive user experience across all products.
Brand & Product Audit
- 500+ Components Identified: A comprehensive audit revealed over 500+ unique components.
- Streamlined Patterns: Patterns were refined based on usage and usability.
- Contrasting Colors: Key colors were identified to enhance readability and accessibility.
Conception
Result of the concept stage
Refinement
Created the design system, named Butterfly.Thoroughly tested every component of the design system across multiple applications.A team to oversee the creation of Butterfly combining technical & design expertise.
Design System Plan
- Created the design system, named Butterfly.
- Thoroughly tested every component of the design system across multiple applications.
- A team to oversee the creation of Butterfly combining technical & design expertise.
Implementation
Implementation of the New Design Ssytem
- Implemented new designs 350+ flows, Conducted workshops what we call “OPERATION”, had full support from development and product teams.
Outcome
Accomplishments
- Inserts of more than 200000+ components
- Launched new B2B brands quickly
- Improved the design process with efficient onboarding practices.
- Facilitated the rapid launch of new features.
- Achieved 30% coverage of the new design system in year one.