UI/UX Case Study Re-design : OVO — Application for digital payment

Putueka
11 min readSep 8, 2021

--

Introduction

Hello, my name is I Gusti Ngurah Eka Prasna, usually called Eka. I am one of the students from the UI/UX bootcamp named Dibimbing.id. I am an employee who wants to move into a career as a UI/UX designer. This case study is my final project while studying at Dibimbing.id bootcamp.

Overview

OVO is a smart application that provides online payment and transaction services (OVO Cash). OVO offers easy transactions without requiring customers to carry too much cash. One of them is enough to show the OVO application in which there is a cash or point balance. This application supports payments using scanned barcodes, phone numbers, and loyalty codes.

The goals of the project is to provide a better experience for the users by indentify any usability issues and improve OVO interface and experience based on users behaviour and pain point.

Role: UI/UX Designer

Scope: User Research, analyzing, user flow, Information Architecture, Wireframing, Mock-up, Design System, Prototyping, and Usability Testing.

Timeline: 4 weeks

Tools: Figma

The Process

To solve complex problems that are unclear and unknown, I will use a framework for thinking that helps us solve problems with a more user-centric approach to get creative, innovative and user-required solutions, namely the five stages of design thinking (empathy, define, ideation, prototype, and test).

Empathize

At this stage, I will do research preparation, create research guidelines, and do the research itself. At this stage it focuses on searching for problems in the OVO application.

Background

During this pandemic, social distancing is very serious. Payments using cashless applications such as OVO are one way to keep us from direct contact. OVO is one of the largest applications and has quite a large number of users. Quoted from katadata.co.id in total, the OVO application has been used on 115 million devices. The number of users increased due to people switching to digital services during the COVID-19 pandemic. To accommodate people to be more comfortable using OVO.

The OVO fintech application has been downloaded by more than ten million and received 3.8 reviews out of 665 thousand reviews. Based on several reviews from users on the Play Store, a lot of problems were expressed. Some will be shown below:

Plan the Research

Objective

Our objective here is to find and explore the motivations, habits, problems experienced by OVO application users. We will dig into the problems found and find the root of the problem.

Methodology

Qualitative methodology — In Dept Interview

Sample Specification

  1. OVO users who have used the OVO application at least once in the last month
  2. Male/Female
  3. 20–40 years old
  4. National Scale

Research Guideline

Key Information Area

User Profile

  1. Name
  2. Ages
  3. Domicile
  4. Job
  5. how long to be an OVO user

User Experiences

  1. Perception of OVO.
  2. Pain points using OVO.
  3. Satisfaction with using OVO.
  4. User habits using OVO.
  5. User needs when using OVO.

Discussion Guide

What do you do?

How old are you?

What do you think about the OVO app?

What is your purpose for using OVO?

Explain to me how you habitually use the OVO app?

How was your experience while using the OVO app?

Did you find difficulty while using the OVO app?

Why do you use this feature?

What do you expect by using this feature?

What do you like about the OVO app?

What do you dislike about the OVO app?

What do you need when using the OVO app?

Timeline

Conducting the Research

At this stage, I explore what users think with user interviews. Because we are currently still in a COVID-19 situation, interviews are conducted online via the Zoom Meeting and whatsapp application.

Conducting the Research

At this stage, I explore what users think with user interviews. Because we are currently still in a COVID-19 situation, interviews are conducted online via the Zoom Meeting application.

Define

Competitive analysis

Identify competitors by comparing our products with similar competitors’ products. This method is always effective to see the weaknesses and strengths of competitors’ products that we can learn from. In this competitive analysis, I compared OVO with funds and gopay, which are applications with the same niche.

Affinity Map

After doing the IDI, the insights obtained from these results are represented using an affinity diagram. Using an affinity diagram technique can help us discover embedded patterns of thinking by sorting and clustering language-based information into relationships.

User Persona

A user persona is a fictional character that represents the target user of the product. User personas help us to focus on identifying and solving problems experienced by users.

Customer Journey Map

A customer journey map is a popular UX method that allows discovering a lot of insights about users. We can reveal more details such as the user’s emotional transformation, pain points, and UX opportunities. Based on the results of the analysis, the user has many pain points in the process of choosing a book.

Problems

Based on the analysis using affinity diagrams and customer
journey maps , i found several problems need to improve from
register, login, top up and transfer.
There are four parts to upgrade :

  • Users waiting too long for code OTP

“Lama ya kode OTP, pengen deh login pake ID”

When they want to login for first time, or accidentally log out from the app.
users feel the login flow feels long. from logging in with a phone number,
get a verification code that sometimes takes a long time to arrive. Some
users have many accounts OVO for Grabwheel or for their shop at
Tokopedia. Users need easy way to login that help their needs.

  • Users get problem for upgrade to OVO Premier

“Waktu daftar lewat app, KTP gua ga kedetect terus. Karena
gua butuh buat toko gua di Tokped yaudah daftar di bootnya
di mall terdekat”

Some users installing OVO app are for tricked their self or hold them to buy
something impulsive or just say for saving money. Others need transfer feature
to get admin fee discount. But all that features are just in OVO Premier.
If users can’t or get problem for upgrade to OVO Premier they can’t get all the
features that OVO provide. Therefore, it’s necessary to have more information
while upgrade to OVO Premier to guide users upgrade their account became
OVO premier users.

  • Some users are used to top up balances via mbanking

