Hobpay Case study

PROJECT OVERVIEW.

The Challenge

Hobpay's mobile app suffered from critical UX issues and platform limitations that were hemorrhaging users and threatening business goals. With 38% of early adopters reducing activity to basic cash withdrawals and 28% of potential users lost due to iOS unavailability, the company was missing investor milestones.

The Solution

Created a comprehensive web platform that eliminated cross-platform barriers while redesigning the entire user experience. Used the web platform as a testing ground for UX improvements that could be replicated across mobile apps.

Impact Metrics

30% increase in user satisfaction scores

Recovered 28% of previously inaccessible iOS users

Reduced early adopter churn from limiting activities

Enabled company to meet investor transaction milestones

CONTEXT AND RESEARCH.

Background & Constraints

Hobpay is a fintech platform offering investment services, bill payments, its own insurance enrollment(“Rintegra”), and loan services ("Careplan"). The existing mobile app faced technical constraints on older Android devices and complete iOS unavailability, severely limiting market reach.

Business Context

10k+ active users primarily on Android

Investor performance metrics tied to monthly transaction volumes

Early adopters dropping to minimal usage patterns

Need for rapid cross-platform solution

User Research & Discovery

Research Methods

User surveys (58 participants)

Usability testing (5 users)

Heuristic analysis

Competitor analysis

Key Findings

43% of users primarily use Hobpay for bill payments (electricity, cable TV)

"Careplan" (loan service) is the most popular feature for frequent users

Users found interface overwhelming with too many options presented simultaneously

Poor visual hierarchy and inconsistent design language caused confusion

Competitor Analysis

Analyzed Kuda, Piggyvest, and Cowrywise to identify UX best practices in Nigerian fintech space.

DEFINE PROBLEM.

Problem Statement

How might we create a cross-platform financial services experience that reduces cognitive load while maintaining access to Hobpay's comprehensive service suite?

Key User Needs

Clear path to primary services without overwhelming options

Ability to manage finances from any device

Clear communication of security measures for financial transactions

Success Criteria

Increase user satisfaction scores above 3.5 (from current 3.2 average)

Enable iOS user acquisition

Reduce time spent on homepage due to confusion

Maintain feature accessibility while reducing cognitive load

DESIGN PROCESS.

Ideation & Concept Development

Based on user research, I focused on three core principles:

Progressive disclosure

Reveal functionality as needed rather than overwhelming upfront

Task-Oriented Architecture

Organize around user goals, not internal service structure

Trust-Building Design

Clear visual hierarchy and consistent interactions

Information Architecture

Restructured the navigation from service-based to user-goal-based:

Dashboard

Overview with quick actions for frequent tasks

Quick Actions

One-tap access to bill payments, airtime purchase

Services Shortcuts

Organized secondary services by category

Wallet Management

Unified view of all financial activities

Before

After

Wireframing & Prototyping

Started with hand-drawn exploration of layout concepts, Created systematic wireframe progression for responsive design, Built interactive prototypes to test navigation flows.

Process

Sketches

Low-fidelity wireframes

High-fidelity prototypes

DESIGN SOLUTION.

Final Design Showcase

Landing Page

Rintegra

Dashboard

Careplan

Dashboard

Rintegra

Careplan

Key Screen Improvements

Landing Page

Clear value proposition with streamlined onboarding

Dashboard

Card-based layout with visual hierarchy reducing cognitive load

Quick Actions

Prominent placement of most-used features (bill payments, airtime)

Investment Section (Rintegra)

Simplified investment flow with clear ROI information

Design System and Components

Style Guide Elements

Colors

Primary - #CA314A

Secondary - #322F62

Cards - #F5F5F7

Background - #C4C4C4

Inactive - #707070

Typography

Headings - Rubik

Friendly, approchable

Body - Poppins

Playful, rounded

Components

Icons

Responsive Design Considerations

Designed mobile-first approach ensuring seamless experience across

Mobile

Touch-optimized interactions, simplified navigation

Tablet

Adaptive layouts leveraging larger screen real estate

Desktop

Full feature access with enhanced productivity flows

TECHNICAL CONSIDERATIONS.

Development Collaboration

As both designer and developer, I made strategic decisions considering

Performance

Optimized component structure for fast loading

Scalability

Modular design system for easy feature additions

Cross-browser Compatibility

Ensuring consistent experience across platforms

Feasibility & Implementation

Technical Innovations

Responsive grid system accommodating various service card layouts

Progressive web app features for mobile-like experience on web

Optimized form flows reducing server round-trips

Development Constraints Addressed

Designed components within existing API limitations

Created fallback states for slower network
conditions

Structured layouts for easy integration with existing backend services

TESTING & VALIDATION.

Usability Testing Results

Testing Scenarios

Pay Utility Bill

3/5 users could complete task but struggled with navigation

Investment (Rintegra)

2/5 users found investment options clear and understandable

Health Insurance Enrollment

Mixed results, some difficulty finding entry point

Pre-Redesign Pain Points

Overwhelming homepage causing extended browsing time

Poor text legibility requiring users to squint

Unclear service explanations for Rintegra and Careplan features

Iteration & Refinement

Major Design Changes

Reorganized homepage with clear service categorization

Improved typography hierarchy and increased text sizes

Added explanatory content for unique services like Rintegra

Simplified navigation reducing the number of top-level options

RESULTS & IMPACT.

Quantitative Results

30% increase in user satisfaction scores

28% recovery of previously inaccessible market segment (iOS users)

Reduced cognitive load through improved information architecture

Faster task completion for primary user flows

Redesign Impact Metrics Chart

Qualitative Results

Users reported feeling more confident navigating the platform

Clearer understanding of available services and their benefits

Improved trust in security measures through better design communication

Long-term Outcomes

The web platform served as the design foundation for subsequent mobile app updates, creating consistency across all touchpoints and establishing scalable design patterns for future feature development.

REFLECTION & LEARNING.

What I Learned

This project reinforced the value of my dual design-development perspective. Understanding technical constraints early in the design process allowed me to create solutions that were both user-centered and implementable, avoiding the typical designer-developer friction.

What I'd Do Differently

Earlier Stakeholder Alignment

More upfront collaboration with business stakeholders on feature prioritization

Broader Testing

Expand usability testing to include more diverse user demographics

Iterative Development

Implement a more phased rollout approach to gather user feedback continuously

Technical Skills Applied

Frontend Development

Built responsive prototypes that could be directly implemented

API Integration Planning

Designed with existing backend constraints in mind

Performance Optimization

Created lightweight designs optimized for Nigeria's mobile network conditions

Explore how I redesigned a stock trading app for both novice and expert traders