UI/UX Case Study: Sribuu Redesign
A Personal Money Management Application
--
❗️Disclaimer❗️
This case study was first written on Google Slides in early July 2022, however, I relocated it to Medium days later. As a result, this version of Sribuu could be outdated.
Overview
Sribuu is a Personal Money Management App that helps people to control their expenses easily. The Sribuu app has 3 main features that can help you control your spending:
- Record manual and automatic transactions to understand your financial condition
- Budget to control your monthly expenses
- Recommendations and analysis from financial planners to help you manage your finances better
Why I Choose Sribuu
Usually, Z Generation people record expenses to track their cash inflows and outflows, especially those who are away from home. From conventional methods such as taking notes manually, and using excel formulas, to looking for financial management applications.
As a money management application, Sribuu has a great chance of success like several similar applications before it. Sribuu provides the simplicity that new users are looking for in a money management application. With some changes to the tools that Sribuu has provided, users can quickly understand the various features available.
The Objectives
In general, I hope to be able to refocus Sribuu core purpose back to budgeting, while maintaining support for the additional features, through this case study. The following are a few of the primary objectives:
- Improve User Information Security
- Easy Step in Using The App for New Users
- Fix The Hierarchy of Button and Information
- Give Important Financial Information
Design Thinking
The process carried out is design thinking. At the empathize stage, several things were carried out, surveys of several users and non-users, conducting application reviews, and taking a heuristic approach. At the define & prioritize stage, what is done is to analyze the problems felt by users and determine the issues that must be resolved. At the ideate stage, what steps should be taken to resolve the issues that have been determined? At the prototype stage, it must be understood that the redesign carried out must make it easy for users to use the application. At the test stage, whether the existing redesign has succeeded in simplifying steps and obtaining information for users is ascertained.
🔍— Empathize
Find out what is going wrong with the app
At this stage, several reviews were carried out, especially in the assessment on the google store, friend's responses, and using the application itself. Well, the next few pictures are complaints from friends and when reviewing the app itself. Such as inappropriate button placement and design, pins that are not required to be set at the beginning, repeated views, repeated steps in the account edit feature, and buttons that function the same and are located on one page.
From the reviews on the google store, most people complain about the existing UI. In conclusion, the existing UI is complex and new users may not immediately understand the usefulness of the features provided.
✒️ — Define & Prioritize
Prioritized some of the issues that I believe will have a significant impact on the user's overall experience
At this stage, the issues that must be addressed and have a significant impact on users are determined. I created a user persona based on common patterns of the users’ behaviors. This helped me to stay focused on the things that users genuinely need as I was redesigning the app. Also, it serves as a reminder of who I am designing for.
The user persona used is a student who has to manage finances due to limited pocket money. Here, Niki has goals that must be met, like balancing income and expenses, storing daily financial data, and increasing the ability to manage finances. What Niki thinks is that sometimes she forgets to write down her income and expenses, forgets to pay debts and bills, and doesn't like the complex interface in the application.
From the survey that has been carried out and the user persona map, several findings were found.
— Behavior
Users usually divide their income and expense such as for daily needs, investment, operations, etc. manually, on excel, or a money management app.
— Bad Habits
Users often forget to record their expenses daily, and sometimes, some users are lazy to record their expenses daily. There are already push-up notifications on Sribuu to make users open the app.
— Debt Reminder
Users tend to forget about the debt due date, there should be a feature that informs users to pay their debt.
— Easy User Interface
The User interface should be interesting, user-friendly, as simple as possible, and on point. The homepage contains only necessary information.
— Things Users Like on Money Management App
The report is divided based on the categories. Summary visualization is easy to understand.
— Things Users Don’t Like on Money Management App
Sometimes, it is kinda confusing how to use the app (the features) at first. Also raised some questions like ‘Where to click’, ‘what is the use of these tools’, etc.
💡 — Ideate
Find out the solutions
There are some pain points that have been found.
- Users often forget to record their expenses and income
- Users don’t like the complex interface of mobile money management app
- Users sometimes forget about debt and loans
The solutions from the pain points are:
- Must set access pin
- Change the tools on the footer
- Set up a new version homepage
- Have a daily check-in feature
- Make a debt reminder feature
🎨 —Prototype
What changed?
Some of the Sribuu displays have been changed to suit user needs and eliminate problems that have been found.
— The UI Kit
This is a UI Kit from the Sribuu redesign. The illustration is taken from the display in Sribuu. Plus Jakarta Sans is one of the fonts that Sribuu uses. In comparison, the blue and green color palettes are indeed the colors of the Sribuu logo. The rest of the color palette depends on your needs.
— Home Page
The homepage should display information that is important to users as well as ease of inputting data. Therefore, the appearance of the homepage is changed to suit the needs of the user.
Instead of displaying graphs that may be difficult to read, pie charts are displayed which are easier to understand. In addition, there is a billing feature display to remind the user of several things that must be paid. There is also information on the user's cash flow whether it is healthy or not. Even though it is displayed with a graph, there is a conclusion sentence that makes it easier for users to understand.
— Footer Redesign
Some of the main features in the footer are considered less important, while the important features of the app are hidden. Besides that, the button to add financial records is also placed here, not above the footer with a color similar to the interface.
The existing footer was changed due to user complaints obtained at the empathize stage. The main focus is the plus button to record finances. If placed above the footer as before, the button is integrated with the existing page so that it is less visible. In addition, ‘laporan’ is removed because the report display will be directly placed on the homepage, rather than in a separate feature. ‘Tujuan’ is also removed because there are budget features that have similar functions. In the new footer, there is a billing feature which is one of the important features in this redesign.
— Access Pin
The user should set the access pin the first time using the application. It will prevent user account information leaked.
— Daily Check-In
The daily check-in feature will make the user continuously open the application every day and complete the mission to earn points, which can then be exchanged for an e-wallet balance.
— Help Centre
In this interface, I only reduce the same functions button.
— Debt Reminder
This feature is made to remind users of their debts, either manually, such as debts to friends, or debts to e-payments and banks. A calendar is displayed so that users are more aware of the payment deadline.
🔖 — Test
Figma Flow
If you want to see the results by yourself, please go ahead and look through this interactive prototype!
P.S. Some parts are scrollable!
Visit here: https://bit.ly/SribuuRedesign
If you’ve made it to the end, thank you very much! I learned a lot while working on this case study! Of course, this case study is far from perfect, so any input is appreciated! Please leave any constructive criticism or suggestions that you may have in the comments section.
