top of page

Mamo Pay

Payments App

This project was part of an interview process with a company called Mamo Pay, based out of Dubai, UAE. The intent was to test my Visual Design capability and whether I fully understand the flow of the payments app.

​

Role: UX/UI Designer + Researcher

Timeline: 5 Days 

Team Involvement: None

Project Status: Not Applicable

Navigate to  -->

Frame 421.png
Brief
Project Brief

What will you be tested for?

While we appreciate design research, planning, wireframes and flows, this exercise is positioned to test your (high-fidelity) visual design skills. We are not looking for the design of a complete app but rather understanding your thinking, attention to detail, visual design language and design management skills that include:


● Your general thought process
● Design management (file naming, file structures, layer organization, etc)
● Consistency of your designs to current Mamo’s visual language and its target audience
● Visual design, flows and elements that delight

The Problems

The goal is to design Figma, Sketch or Invision screens of how you envision the Mamo app based on the following problems. You
can pick and choose as many as you wish or go beyond through your own initiative. It's up to you how you link these screens
together or create relationships between the problems. It's also up to you to consider the most important elements, features and
flows of the screen.


1. As a user I want to send a friend money I owe, in the simplest and easiest way possible. I’d like to include a thank you
message. I’d like confirmation that this was successfully completed.
2. As a user I wanted to see my balance on a screen that also shows me my recent activities and any additional features that
maybe helpful.
3. As a user I want to share a QR code to my wallet with my friends and family, so they can quickly and easily pay me the
the money they owe.

Resources

Provided by Mamo Pay

Objective

1. As a user I want to send a friend money I owe, in the simplest and easiest way possible. I’d like to include a thank you message. I’d like confirmation that this was successfully completed.


2. As a user I wanted to see my balance on a screen that also shows me my recent activities and any additional features that may be helpful.


3. As a user I want to share a QR code to my wallet with my friends and family, so they can quickly and easily pay me the money they owe.

1. To provide an all-inclusive payments app that enables a user to carry out all functions related to their finance.


2. To provide quick easy access buttons to help them take quick actions in a detailed app like this.


3. To inform the user about the successful completion of a step, so that they have a sense of relief in using an app that deals with their account balance, credit cards etc. Keeping them well informed is the key.

Solution

The Process

Understand ----> Empathize ----> Identify ----> Current ----> Addition

Process

Understand

Problem Statement

  1. Users need a way to expand possibilities for an all-inclusive online payments app

  2. An app that feels comfortable, trustful and provides easy-to-use versatile mobile finance solutions

  3. That allows them to pay online, organise and control payments

  4. Track all their data in one single place

User Research Key Insights

  1. Most users who use payments app are looking to be independent in terms of their finances

  2. They are outgoing and often require the need to track their expenses.

  3. Don’t hesitate to spend on a product if they think is trustworthy and full of utility.

  4. Want to cut down on the number of finance apps they use to save time and energy.

  5. Better organisation of finance under One- Single-stop solution

Empathize

Identify

Existing Payment App Use Cases

  1. Track Expenses

  2. Add Card/Bank Account

  3. Send/Receive Money with Friends/Family

  4. Add Balance to Wallet

  5. Get Offers on Payments

  6. Monthly Insights

  7. Integration with brands

  8. Pay to Businesses

  9. High Security

  10. Earn in-app points for future payments

  11. Two step verification

  12. Interactive/ Playful UI to engage users

  13. Freedom to multiple functions

Existing Mamo Pay App Use Cases

  1. Track Expenses

  2. Add Card/Bank Account

  3. Send/Receive Money with Friends/Family

  4. Add Balance to Wallet

  5. Get Offers on Payments

  6. Monthly Insights

  7. Integration with brands

  8. Pay to Businesses (Mamo Business)

  9. High Security

  10. Earn in-app points for future payments

  11. Two-step verification

  12. Interactive/ Playful UI to engage users

  13. Freedom to perform multiple functions

Check Current Status

Add Use Cases

Easy to Implement Additions

  1. Track Expenses
    - Allow users to be able to track their expenses through the app, even if the payment was not originally made from it

  2. Monthly Insights
    - Help users understand their daily, weekly, monthly expenditure and their financial cycle

  3. Interactive/ Playful UI to engage users
    - While using a payments app, it is important to constantly inform users about how they interact with an app that enables them with better finance organisation and payment.

  4. Freedom to perform multiple functions
    - The user should not feel restricted while using the App. Additional good to have features make the users more room to explore within the app.

Brainstorming

Brainstorming ideas on paper to pen down all the initial thoughts and lay out a structure for what is required in the process. This helps in the beginning as in the initial bit it requires some time for the brain to adapt to a direction, so scribbling and generating multiple ideas contribute well to the process.

Scan 1.jpg
Scan 2.jpg
Information Architecture

This focuses on organizing, structuring, and labelling content in an effective and sustainable way.  The goal is to help users find information and complete tasks.  To do this, you need to understand how the pieces fit together to create the larger picture, how items relate to each other within the system.

Slide 16_9 - 4.png
Medium Fidelity Wireframes

A medium-fidelity wireframe is a step up from its low fidelity counterpart. Medium wireframes will have more detail — including accurate spacing, headlines, and buttons. 

Home.png
Payment Next Steps.png
Add Balance.png
Add Note.png
Home-1.png

Final UI Screen

Wireframes
UI Screen
Home.png
Payment.png
Home-1.png
Mamo Pay Button.png
Home-2.png
UI Screen.png
UI Screen-1.png
7.png
8.png
9.png
12.png
13.png
14.png
15.png
Working Prototypes

The interviewer expected 3 working prototypes with solutions, but during the process, I managed to come up with 7. Down below are the solutions listed with the functions each of them carry along with a video.

Working Prototype

1

Quick-easy Payment

  1. Notification Panel

  2. Instant Pay

  3. Send Note

  4. Add Card

  5. Payment Successful

2

Home Screen

  1. Welcome Message

  2. Active Balance

  3. Expense Tracker

  4. Recent Transactions

3

QR Code

  1. Share QR code/Link

  2. Scan Code/ Link

  3. Shared Prompt

4

Insufficient Balance

  1. Insufficient balance prompt

  2. Add Card Details

  3. Money Added

  4. Save Card Option

  5. Card Saved

  6. Payment Successful

5

Insufficient Balance

  1. Insufficient balance prompt

  2. Add Card Details

  3. Money Added

  4. Save Card Option

  5. Card NOT Saved

  6. Payment Successful

6

Track

  1. Expenses till date

  2. The money you are owed

  3. Money you owe

  4. Add Expenses

  5. Recent Transaction

  6. Filter Transactions

  7. Filtered Result

7

Notifications Panel

  1. Recent Activity

  2. Instant Pay- Payment Requests

  3. Send Note- Payment Received

  4. Note Sent Successfully

Marketing Pitch

This was an additional exercise that I added as a touchpoint for the interview. The marketing strategy for Mamo Pay  (August 2021) wasn't very high on the right keywords that lure the audience to a product. Hence, a small example of how the tone of voice of marketing could sound more empathetic to the users and help them in sales as well.

Screenshot 2021-12-31 at 4.11.33 AM.png
Seamless Payments
Fun Personalization
Instant Transactions
Safe Banking
Screenshot 2021-12-31 at 4.14.56 AM.png

I’d love to build something great with you, say hi.

Get to Know Me

  • 225097
  • Instagram
  • Twitter
  • LinkedIn

Copyright

© 2022 by Shreya Agarwal

bottom of page