Banking App

Mama App

A mobile banking application that
allows users to make transfers with
their mobile money account

Client

Mama Corporation Ghana

Role

Lead Designer

Date

September – November 2020

Our Services

Wireframing (Low to High Fidelity)
Protyping and Mockup Design
Brand Identity
UI Styling Guide
Information Architecture
Usability Testing

Definition

Mobile Money Transfer is a technology that allows you to send and receive money using a mobile phone. This means that a mobile phone is no longer just a communication device. it’s now also a money wallet.

How Does it Work: There are other mobile application that offers the same kind of service but the difference in this is the user can communicate with friends using the same app.

The Goal

Problem: Mobile money transfers is allowed only through mobile operators. Users need to be phsyically present with the mobile money operator to be able to make transfers

Solution : Create an app that allows users to register their mobile money account, make money transfers and pay for vouchers/bills through the app.

Main Goal For App

App should be simple to use by all on both iOS and Android
App should be secure
App should use common patterns users are already familiar with.

Process Involve

The Design Process

DISCOVER: This involved getting to know more about the Users, this was carried out with a team of UX Designers in Ghana who helped in selecting users to test the product.

Develop: With the information gathered from our users which includes MVP, JTBD, User flows were generated which help us gather all the necessary screens needed

Test: Low fidelity wireframes were generated from the user flows, this was then prototyped using Invision and tested on the various participants. Feedbacks were considered which help to generate Mid – Fidelity wireframes

Develop: Final designed were developed sticking to strict material guidelines for both iOS and Android. This includes style guides and patterns

User Flow Chart

Low Fidelity Wire Frames

Mid Fidelity Wireframes

High Fidelity Wireframes

The Result

Visual Hierarchy: Different font sizes have been used to represent different sections of the screen.

Colours: Different colour has been used on both the CTA button and the active navigation bar button to make it easier for the user to identify

UI Style Guide: Following the material guidelines for both iOS and Android, I followed the accepted typeface for both devices.