Lerato Rabotapi

Nancial

/23
A mockup for an iPhone placed on a table for a personal finance web app

Where Learning Meets Life

Where Learning Meets Life

Client:

Friends of Design

Client:

Friends of Design

My Role:

Lead Designer

My Role:

Lead Designer

Year:

User Research, Competitor Analysis, Persona Development, Design Systems, UI/UX Design, Prototyping, Visual Design

Year:

User Research, Competitor Analysis, Persona Development, Design Systems, UI/UX Design, Prototyping, Visual Design

Service Provided:

Figma, Miro, and Typeform

Service Provided:

Figma, Miro, and Typeform

Challenge

South Africa's financial literacy crisis required more than just another educational platform. Our research showed that existing solutions were failing because they focused on information delivery rather than behaviour change. We needed to create an experience that could bridge the gap between knowledge and action.


Market Context:

  • 70% of South Africans struggle with basic financial concepts

  • Existing platforms see 80% dropout rates

  • Mobile-first access is crucial for reach

  • Traditional approaches aren't engaging young users

Deep Discovery

We approached this challenge through a comprehensive research program that looked beyond just educational needs to understand the cultural and behavioural aspects of financial learning.


Research Process:


Our three-week discovery phase included:

  • 20+ user interviews across diverse demographics

  • 6 competitor platform analyses

  • Financial behaviour pattern mapping

  • Educational journey tracking

Through this process, we uncovered crucial behavioural insights:

  • Learning happens most effectively in moments of need

  • Peer experiences drive stronger engagement

  • Progress visibility is crucial for motivation

  • Mobile access isn't optional – it's essential

Design System & Visual Language


Our design system balanced educational clarity with emotional engagement, built to scale across multiple learning formats.

Visual Elements

  • Vibrant yet trustworthy palette (Crayola Red #FF0053, Mango Tango #FF853A)

  • Heebo typeface for optimal readability

  • Consistent spacing and hierarchy for clear information flow

Component Architecture:

Built on atomic design principles:

  • Core elements (buttons, cards, forms)

  • Learning modules (video containers, quizzes)

  • Navigation patterns (breadcrumbs, learning paths)


Each component was designed for accessibility and mobile-first interaction, ensuring our platform could reach users across all devices and abilities.

Solution: The Learning Ecosystem

Rather than building just another course platform, we created an adaptive learning ecosystem that grows with users' needs and capabilities.

1. Personalised Learning Pathways


The platform adapts to each user's context and goals:

  • Skill-based progression system

  • Real-life application focuses

  • Culturally relevant examples

  • Bite-sized learning modules

2. Community Integration


Learning becomes a shared journey:

  • Peer success stories

  • Group challenges

  • Mentor connections

  • Local community integration

3. Progress Visualisation


Making progress tangible:

  • Achievement tracking

  • Skill tree development

  • Impact measurement

  • Goal celebration

Continuous Evolution

Our journey with Nancial continues as we:

  1. Expand content based on user needs

  2. Develop more interactive learning tools

  3. Build stronger community features

  4. Scale our impact across different demographics