Capival NG

Empowering your financial future

Overview

Capival is an innovative fintech platform designed to empower users on their path to financial freedom. It provides instant access to loans, investments, bill payments, and savings—all managed seamlessly and securely in real time.

Challenges

People rely on multiple apps to carry out their financial activities. This makes it very difficult and stressful for users to manage and track their financial activities. Also, there is a need to make money transfer, loans acquisition, bill payment and investment very seamless.

Solution

The goal is to make financial transactions effortless and accessible. The solution includes enabling users to perform multiple actions such as instant loans, bank transfers, investments, bill payments, and flight bookings—all within a single platform.

To achieve this, the focus was on designing an intuitive and user-friendly interface that caters to users of all backgrounds and technical abilities. The platform emphasizes simplicity, speed, and convenience, ensuring that every user can complete financial tasks quickly and confidently, without unnecessary complexity.


Assignment

My Role:
UX Lead
Interactive design
User Flows
Visual Design
Prototyping

My Role:
UX designer

Interactive design

User Flows

Visual Design

Prototyping

Deliverables:
User Research
User Interviews
High Fidelity Designs

Deliverables:
User Research

User Interviews

High Fidelity Designs

Team:
Front End Developers
Back End Developers
iOS Developer
QA Analyst

Team:
Front End Developers

Back End Developers

iOS Developer

QA Analyst

Design Process

Research - Conduct thorough research to gain a deep understanding of your users—their needs, behaviors, and challenges.

Define - Combine all your research findings to identify where your users’ problems lie.

Ideate - Brainstorm potential solutions and identify opportunities for innovation.

Prototype - Create tangible prototypes that bring best ideas to life.

Test - Conduct testing with users and iterate based on feedback.

Implement - Turn the final design into a real, deployable product.

Iterate - Refine the solution based on feedback and results.

User Research

User research emphasizes the process of understanding users’ perspectives, frustrations, and challenges. In addition to my personal observations, I employed two research methods that contributed significantly to my insights. The first method was a survey, consisting of questions designed to address the most relevant user needs. The second method involved asking direct questions to gather detailed, qualitative feedback from users.

Survey - I conducted a survey with 40 potential users to understand their views and experiences, collecting both quantitative and qualitative data. In addition, I conducted interviews to gather deeper insights. The target audience consisted of individuals aged 18 to 50 years.

Competitive Analysis

User Personas

The Capival app combines the core functionalities of both fintech and commercial banking applications. This integration prompted me to broaden my research scope to include features commonly found in both categories.

For instance, the Access Bank app focuses primarily on traditional banking services such as fund transfers, bill payments, and related transactions. However, it lacks fintech-oriented features like investment options, target savings, and pension plans.

Similarly, the Unity Bank app supports transfers and bill payments but offers a less flexible user experience and a subpar user interface. It also does not include advanced features such as loans, investments, or pension management.

In contrast, Carbon stands out as a robust loan app that effectively blends fintech and traditional banking services.

Empathy Map

User Personas

Empathy Map

User Journey

Empathy Map

User Journey

User Personas

Empathy Map

User Journey

This stage presents the high-fidelity design — the polished version that brings the concept to life. By this point, key decisions around color schemes, icons, categories, and other visual elements had been finalized to ensure a cohesive look and feel. The application was organized into four main sections, simplifying navigation and creating a more seamless user experience.

High Fidelity Wireframe

User Flow

Paper Low Wireframe

After finalizing the customer journey, we developed sketches to define the precise placement of elements.

Style Guide

The colour palette was carefully derived from Capival's primary and secondary brand colors. By maintaining consistency with the existing brand identity, the design reinforces brand recognition and strengthens overall brand awareness.

Primary - Colours that represent the brand, used as primary colour and accents.

HEX #111228

HEX #3B58A8

Text, Background & Others - Colours that represent the brand, used as primary colour and accents.

HEX #FFFFFF

HEX #C06B29

HEX #246362

HEX #AE1F24

Typography- Keeping in line with the brand elements and guideline, we decided to keep the Montserrat typeface, with some modifications to make it more whole and solid.

Montserrat

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Mid Fidelity Wireframe

The low-fidelity prototypes present a preliminary structure of what the final application will look like, serving as a guide throughout the design process.

Mid Fidelity Wireframe

Mid Fidelity Wireframe

The low-fidelity prototypes present a preliminary structure of what the final application will look like, serving as a guide throughout the design process.

Paper Low Wireframe

After finalizing the customer journey, we developed sketches to define the precise placement of elements.

Paper Low Wireframe

User Flow

User Flow

Style Guide

The colour palette was carefully derived from Capival's primary and secondary brand colors. By maintaining consistency with the existing brand identity, the design reinforces brand recognition and strengthens overall brand awareness.

Primary - Colours that represent the brand, used as primary colour and accents.

HEX #111228

HEX #3B58A8

Text, Background & Others - Colours that represent the brand, used as primary colour and accents.

HEX #FFFFFF

HEX #C06B29

HEX #246362

HEX #AE1F24

Typography- Keeping in line with the brand elements and guideline, we decided to keep the Montserrat typeface, with some modifications to make it more whole and solid.

Montserrat

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Style Guide

The colour palette was carefully derived from Capival's primary and secondary brand colors. By maintaining consistency with the existing brand identity, the design reinforces brand recognition and strengthens overall brand awareness.

Primary - Colours that represent the brand, used as primary colour and accents.

HEX #111228

HEX #3B58A8

Text, Background & Others - Colours that represent the brand, used as primary colour and accents.

HEX #FFFFFF

HEX #C06B29

HEX #246362

HEX #AE1F24

Typography- Keeping in line with the brand elements and guideline, we decided to keep the Montserrat typeface, with some modifications to make it more whole and solid.

Montserrat

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

High Fidelity Wireframe

This stage presents the high-fidelity design — the polished version that brings the concept to life. By this point, key decisions around color schemes, icons, categories, and other visual elements had been finalized to ensure a cohesive look and feel. The application was organized into four main sections, simplifying navigation and creating a more seamless user experience.

Style Guide

The colour palette was carefully derived from Capival's primary and secondary brand colors. By maintaining consistency with the existing brand identity, the design reinforces brand recognition and strengthens overall brand awareness.

Primary - Colours that represent the brand, used as primary colour and accents.

HEX #111228

HEX #3B58A8

Text, Background & Others - Colours that represent the brand, used as primary colour and accents.

HEX #FFFFFF

HEX #C06B29

HEX #246362

HEX #AE1F24

Typography- Keeping in line with the brand elements and guideline, we decided to keep the Montserrat typeface, with some modifications to make it more whole and solid.

Montserrat

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789