This week Ayopop launched a new experience and a fresh look for their mobile app. Over the next few weeks, users will slowly see a visual overhaul across the entire app.

Flolab has been working with Ayopop for over a year now and this is the first major redesign we worked on for Ayopop.

We spent the last month formulating a fresh new experience and look for the Ayopop app. Here, we will highlight the redesign process and our reasons behind the most prominent design changes in the product.

What is Ayopop?

Ayopop is a mobile application thats helps Indonesians get access to financial products. It started out with Bill Payments as the core offering and is now expanding to offer unsecured Student Loans to those who study at universities and schools as well as those who take courses.

Primarily, Ayopop is used by millions of Indonesians to pay their monthly utility bills such as electricity, loan repayment, TV cable bills, internet, water and several others.

Why was the redesign required?

When Ayopop was first launched, phone credits and internet data packs were the only two categories available on the app. As the business grew, more categories were added over time. Like with any digital product, more added features meant the overall product and UX also became more complex. The challenge for us was to keep the experience simple and easy to use.

The existing users of the app see the ease of use and simplicity of Ayopop and make multiple repeat purchases. These users have already developed a habit to pay their monthly bills using Ayopop.

However, with the redesign effort, Ayopop wanted to increase the conversion ratio for new users. It became important to optimize the funnel of new users downloading the app to complete their first transaction on Ayopop. This made us rethink the entire experience for the app; especially the experience for a new user vs. an existing Ayopop user.

1. Adding a more meaningful Onboarding process

Previously, the onboarding process simply introduced users to some basic features of the app. However, we wanted to understand what made the new users download the app, in order to be able to provide the user with a personalized onboarding experience.

As a first step, we’re bringing the category they choose to the surface — prioritizing their choice amidst the pool of other categories. This way we make it easy for users to find their most used category upfront on the Home screen every time they open the app.

In terms of the UI as well, with the redesign effort we wanted to adhere to all the Android Material design guidelines, so we modified the bottom sheets and coachmarks to use the default material UI components, which the users are accustomed to on other Android apps.

2. New user vs. Existing user

In order to convert a new user and get him to make his first transaction in the easiest and fastest way possible, it was important for us to give these users a more tailored experience. A new user needs more time to start trusting a new app they just downloaded on their device. Once they’ve signed in, they need to see the value in using this app. What does it offer? Does it offer products I could use? How would I pay for those products? Are payments secure? Will I get what I paid for? Clearly, it’s important for any product to first build trust in the user’s mind.

After that, we wanted to refrain from showing new users advanced features on the app that would only be valuable to repeat users. For example, a new user won’t upgrade their wallet limit or refer the app to their friends only after using it once. Features like these can be hidden until they Top Up their wallet at least once, or make at least one product purchase. A user needs to be sold on the product themselves first before they can share it with others. We conceived a more customized experience for such users:

A. Home

First time user:

• Collapsed the long list of categories to just a top few with a button to ‘See All’. Without overwhelming the user with too many options, we wanted to focus on just a few low-cost categories that could get the user to make their first transaction without having to think of spending on a very big purchase.
• Bring more focus on ‘Product and Operator Discovery’. This section showcases all the different operators available on Ayopop and gives direct exposure to all brands within each category.
• Build trust by showing the user other live transactions happening on the app.

Existing user:

• Show all categories upfront; letting the user find their category easily every time they open the app while also exposing them to all of Ayopop’s offerings
• Get the user to share the app with others. A returning user is more likely to share the app compared to a new user, because he’s already comfortable using the app and sees the value in it.
• Hide the ‘Feed’ section since we’ve already got the user to trust in the app. The focus now needs to be on other transactional possibilities.

B. AyoSaldo

First time user:

• A new user would often reach out to Customer Support in order to better understand the AyoSaldo feature. We wanted to reduce that friction and try to give as much information as possible within the app itself. In order to introduce the user to the wallet and teach them how to top up, we added an explanatory video taking the user through the task step-by-step.
• In Indonesia, there are multiple ways users can make a transaction, it isn’t as simple as just using a credit or debit card. The user needs to know if their preferred payment method is available on the app in order to make the transaction. By showing these upfront, we reduce the drop offs on the payment screen.
• Once a user’s money is in the wallet, they need to feel that their money is secure and prevented from any fraud. Before the user even enters any money into the wallet, we let the user know that they can secure it by setting it up with a passcode.

Existing user:

• Continue to show users the different payment methods that can be used to top up the wallet (This is a frequently asked question from users as Ayopop continues to add many different payment options till today)
• Give the returning user the ability to upgrade their wallet in order to add more money into it per month. For a non-upgraded wallet, the limit is Rp 2.000.000 per month. For an upgraded wallet, the limit is Rp 5.000.000. This feature is very helpful for users who do a lot of transactions per month or who make bill payments that have a high value. Upgrading the wallet also gives a user the ability to withdraw the money from the wallet back into their bank account at any time.

C. Profile

First time user:

• The Profile is interesting only after a user has used the app enough and completed multiple transactions. Until then, we decided to keep this screen simple and only stick to the basic items. The focus was to de-clutter the experience for a first time user and to get him to focus only on doing his first transaction on Ayopop.
• Show the user ‘How to Use Ayopop’. A frequently asked question by many new users, hence we decided to have this feature placed out frequently enough to be discovered easily.
• In case the user still needs help with something, we decided to give access to a human as easily as possible by showing the “Live Chat” option.
  

