Opay Redesign

Caveat: The team is not affiliated with Opay in any capacity. Since we don’t have full access to all the user data that influenced their current design, this case study is not fully comprehensive. This case study was done to enhance our individual and collective learning experiences

WHAT IS OPAY?

Technology has increased the pace of society, and this is reflected in the banking system. Now, you can pay bills, buy airtime, send money to loved ones, and perform many other transactions with a mobile device, an internet connection, and a few clicks. Transactions should be straightforward, and the interfaces should be visually appealing and functional. The Opay app does not do this optimally.

Its founders created Opay to help unbanked people in Africa. The app comes with lots of juicy offers. Opay prides itself on being the first cashback wallet in Africa. This means users get a percentage of the money spent on any transaction. It gets even better. The app developers created other services that use Opay as an exclusive payment platform. This move made the app more valuable.

So aside from making money transfers and paying utility bills, customers can hail a ride using Oride, order meals using Ofood, invest using Owealth, get loans with Okash, and do more with Opay. While these offers might attract customers effectively, it is not enough to keep them because customers want an easy and seamless interaction with the app above all.

ROLES AND RESPONSIBILITIES

This redesign is the collaborative effort of a team of five people. I served as the Design Lead, spearheading the spearheading the collaborative effort of a five-member team. The team comprised four skilled UI/UX designers (Abims, Faruq, Toluwalase, and myself), complemented by a talented technical writer, Joy. While I took the lead on user research, Joy expertly documented our entire process.

REASON FOR THE REDESIGN

The team chose Opay because of its exponential growth rate and potential. If all of the tempting offers were combined with a seamless service, it would satisfy existing customers and attract new ones. With this in mind, we proceeded to improve on the already existing design and make the user experience seamless. The app had interesting features and offers, but they were all jumbled up. We noticed replication and repetition that made the app unnecessarily bulky; the user interface also needed to be updated.

GOALS FOR THE REDESIGN

• To make transactions easy and seamless

• To make the app navigation simple

• To make special offers visible and straightforward.

• To build teamwork and the spirit of collaboration

• To refine the team’s skills through experience

APP ANALYSIS

The first step we took was trying to understand the app. The app was analyzed by studying its functionalities, architecture, and navigation. An app analysis helped us identify some usability issues and pain points. We took note of the pain points and compared them to our user research.

USER DEMOGRAPHIC

From our research, we discovered that Opay has 3 million users, with 63% male users and 27% female users for personal transactions. Some users question the app’s credibility due to its many inconsistencies. The interface is cluttered, and users struggle to find basic things.

USER INTERVIEW

The team used different channels to conduct user research. We sent out questionnaires and conducted a one-on-one interview. To identify users’ opinions of the app, we sent out questionnaires. We needed to identify the most used features and the ease of their transactions, and get feedback on ways to improve. We got 19 responses. Of all the users that performed a successful transaction, 68.4% used the app for transfers, and 31.6% used it to purchase airtime. 10.5% used it to pay utility bills, 10.5% used it to save money, and 42.1% used it for other transactions. Even though 68% of the interviewees found the app satisfactory, 88.9% thought the app needed to be improved.

Personal interviews that were carried out showed that some users were dissatisfied with certain features. They gave feedback on what needed to be improved. Through the one-on-one interview, many pain points were identified.

• Users do not fully understand how some of the app’s features work

• The transfer process is not straightforward

• Difficult navigation through the app

  
  

REVIEW

To make our research more thorough, we decided to find out what users were saying about the app on the Google Play Store and social media. Users complained of inconsistencies throughout the app. The color, fonts, and icons were inconsistent, leaving the app looking incohesive and disorganized. The error messages were not clear and could not be understood by users. Users also complained about the dysfunctional customer care feature.

USABILITY TESTING

Ten users were selected to use different features of the app and present the team with feedback. While some of the users felt that the app was easy to use, a majority of the testers thought that the user interface was poor and had a lot of functionality issues. The testers used the cashback, wealth (savings), and saving statistics features. Most of them did not understand how any of the features worked. They felt it was not straightforward.

DEFINING THE PROBLEM

Through user research, key pain points were identified and analyzed. Users complained about the following areas:

Pain Point 1- taxing transaction

Users go to banking apps to perform transactions swiftly. With the Opay app, some users cannot do so as seamlessly as they would like. The way the app is arranged does not allow for some important features to be accessed effortlessly. The research showed that the most used features are transfer, airtime, and..., and users want to access these on the go without skimming and scanning.

