Case Study: How to get Ease with online transaction & get benefit from it?


The Study Case of FinWall, a Banking, Transactions & Saving App


EN: This Study Case is written in English so if you don’t really understand the content of this study case. Don’t worry to use a translator/google translate. Thank You!

ID: Studi Kasus ini ditulis dalam bahasa Inggris jadi jika Anda tidak begitu memahami isi dari studi kasus ini. Jangan malu untuk menggunakan penerjemah/google translate. Terima kasih!


Online transaction is a Payment Method in which the transfer of fund or money happens online over electronic fund transfer. Online transaction process (OLTP) is secure and password protected. Three steps involved in the online transaction are Registration, Placing an order, and, Payment.

The usage of online transaction is something common in our daily life today, some of us use this system as a media between him & his customer in transaction process.

But some of the public is still in the difficult states in where they’re still less-knowledge about online transaction/maybe they stuck in the system difficulties.

Like they have to login again when they quit the application, the confusing UI design, less eye-catching UI design, when they forgot to download the receipt they have to search it again/maybe the receipt is gone. & some of the users may have the behavior of high spending in their daily life

Some of them is concern about the security that they afraid that they can be hacked and their currency is being stolen, & they are confused when there is too much icon in the app

Process & Timeline

This project method I used is called Design Thinking

Design Thinking Method

Stage 1: Empathize

During this stage, I try to empathize with the people we’re designing for, so we can understand their needs, thoughts, emotions, problems, & motivations. In this case, I make a research plan, conduct the research, & make user persona according to the interview results.

Research Goals:

Money saving & online transaction app in Indonesia

Research Objectives:

Saving people money & relief their anxious about system security in Finance app

Research Questions:

  1. Have you ever used any finance app/similar app?
  2. What kind of app do you used?
  3. What is the app weakness in your thought?
  4. What is your struggle while interacting with the app?
  5. If you are made an app by a designer, what do you want inside the app?
  6. What feature do you want in the future app?
  7. If I can ask an opinion, what do you think about the current available finance app?
  8. Are you having a habits of spending in something that you don’t need?

Conduct the Research

I interviewed 5 participants face-to-face. The location of the participants is around my neighborhood in the Jonggol area.

I created a user persona based on 5 participants who have been interviewed. User personas are needed to identify more deeply who the potential users will be.

User Persona

Competitive Analysis

Of course I involve some competitors so I can see what are they spotlight in their app & what opportunities I can take to make my product a spotlight & eye-catching.

Competitives Audit

BSI Mobile: BSI Mobile is a mobile banking facility provided by Bank Syariah Indonesia for its customers to have access to savings accounts and make online transactions.

m-BCA: m-BCA (Mobile Banking) is a banking product service of PT Bank Central Asia Tbk (“BCA”) which can be accessed directly by Customers via cellular/mobile phones.

Stage 2: Define

At this stage I made observations from the results of the interviews and made a user journey map to look for opportunities that could be implemented in the product later.

User Journey Map

From the user journey map, I can find out how the user behaves while learning online, the steps taken by the user on this journey map which can later be implemented into digital products. I can also find opportunities based on pain points or from stages other than pain points that are useful for product development.

User Journey Map

Affinity Diagram

From the result of in-depth interviews, we compiled all points and classified according to their similarity. Then we found some findings & insights. This helped us brainstorm, develop potential ideas, and gave a clear view of what was important to users and what was not, while keeping in mind the objectives.

Affinity Diagram

Defining the Problem

  1. User is concern about the security of the app, they want the safe & secured while they are discover & interacting the app
  2. They liked the idea of saving money system where they are safe from overspending & they can get bonus from what they achieve
  3. Some of the user is in difficult about finding the receipt where they need the proof that they have done the transaction
  4. User liked the idea of monthly income & spending monitoring where they can find out where they are spend most & put money in the deposit
  5. Low awareness in their spending habits
  6. Limited information in the app

Designing the Solution

  1. Provide upgraded security service
  2. Give bonuses in the saving system for their achievement
  3. Define the UI design so they can find easily what they’re looking for
  4. Notification for the over spending activity, notify them before they doing the transaction
  5. Give them a badge-like achievement so they can keep motivated while doing the saving
  6. Statistic system where they can monitoring their deposit & spending activity
  7. Easy access & travels to the app with the safe secured is guaranteed

Stage 3: Ideate

At this stage I will start from user flow, information architecture, sketch (wireframe), guidelines, then mock-up.

For the main poster that I want to use something simple so the idea that got in my mind is this


Then for the name, I came up with something simple yet odd

For the color, Why did I chose purple?

The color purple is often associated with royalty, nobility, luxury, power, and ambition. My ambition is to create a safe & economical app that help users to transfer money, payment, & also they can save their money


By using the solutions from brainstorming session, then I proceeded to create a sitemap, where I arranged and organized all the features and overall navigation of this app.



I decided to make a digital wireframe sketch, because this is the easiest to do and to speed up the work to the mock-up stage.


User Flow

User flow describes the steps that a user must go through in using a product to complete a task.

User Flow

Information Architecture

Information Architecture defines how content will be structured and presented to users as they interact with your design.

Information Architecture


Next, I created guidelines to maintain the consistency of components in the design. In addition, the guidelines will also facilitate the development of applications later.



I designed an application with minimal icons and unnecessary additions to make it easier for users to explore through my app

Sign Up/Login

I designed the Sign Up/Login page with some security measures and some data requirements to maximize the security service for user convenience

Registration Pages

Main Services On Navbar

FinWall has 4 main services, namely Homepage, Wallet, Saving, and Profile.

Flow menu navbar

Wallet Page

The Wallet Page allows you to access your balance in your current card, access the receipt list after doing payment/transfer, and statistics info where you can check you payment history

Wallet Page

Stage 4: Prototype

I made a prototype using Figma because it was easy and didn’t require any other tools. Please click the link below so you can try the prototype.

FinWall Prototype

Stage 5: Test

During the test or testing phase, users provide feedback about your design, before the product is created by engineers and released to the public. You can use this feedback to make as many changes and improvements to your design as you need.

Usability Testing (UT)

Usability Testing is a method used to evaluate the user experience of a product, whether on a website or application.

I did the testing using to 6 participants.

Heatmap test results


This app maybe still far from perfect but I’m happy enough that I accepted this challenge as a UI/UX Designer. Thank you for all of your contributions in my Study Case

That’s all for the explanation of my case study project, I got a lot of new knowledge in completing this project and I’m very open to receiving criticism and suggestions from all of my friends & dear readers.

Thank you for being willing to read…