Existing user:

• There are plans to add more interesting features on the profile in the future in order to make the experience on the app more personalized for the user. Which is why we intentionally used modular cards on this screen to display information, so that they can be added / removed / modified easily.
• Get the user to share the app with others by adding the Referral card here. Adding an action on multiple places in the app will get the user to notice it and the likelihood of the user taking an action on it would increase.
• Show the user a summary of their last 3 transactions.
• Get the user to upgrade their AyoSaldo. While this card makes the most sense to be shown on the AyoSaldo tab, we thought it’s also contextually placed in the Profile to increase visibility for an important feature like this one.

3. How to use Ayopop?

In Indonesia, a lot of Ayopop users are also first-time smartphone users. They may not be familiar with many apps and the basics of how they’re used. A question we normally encounter is the standard — “How do I use Ayopop?” The steps may seem simple to many of us: the main categories are already highlighted on the home screen, users just need to choose one and go with the flow — it’s that easy!

Turns out, many need clear instructions on EXACTLY how to use the app: What should I do first? Do I need to have wallet balance in order to make a purchase? What payment method can I use to add money to my wallet? Will my transaction be processed instantly? and many more basic questions like these.

As designers, we need to empathize with such users, understand their grievances and where they’re coming from; even if it means we need to hand-hold and teach them how to use the app. At first, we tried to include bits of information and place it contextually within the app. However, the questions continued.

We saw a few of Ayopop’s existing users create tutorial videos on YouTube on “How to Use Ayopop?” Since users wanted to experience the app upfront, without really playing around with it too much, we created a couple of step-by-step videos that would explain how to use a few core features of Ayopop. All of these videos can now be found under “Cara Pakai” or “How to Use Ayopop” which is the go-to reference on how to use different features of the app.

<iframe width="666" height="382" src="https://www.youtube.com/embed/DmeT9YXg1BY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

4. Keeping the visual essence of the original product

We knew we wanted to restructure and redesign the home screen, but we were sure we wanted to maintain the same visual essence of the original product. The category icons have earned Ayopop a lot of praise and are at the core of Ayopop’s UI design; they definitely set the app apart from other competitors.

So we weren’t going to re-touch those because they’re the main element that will make the new design still feel connected to the old design. Apart from those, we were free to change everything else. And we did! :)

A big move — we got rid of the pink header, which really called out on the brand across the entire app. However, it also made the app feel very heavy with all the new elements that were being added on different screens. Initially, the pink header worked well back when there were lesser elements on the screen and the balance was easier to maintain visually. Slowly, as the product grew, more elements were added on the home screen as well as internal pages, and we wanted the focus to shift from the header to other elements on the screens. We decided to go for a lighter theme and use white for the header. Pink is still Ayopop app’s primary accent color.

5. Top navigation to bottom navigation

Screen sizes are getting bigger, which makes the top half of the screen more difficult to reach than the bottom part. To address that, we moved the app’s main navigation to the bottom. Here, the core navigation elements of the app exist — Home, Promos, Top Up, History and Profile.

While the bottom navigation is definitely easier to access, we can’t ignore the fact that the top half of the screen can grab the most attention from the user. Since the main navigation was moved down, we could use the top part to showcase some features where we needed to display important CTAs — users’ wallet balance, introducing them to Education Loans, Live Chat and How to Use Ayopop.

6. Primary CTA color changes: Going from Green to Blue

On the older version of Ayopop, all Calls to Action are in green. While green works perfectly well in contrast with pink and also signals as a color reliable enough for payments; we wanted to switch the CTAs on the app to blue, a color associated with being more trustworthy and secure.

Ayopop already has a very prominent brand color that’s pink, and since pink is playful, the complimentary color should be serious to balance it out. Especially with the introduction of new services like Loans, the new color scheme gave the entire look more gravitas and appeared more grounded.

7. The Final Touches

The re-design will make the app feel very fresh and new for all Ayopop users, however, we thought we’d add a slight festive touch to the app. We also wanted this to be relevant and updated — every time a user opens the app on different occasions, they’re greeted with a new delightful experience.

As a final touch to the redesign, going forward, we have made the Ayopop logo on the app header customizable. This logo marks all the interesting events — Kartini Day, Idul Fitri, FIFA World Cup, Asian Games, Independence Day, Valentine’s Day and more!

Rockstars behind the redesign!

With Adi Vora & Chiragh Kirpalani’s clear vision, Rafly Nurfallah’s beautiful designs, Gilang Fadilana’s lovely logos and the Android (Nitin Zagade, Vivek Bansal, Sanket Patel), iOS (Gaurang Patel, Rashmi Harne) and QA (Indra Negi, Madhumita Jadhav, Supriya Pharande, Charu Pawar, Amit Srivastava) team’s superbly detailed execution, we were able to pull through this massive redesign challenge in just a few weeks! The best part of the process is to talk to the product & engineering team and collaborate with them day-to-day to work on details like flows, edge cases, transitions, gestures, copy and so on.

Up next, we’ll be working on some more new and exciting features in the app that improve the experience for returning users.

Excited to continue shipping great experiences for Ayopop users!

Download the new Ayopop app for Android & iOS