Case Study: Integrated Budget Mobile Application
Disclaimer: I do not cooperate with the startup applications that will be mentioned. The idea of this application comes purely from my personal view.
This is the English version of Studi Kasus: Aplikasi Anggaran Terintegrasi
Prologue
In the years when several startups began to appear in the circulation of the country, I had a dream to create one. The reason is simple, a startup appears because it is believed to be able to facilitate human needs.
I’m giving one example, Gojek.
Who does not know this startup application? The application that initially made some regular motorcycle taxis inflamed. How come? In an instant, Gojek’s presence has an impact on the income they generate. Even the Ministry of Transportation of the Republic of Indonesia must make several regulations in order to create a fair and equitable scheme for all motorcycle taxi drivers, both Gojek and regular motorcycle taxi drivers.
To this day, Gojek has changed everything. Gojek is a startup with a total valuation of US$10 billion. Gojek received funding from several well-known investors who did not hesitate to pour a lot of money there.
Gojek as the pioneer of the first online motorcycle taxi in Indonesia has officially crushed regular motorcycle taxis. I’m sure that in your area, regular motorcycle taxis are rarely seen. How come? Because by pressing the Gojek application on the cellphone you have, you can already reach everything. Not only motorcycle taxis, but you can also order a car to take you anywhere, order food from restaurants you frequent, send packages, and even order cinema tickets through just one application. Gojek.
Really eases human needs
Then what about the dream you talked about earlier Ivan? Calm down, calm down. Let’s start the story…
Background
My dream started in 2018. Seeing the success of Gojek, I feel envious and amazed,
“How can think of making an application like that?”
I started looking — looking for the startup world. It turns out that its founder, Nadiem Makarim, created a gojek because of market inefficiency.
I caught one word from there… Restlessness.
Without an IT background or anything that supports me to be someone who is experienced in the startup world. I’m just thinking, what are the concerns of Indonesian citizens?
Until there were three points in my mind at that time...
1. It’s hard to find the latest discounted items
2. What if applications like Gojek and Facebook are combined into one?
3. Is there such a budget application or not?
My innocence at that time made me idly write a series of three main ideas on a piece of paper. Until finally making it into a Microsoft word file while sketching the application design (which I understand today is called the sketching technique)
Until today, I have made at least 15 sketching applications in the span of 2018–2019. The applications come from anxiety even from my personal thoughts. On my computer, I named the thought-provoking applications in the “Project Fifteen” folder.
But as time went on, I finally realized that I couldn’t bring out any of my 15 thoughts. Previously I had tried to realize one of them, even had time to pitch in front of someone who is experienced in the startup world. But then again, maybe the startup world is not my soul mate. As a result, that thought ran aground in the middle of the road leaving me and my friends.
And only meaningless sketches remain.
Perhaps the question arises, why did I just write this today, Ivan? I’ll answer briefly, I’m in the field of UI/UX Designer.
It turned out that four years earlier, I had taken a small step to become a UI/UX Designer because I made a simple sketch of the results of my thoughts and concerns.
Even during this pandemic, I have a lot of free time to learn the ins and outs of UI/UX Designer until something comes up,
What if I redesign the app and make it a case study?
And from those 15 thoughts, I will start with an application called…
Bayarberapa.com
Maybe if the response from this Medium reader is good, I won’t hesitate to write down the remaining 14 thoughts. Counting to release my long-held thoughts.
Let’s get started…
What is Bayarberapa.com?
Bayarberapa.com is a financial budgeting application that makes it easy for users to find out with the user budget, what the user will get in the surrounding location.
When described, like this:
Tono, an employee at an office, is confused when Alisa, his girlfriend, invites him to spend the weekend outside. Tono was confused because his paycheck had not yet entered his account, he had sent a message to one of the finance officers in his office. He said his salary would be sent on a working day or on Monday because the server was having problems.
The problem is that on Saturday or to be precise this weekend, Tono and Alisa will celebrate their third anniversary.
Tono himself hesitated if he had to borrow money from his office relatives, because the reason would look ridiculous,
“To treat your girlfriend? Seriously?”
In his wallet, only 300 thousand rupiah was left of Tono’s money. As a man, Tono feels prestige if he invites Alisa to Dinner and the money is even less.
He didn’t want to be like that, especially on their special day like today.
This is where Bayarberapa.com comes in. Only by entering the nominal budget that Tono has, Tono can find out what he will get.
What’s even more unique is that Bayarberapa.com can be directly integrated with the online delivery service platform if you want to order goods/food.
Main Highlights and Sketching Applications
Here is the main point and sketching from Bayarberapa.com that I made in 2018 and is still safe in my files.
Application Layout
Okay, since I seem to be familiar with the world of UI/UX. I will try to insert some visual designs from Bayarberapa.com in the form of a mobile application.
- Introduction Page
Once you enter the Bayarberapa.com application. Users will immediately see the Bayarberapa.com logo Splash Screen. Then three Onboarding Screens with a line indicator that displays how many Onboarding Screens there are. There is also a skip button if the user wants to immediately jump to the last Onboarding Screen.
2. Registration page
After the user clicks the CTA button on the Onboarding Screen, the user immediately goes to the registration page. On this page, there are three steps that the user must do. Starting from entering the full name, email and password, entering the mobile number that is integrated with the service, entering the current location, and then selecting the category that the user will choose.
For locations and categories, users can change them at any time. Even when the user has finished registering, the user can still change it.
3. Successful integration page
After the user has finished filling in the personal data on the registration page, on the next page the Bayarberapa.com system will check the mobile number that the user just entered. If the mobile number is registered with a service, the screen will show that the mobile number has been successfully integrated into the service.
4. Main Page
Later, the user goes to the Main Page. This is the page that I mentioned earlier the user can choose the location and category at any time. On this page there is also a menu bar that shows four menu sections, starting from the Main page, saved pages, expenses, and Settings.
In this section, there is also a search bar that allows users to directly type what the user wants in the nearest location.
5. Product Page
Finally, we head to the most-awaited page, the product page. After the user has finished selecting the desired category, the user will be directed to a page that shows a partial map of the location where the user is currently located.
There are two input fields that show the current address and money owned by the current user. Then there is a sliding cursor that makes it clear how much radius the user wants to find the product from its current location.
When the user has finished setting what he wants and has pressed the CTA button, the user will see various products from the previously selected category. Users just need to scroll the screen to find the desired product.
In the case shown, the user selects a food category and the user selects a satay stall. On the next screen, you will see a more complete explanation of the satay stall. Starting from pictures related to satay stalls, ratings of satay stalls, reviews from other users who have tasted the dishes at the satay stalls to the existence of buttons that users can choose.
Here’s the button explanation:
Navigation buttons: Where the user will be directed directly to the satay stall with the help of the map application
Service button: Where the user will be directed directly to the selected service application and order it via the delivery service courier
Bookmark button: Where the user saves the selected menu so that it can be saved on the bookmarks page in the menu bar
I inserted an alternative design that functions more or less the same. It’s only different in the appearance of the interface (Focus more on the corner radius, the use of icons that give a wider impression, the use of dropdowns and emphasize the functions on the product page number-3)
Closing
Finally, thank you readers for taking the time to read this article.
I really hope to get feedback or clap from readers so that I am always excited to publish other articles.
I also accept suggestions and criticisms from readers that readers can put in the comments column so that I can improve the quality of my writing in the future.
Follow my dedicated UI/UX page on Dribbble and Instagram
See You Later!
