UI/UX Case Study: Flip App

11 min readAug 17, 2022

A Collaboration Project with Product Management Team

Overview

I have participated in the UI/UX Research and Design Bootcamp at Binar Academy since the beginning of June 2022. My experience dealing with content writing and digital marketing has made it easier for me to learn user interface and UX writing. Now the Bootcamp period has come to an end, allow me to showcase my first UI/UX collaboration project using design thinking framework.

We were given a task to create a case study that departs from the group assignment of Binar Academy. In this assignment, my role is a UI/UX designer collaborating with 2 Product Managers (PMs) and 2 other UI/UX designers. In this project, the PMs came up with the initiative to bring the Flip application as a subject to be developed. They set the focus to increase revenue streams, which in other words to increase the traffic of Flip users. We did 2 Design Sprints for this project, with a duration of less than a week per sprint. The first sprint is for the understanding, define, decide and prototype phase. Then we continued the testing phase in the next sprint. During the Design Sprint, I was also given the responsibility to be a facilitator who coordinated the sprint and prepared the discussion board at Miro.

Project Type: Personal Portfolio/Binar Academy Challenge.

The Team

UI/UX Research & Design: Raisa Meutia, Rofii Nurdika, Giri Ratna

Product Management: Ikhwan Rivani, Raynaldo Thendyliputra

Project Duration: +/- 2 weeks (2 sprints)

About Flip

Flip is a fintech-based payment platform in Indonesia. Quoted from their website, Flip has served more than 7 million users and hundreds of companies and SMEs. Flip wants to help more people reach their financial goals. They intend to continue to develop fairer financial services.

The main feature that attracts many of their users is the free interbank transfer. Through Flip, users can also top up their e-wallet without any additional fees, and also send money abroad at a much lower cost. Flip users can also pay electricity bills, buy electricity tokens, top-up credit, and buy internet packages at the lowest costs. In addition, Flip also provides business financial management solutions for companies.

The Process

After discussing the target and main focus with PM, we rushed to prepare research to validate the problems and requirements given by PM. We conducted a survey first with the aim of gaining general insight regarding the use of inter-bank intermediary transfer service applications. From the survey, we selected 5 respondents to proceed to the In-Depth Interview stage which focuses more on Flip users. The key informations that we want to get from the In-Depth Interview are user behavior in their daily life, needs, pain points, expectations towards the Flip application, and user behavior when using competitor apps. We also provide additional questions as validation of PM’s ideas regarding the addition of online loan and donation features. We have summarized the research results in the following affinity map:

To achieve the target/main focus at the beginning, we went through the Design Thinking Sprint Process with the following phases and timeline:

DISCLAIMER: In this case study, we are referring to the 2.7.1 version. We are fully aware that the iteration of Flip application itself is done consistently that we found some updates in the application’s interface along the way. We also notice that not all users get the same version/interface of the updated App. Hence, we record and follow every updates in this case study report to show that we really take this project seriously and not merely based on assumption.

0. Preparation (Pre-Sprint)

Based on the data we have and from the Flip website itself, we created a Business Model Canvas (BMC) to get an idea of the concept and form of Flip’s business as a whole.

In addition, we also created a User Persona to get an idea of how Flip’s user probably look like and gain deeper understanding.

With BMC and User Persona, we have a big picture to guide us to solutions that can be applied to Flip’s business.

1. Understanding

After preparing our understanding of Flip, we finally have a sufficient foundation to understand the user’s Point of View. By compiling this information, it will be easier for us to make decisions for development.

Next, we create a User Journey Map to further explore the user’s Point of View. This time we map out the steps they take in interacting with the Flip app, based on the data we get. The purpose of creating a User Journey Map is so that we can empathize with users more and experience all of their journeys while using the Flip application.

The PM team also provide Eishenhower matrix (a prioritization, and time-management framework) to help us prioritize a list of problems by categorizing those items according to their urgency and importance. However, as we have already noted before, we found out that few points was not relevant anymore due to application updates. So we ended up looking for solutions for the ones in important-not urgent quadrant.

All team members mapped out How-Might-We (HMW) questions in an effort to give us the perfect frame for innovative thinking in ideation process. We did a voting process in determining the main HMW questions. Here are the selected HMWs:

Top priority HMW: “How might we strengthen user needs for the Flip application, while encouraging others to use the Flip application?”

2. Define

The collection of ideas was done using the Crazy-8 method. As a facilitator in this process, I think it’s challenging to facilitate the ideation phase. I had to make sure that everyone understand how this works, and that I could explain the task in a proper manner. I asked all of the team member to prepare a piece of paper and fold it into 8 parts, then give 8 minutes to sketch ideas on the 8 parts of the paper. The purpose of using the Crazy-8 method was so that participants could come up with as many ideas as possible in a short period of time. Here are some of the ideas with the most votes:

Add Split Bill feature
Donate Flip Coin
Make payments and Scan QRIS with e-Wallet Flip

