Case study: Sri Lanka finance app redesign

Frimi is the leading finance app in Sri Lanka and design is by far it’s selling point. In a country where very little effort is put into the UX aspect of apps, I tried to redesign the Frimi app to see how far we can go with good design combined with immense demand for a service.

Overview

A while ago, I did a UX review of Frimi’s “payment flow”. After running into a lot of problems myself, and listening first-hand to some pretty negative comments about the app, I decided to take on the challenge of redesigning it into something that I’d love to use.

Process

Initially, I carried out a UX research of the app to identify the usability issues of the app by myself. After that, I carried out some user research using a survey to get an idea about the users of the app, their needs, and pain points.

Following this, I used design thinking to guide me through to the final product.

User research

I was not able to perform any in-person user interviews and had to rely on a survey to get feedback from users. I already had a few pain points and frustrations about the app I’ve heard from people first-hand and I’ve run into some problems on my own as well.

In addition to collecting valuable user feedback, the survey was also a way for me to validate those problems I already knew about. The goal of the research stage was to identify the userbase so that I can empathize with them. But most specifically, I wanted to know information about the usability of the app.

Problem definition

After considering the user feedback and the usability issues that were recognized in the heuristic analysis, I came up with the following problem definition for the project:

“There are some usability issues that are adding extra friction to the user’s flow within the app. We need a solution that removes this friction and one that prioritize the main use cases.”

Brainstorming & Ideating

In order to come up with some potential solutions for our problems, I made a few “how might we” questions.

• How might we prioritize the main features the user may use frequently?
• How might we better organize the different features of the app?
• How might we make the operations more intuitive to the user?
• How might we remove the cognitive load of the user?

Then I performed a competitive analysis to see how other products have achieved these things. I checked some apps from different industries as well.

Sketches

With this information, I started sketching out a few solutions and some alternatives. The alternatives made sure that I didn’t stick with the first idea that popped into my mind.

Wireframes and UIs

Following the sketches, I created some low fidelity wireframes to lay down the user flow and the skeleton of the app.

I used the Figma mirror app to get an idea about how the app would look like in context.

Firstly, I created the UIs for the homepage as well as one of the forms. I then used the elements in those to create the UIs for the rest of the screens without having to make wireframes first.

The following are some of the screens that I wireframed and tested with Figma mirror.

Home

At first glance, you can see that the old design has so many features packed into one screen. This increases the cognitive load for the user and increases the time they’ll take to take action.

In addition to the operations, the UI is cluttered with many other elements as well. For example, the notification buttons at top, the slider, and the bottom bar of actions.

I wanted to organize these elements better and prioritize the features the users are most likely to use.

I organized these different sections into separate pages by adding a tab bar. The tab bar contains 4 pages; Home, Operations, Notifications, Profile.

I decided to go ahead with the 4 most used actions for the homepage instead of giving them plenty of options. According to the survey, the 4 most used operations were topup, send money, receive money and pay bills.

The Frimi balance was also not very prominent in the old design. I made a new element for that which gives it a lot more attention.

Add new card

The “add new card” page was organized into one page and the form inputs were given a more modern design.

Split bill

The “split bill” has a very foreign design to it. I wanted to make it more consistent by making the form design look more like other pages of the app.

The new design is also more intuitive and feels more natural.

Top up

The “top up” page has a few usability issues. For instance, the user was not able to input a custom amount for topup. When you click on the field, you’re taken to a different page with a list of options to select from.

This was a very frustrating experience since the user does not have a lot of freedom in deciding how much they are topping up (this could very well be a business decision by the bank).

The card selecting section in the old design involved the user swiping horizontally to select which card they wanted to use.

There was no feedback as to which card is selected (the user has to just keep that card in the view and move on). And since the card sizes are pretty big, if there was a large amount of cards added, the user needs to swipe for a long time.

In the new design, there will be three recent cards in a vertical list with the other cards being given access through a modal that appears on a click.

A very clear visual feedback is also shown to the user on which card is selected.

Role

I worked on the entire UI/UX process. For future projects, I’d like to get assistance from other designers for areas like branding and design systems.

Special thanks to Kushanthi for letting me use the branding she made for her Frimi redesign. Eventhough I didn’t use it here, I might use it in the future if I decide to come back to this :)

Things I learned

I’m always polishing my skills in the entire UI/UX process with every project. With this project I specially learned a lot about UI design best practices. I’m also improving on building case studies for projects.

Final thoughts

There is still room for improvement and I’d like to make the design more elaborate by designing for more user flows. I’d also like to work with a separate design system that is project-focused.

This project gave me an idea about how little the local industry focuses on the user experience aspect of apps. There is so much more we can achieve with better design and I’m looking forward to improving more products that I find along the way.

Finally, thanks for checking out this case study. You can follow me on Medium if you want to see my future case studies. I also write stuff about product design and front-end developing.

Find me on Twitter