“Udah biasa sih pake mbanking, tapi suka lupa kode awal
VA nya. Nomor awalnya juga lima nomor unik yang harus saya
hapal”

When users want to top up OVO balance, most of them love to top up
with banking method. The constraint when top up with banking method
which is we need to memorize five first number virtual accounts code
followed by the users phone numbers. Some users get trouble to
memorizing them. Some others said they don’t know OVO have instant
top up via debit BCA card, others said instant top up just for BCA users.
The balance deducted for admin fees is also one of their concerns about
problems in filling the balance. We need to help users to get their VA
without memorizing the code and provide more information for top
up methods especially instant top up.

  • Users don’t know they have to pay admin fees for transfer balance

“Waktu saya transfer kesesama ovo, kok ada biaya admin seribu
rupiah ya?”

Some users feel disappointed because they don’t know the cost of admin fee
earlier. We need to improve information details for transfer page to guide and
notify the users about transfer policy in OVO.

  • Several e-commerce have to do verifications that make users hassled

“Saya kan beli item game di Itemku, nah pas bayar itu kudu buka OVO lagi,
buka notif cuma buat approve”

Some users feel hassled to verifications payment from other ecommerce app.
they should open OVO app and go to notifications just for a sake of verifications approval. They need fast and easy way for verifications.

Ideate

User flow

User flow is used to describe the overall flow of users in using the product. The following is the user flow of the activities from register, login, top up, transfer and verification.

Artificial Intellegent

Information Architecture is a method used to arrange all flow, content, and design requirements in an application. The IA in this application, especially in the activities of Register OVO Premier, Top up Balance and Transfer.

Wireframe

Before making a mockup, I made a wireframe first to get an idea of the basic outline of the design that I would be working on. The following is a wireframe of the redesign of the OVO application:

Mock Up

Mock-up is a high-level representation of a product design. At this stage, we create a combination of styles, typography, colors, and others. After going through several stages of research and ideation, here is a mockup design for the redesign of the OVO application:

To find out what improvements I made, I outlined the bullet points for each problem and compared the old design with the new design. The following is an explanation of the redesign of the OVO application that has been carried out in answering the problems in this research:

Login Issue

When I was conduct the Interview some users had problem at login because the OTP code long to arrived. I have several idea to solve the problem. I decided to put google and facebook login method to cover up if users wait too long for OTP code. Two from five respondents had that issues.

Register OVO Premier

Most users are having problems signing up for OVO Premier. They can’t get past the ID card scan. Some users gave up on the application method and went to the nearest OVO booth some of them gave up on OVO premiere and just used regular OVO. From that problem I decided to look for ideas to solve the problem. I provide more guidelines to guide users for more chances of success.

Top Up

Most users have the same behavior to top up OVO balance. Most of my respondents use the mBanking method to top up their balances. For that I decided to make it easy for users who want to top up with the banking method. I created the virtual account number so that it can be copied so that the user doesn’t have to remember the virtual account number and some transfer rule notes. I also moved instant top up via BCA debit card to the top and hinted at the note in the nominal top up field to remind users about the transfer rules because most of the users don’t realize that they can register their debit for an easier top up method too some of them don’t realize the minimum amount they can top up and the transfer fee is deducted from their top up balance.

Transfer

From interviews with several respondents, I get the idea that users do not know how much they will charge for transfers. So I decided to put detailed information on the first page and a history icon in the recipient’s text field to select a list of accounts from previous transfers.

Design System

The next stage is to make a design system. The color selection in the application is based on the OVO application (purple and white). While the use of illustrations, taken from delesign.com. This illustration is licensed free for personal and commercial use. Making this design system will help us and the team for the future revamp or evaluation.

Prototype

After the ideate part, I created a prototype for the Usability Testing needs. This prototype contains 25 pages which include the following flows such as balance replenishment, OVO balance transfer, and OVO Premier registration.

Link Prototype in Figma

Test

Usability Testing

In this section we want to evaluate the new design whether the idea works for real users or not. Usability will be done through ZOOM meetings and participants will share screens while interacting with the prototype. So we can observe the test and know the pain points.

Task Given

I asked users to test the OVO prototype. I will give scenarios for users to solve on their own like “imagine you want to top up your OVO balance, What will you do to top up your balance?” We have several goal points to observe which are as follows

  1. User Preferences for login.
  2. How do they top up their balance.
  3. Transfer user journey.
  4. OVO Premier registration process.

Summary Insight

Based on Usability Testing, All users successfully completed all the tasks I tested. They can complete all tasks but in some tasks seem confused about something. Some users can’t recognize the previous upgrade button and some of them can’t recognize the method tab either. So I made some improvements based on the UT results. The good news is, some users told me that they found it helpful for my idea that I gave them to copy virtual account numbers to make their task in the mobile banking app easier. Feel informed with the modified instant debit card addition transfer above.

Lesson Learned

During this research process, I learned from users that when many factors to force users using the app. For the instance is OVO, most of the participants i interviewed the reason they use OVO is for pay their needs for shopping at Tokopedia or book driver at Grab. Like it or not they should knew how to operated the OVO if they want to shopping in Tokopedia or booking driver in Grab.

While working on it, I learned that doing a UI/UX case study is not easy. The process of working on this final project will be a lesson for me in the future. Of course, there is still a lot to improve on this design, please feel free to leave feedback or suggestions. You can also visit the linked in and Behance links below :)

LinkedIn & Behance

--

--