There were also several votes to redesign the Login option, revamp the Homepage, and remove the Transfer Confirmation Button on the transfer information display.

From this voting result we created the Storyboard, Wireflow, Wireframe, until our final output of the sprint which is the Prototype.

3. Decide

At this stage, we compiled a potential solution and had a long discussion regarding its application to the Flip product. From our discussion and quick research on the internet, we selected the most reasonable ideas to develop. Here are the decisions:

The idea of adding features or to redesign was an assumption that still needed to be tested through the iteration process. We decided to develop 2 new features: Split Bill and Donation, plus revamping the homepage.

We immediately discussed the Story Board on the following day. Story Board was created in order for us to understand the flow of interaction between users and products over time. Our shared understanding regarding the flow and concept was summarized to become the following Story Board:

From here on out, we could use our Storyboard as our basis to create our Flowchart and Sitemap. At this stage, the UI/UX team divided the tasks and I took part in designing the user flow, wireframe, mockup and prototype of the Split Bill process.

Flowcharts were created to guide the creation of wireframes later. Next, We created a Sitemap, which was designed to help us navigate the Flip app site. This sitemap contains navigation of existing features plus new features that we are currently developing.

Lo-fi mockup (Wireframe)

After getting a clear picture of the User Flow, we started on designing the wireframe. When I started designing wireframes, I was inspired by an application that had similar features and then modified the process.

For the Split Bill feature, I designed it to be as simple as possible, taking into account the characteristics of the Flip user. I added the OCR (Optical Character Recognition) system to the Bill recording process to make it more practical and save time. I was inspired by Flip’s ID verification process, where all the user need to do is take a photo of the ID card and then all the data on can be scanned automatically. From this process, I feel confident enough to say that, it is possible to apply this system to the Split Bill feature. The outcome of this Split Bill process is a billing text message by Flip containing the split bills link and a link to download Flip. This way, users can take advantage of these features to support their Frugal Living lifestyle while also promoting Flip to their relatives. It will help the users, and their friends will get the message: “you can transfer your bills without admin fee using Flip, even though your account is from a different bank.”

Lo-fi mockup (Wireframe) for Donation Process

If you are a Flip user, you will know that Flip requires us to enter a unique code in the transfer process which will be returned to us as flip coins. Through this new feature that we developed, Flip users will be given the option to donate their Flip coins after the transfer. In the Donation feature wireframe, there are 2 entry points: 1) from the “transfer success” page; 2) from the Homepage where the user can choose the crowdfunding agency and the amount they want to donate.

Hi-fi mockup

The next process was refining the Lo-fi mockup to become a Hi-fi mockup. Previously, we prepared a design system in advance so that the hi-fi mockup creation process could be more uniform and follow Flip’s original style.

The Hi-Fi mockup looks something like this. For more details, see the prototype.

4. Prototype

The Hi-fi mockup was immediately compiled into a prototype with 5 scenarios below:
1. The user takes a photo of the shopping receipt and then wants to edit it in the application

2. The user divides the total shopping bill

3. Users divide the total bill according to their purchases

4. User wants to donate flip coin after successful transfer

5. User wants to donate flip coin via Homepage

Please click on the following image to view the prototype.

Figma Prototype

This prototype will be used for usability testing as the validating phase.

5. Validate

In this phase, we did usability testing to get feedbacks regarding the prototype. We recruit the participants remotely, through Zoom Meeting tools by having our respondents share their screens so we as facilitator of the test are able to gain some insights from their experience with our prototype. There were 5 participants, with the criteria as below:

Indonesian citizen
Flip user

During the test, they were asked to complete 5 tasks (as per scenarios in prototype) presented on the screen using Maze app. After the test, we asked them a couple of questions regarding their experience while gathering feedback. This feedback will be compiled into our Feedback Grid later. We will also ask them to fill out a System Usability Scale (SUS) survey which is a quantitative method to measure the performance of the Prototype. The score for prototype test on Maze was 76 and the score for SUS was 91.25.

From this report we are aware that:

The participants were quite welcome with the concept offered.
The score on Maze may be different if the participants’ experiences really resembles the reality.
The difference between SUS scores and Maze gave us an insight to prepare better prototypes and scenarios in the future.

Then we decided not to follow up on the ideas on the feedback grid because that point was only raised by one participant and it’s not really practical. Instead, we followed up on the design changes from the inputs we got through Maze:

Edit bill page — highlight Edit bill column
Add friend page — increase the size
Enhance the Split Bill equally button
Donate from transfer page — Highlight Flip coin details

Here are the details and explanation about the screens that we decided to be reworked:

Now that we had achieved the outcome of first iteration process, the PM team designed this “Go To Market Strategy” to support the launch of these 2 new features that we developed together.

6. Retrospective

Yes, we made it to the end. There were some flaws in the process but that was how we learn. After doing the iteration process, we gathered again to discuss the retrospective phase. The purpose of this discussion is to talk about what happened during the sprint and what can be learned from all the ups and downs so far, so that the future development process could be better.