Mobile Payment App
Role: UI & UX Design, redesign
Platform: iOS & Android
Work style: In the office, with the whole team
Number of users: 100,000+
About the App
This fintech app has features such as contactless credit card payment, vehicle parking, bill payment, money send, mobile top-up, etc.
Redesign the app and improve the ratings and customer satisfaction of the existing app, using the collected feedback from thousands of users from the app stores and the customer service. The old version of the app was receiving really weak ratings for being outdated and cumbersome to use.
The general mood of the user base was negative, because they were stuck using the bank's app as a customer, and the outdated UI and UX mixed with a lack of modern functionality was a cause of daily frustrations.
Understand the motivation and goals for the redesign.
Why is a redesign needed?
What are the goals of the client for the redesign?
What is the cause of the general dislike for the app from the users' side?
Who are using the app?
Research the competition.
Compare each one's features, services, user experience, user ratings, UI.
Research similar apps on the international market to find the best examples and understand their success.
Which mobile payment apps are the market leaders?
Which features are appreciated by the users the most?
What kind of UX are the users used to by using their favorite apps, like Instagram, Twitter,...
How can we match Apple Pay's ease of use and simplicity?
Analyze collected feedback data by the client.
In addition to the client's priority list, what else could have the biggest positive impact on user satisfaction, fitting the budget and timeline?
Create improved user flows and design style variations
To start the conversation with the client when we're meeting them, and by seeing their reactions and opinions, understanding their thinking and needs better.
I was able to greatly reduce the steps needed for each flows, help guide the user with clear and easy to understand steps, and introduce many convenient features, such as pre-filling previously used data, in some cases reducing the number of taps needed even from 16 to 2.
Create interactive prototypes
to help the client understand our ideas and to enable better communication.
Continue iterating with the client
until the user flows and the visual style get a green light.
Create a design system using Figma's smart features like color & text styles, components and auto layout
By regularly consulting with the developers in person, I ensure the design system and the UI/UX solutions are optimized for development and fit the budget and timeline. And if the client requests a visual change, the design system and designs can be easily updated, along with the code on the developers' side.
I introduced animated characters for the success/error screens, and micro interactions for radio buttons, checkboxes, toggles and other UI elements to help improve the app's image by making it more friendly, compared to the more serious and sterile tone of the old version.
Design all the screens needed for the redesigned app
and support the developers and QA when they have requests or need explanations. (And go get some beer together after work hours to further improve communication.)
Beta testing with invited users to refine the UX and algorithm further
By having a higher amount of users, we now have much more data to make use of.
Release the redesigned app to the App Store and Play Store simultaneously
and wait for the client's response following the feedback they receive from the users and press.
Continue improving the app
with the motivation boost the team received from the improved ratings and feedback.
The store ratings for the app have grown significantly since the redesign release, and the number of active users exceeded the expectations too.