Pain Point 2- hidden transaction history

To find transaction history, customers had to dig deep into the app. Users expressed that they could not access their transaction history with ease. They cannot have a glance at how their money is being spent. They want to view their transactions and track their financial flow with ease.

Pain Point 3- Complex reward/ saving feature

Users do not fully understand some features of the app. A lot of users were drawn to the app because of attractive offers like the daily cashback. Ironically, this feature is one of the most complex ones on the app. Some users complained that they did not understand how it worked and could not get its optimal value.

“The design on the cashback page was quite complex. Initially, I could not figure out how it worked.

Pain Point 4- Unappealing UI

Users found the user interface unappealing. The color was too bright, the design was inconsistent, and the flow was far from seamless. Icons were outdated, and some did not represent their functions accurately. This made the entire app look messy and cluttered

“The colors are not user-friendly, especially for those with eye defects, and the app flow is not good enough.”

Competitive analysis

The team identified Opay’s direct competitors like First bank, Kuda app, and Zenith bank, and mapped out their strengths and weakness.

IDEATION AND PROTOTYPING

Affinity mapping

The team compiled insights from the research and grouped similar ones. The affinity mapping provided a better understanding of what the users needed and how to bring these solutions to life.

Paper wireframes

The team further analyzed the Opay app and its competitors. After making some observations, possible outcomes were sketched out, and the best was chosen. Before committing to high-fidelity wireframes, paper wireframes were used to create a prototype for the main screens.

High fidelity wireframes

The team used high-fidelity wireframes to create the visual and interactive attributes of the designs. The wireframes helped the team decide what was best for the project.

The homepage

The home page is central to the app and should be inviting. To optimally achieve this, some improvements were required. First, the user’s account number was added to the dashboard for easy access. From the user research, it was discovered that transfer, withdrawal, and airtime features were the most commonly used, so they were made more accessible.

The transaction history was made visible as users wanted to see their cash flow at a glance. Since a lot of users complained about the unappealing color, the gradient was also reduced.

The “transfer” screens

The transfer is one of the most used app features, and using it should be straightforward, so we simplified the transfer options. The “source account” feature was added for ease of transaction. The features were aligned properly to make the screen look more appealing.

The “more” screen

We placed settings in a visible and more accessible area and grouped similar features to make the page look simple and clean. A “sign out” feature was added to make it easily accessible.

The “reward” screen

The daily cashback feature was made simple, and the “hide balance” feature was added for privacy. We also redesigned the referral feature, simplified the “time-limited” feature, and simplified the user interface for easy understanding. increase font sizes for better visibility. simplified the user interface for easy understanding. increased font size for better visibility.

The “withdraw” screen

The team added options to withdraw through a bank account and a clean, simple, and more understandable user interface. On the “withdraw via merchant” screen, a source account was added to the “selection” feature. To maintain consistency, the primary color was also used for the CTA. The user interface was redesigned and made simpler; the “select amount” feature was replaced with a simple input field to give more control to the users.

The “Referral” screen

We added the “hide balance” feature for privacy. The “share link” button was made more visible, clean, simple, and understandable. The color contrast was improved for better visibility. A “referral history” feature was added.

The “Login” screen

The login screen introduces the users to the app, so creating one was pertinent. The current app does not have a login screen. We decided to create one that will improve the app’s security, give users the best feel of the app, and help them perform transactions easily. To achieve this, we used a flattering color gradient that made the design look appealing, and we added some “quick access features” so users could make the most popular transactions without scanning the apps themselves. A “fingerprint” feature was also added for easy login.

From the app analysis, it was discovered that the app did not have a dark mode. So we decided to create a dark mode feature for users with that preference.

To get user feedback on the new design, a survey was sent out with the prototype. Seven questions were asked of the eight survey respondents in order to gauge how well the redesign performed and functioned. Google Forms was used to run the test. Six of the eight participants had previously used the app, compared to two who had not. The survey's responses received positive feedback in general. Quick transactions (transfers, purchases of airtime, and withdrawals) were easier for participants to complete. 80% of the participants could navigate the app easily.

Although one participant felt the redesign was “similar” to the current one, another thought the app was “easier to understand and interact with."

The team had a fascinating experience working on this project. During the process, we ran into some obstacles, but with cooperation, we were able to overcome them. Because of communication problems, the project's timeline grew longer than we had anticipated. The process was iterative and enlightening. Designs had to be improved continuously until the desired outcome was achieved.