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.
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.
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.
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.
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:
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>
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.
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.
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.
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!
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!
If you’re looking to build a mobile app or website, or just want to talk about design, reach out to us to have a chat.