UI/UX Case Study: Designing Cash Flow Feature with Design Thinking Approach for Krealogi

Disclaimer: Before we jump into this cool UX Case Study, I want to emphasize that this project is part of Skilvul Virtual Internship Program with Krealogi as a challenge partner. My team is not contractually bound to Krealogi.

Background

Krealogi is a supply chain management application developed by PT Karya Du Anyam based on their experience running a craft business in Indonesia. Krealogi is an ecosystem in the form of an application that focuses on helping various fields of MSMEs to increase their business capacity more effectively and efficiently. In order to achieve their goals, Krealogi already provides several features such as Production Planning and Monitoring, Sales Recording, Expense Report, dan Inventory Management. However, there is no specific feature yet to manage business cash flow which is one of the most important key aspect to run the business. Starting from that problem, Krealogi realize that they need to improve their application by adding the cash flow feature to help SMEs in tracking the movement of money in their business. By that, SMEs can also do forecasting for their business continuity.

Through Skilvul Virtual Internship Program, me and my friends are given the opportunity to make a design solution for this new initiatives.

Objectives

• Providing a financial record feature in order to help users in tracking their income and expenses.
• Providing a feature that shows their business’s financial performance based on financial record and sales record.

Role in Team

During this project, I take a role as a UI/UX Designer with two of my friends which are Khansa and Billa. We have the same responsibilities which are:

1. Conducting a research for define and ideate phase
2. Creating user flow and wireframes
3. Creating user interface design and prototyping
4. Conducting user research.

Design Process

In this UX Case Study, I am using the Design Thinking approach to conduct the design process. Design Thinking is the approach or method that focuses on understanding users’ complex problems and finding out the appropriate solutions to solve them (Prud ‘homme Van Reine, 2017). The primary purpose of this method is to explore the needs and problems faced by users, which will later be used as the basis for finding solution ideas to overcome these needs and problems. Through this approach, we can solve a very complex or unknown user’s problem by seeing and arranging the needs and problems from users’ point of view, constructing lots of ideas in brainstorming sessions, and pouring found ideas into the initial design and finalizing the design by doing a test run.

The implementation of this approach carried out several stages, including empathize, define, ideate, prototype, and test. These five stages don’t have to be done sequentially; they can be done in parallel and repeatedly.

1 — Emphatize

At this stage, I’ll do some research to develop knowledge about users’ problems, needs, and feelings. I first explored some similar application that have cash flow feature. I put myself as the user which is SMEs entrepreneur to get ideas of their habit in managing cash flow. Besides that, I did a focus group discussion with 2 of my friends to gather more information about the needs and problems from another perspective.

After discussing some potential problems, we start to conduct survey and arrange the in-depth interview with the following target users’ criteria:

1. SMEs entrepreneur
2. Age range between 18–40 years old
3. Domicile throughout Indonesia
4. Able to give honest feedback

We held an in-depth interview with several SMEs entrepreneur that has met the above-mentioned users’ criteria. From the interview, there are several essential inferences that will be used as the basis to identify users’ pain points at the Define stage

2 — Define

After conducting some research and gathering all users’ problems, I defined user-facing problem as the following key points.

• Users feel overwhelmed by making financial records manually because of frequent human errors.
• Users have difficulty distinguishing types of transactions.
• Users are still having trouble doing the documentation process.
• Users find it difficult to maintain financial performance in business.
• Users cannot predict business vision through financial performance.
• Users feel that doing financial records takes a long time.
• Users find it difficult to monitor their business processes.
• Users are still reluctant to pay for the use of applications for cashflow

The next thing I do is make “how might we” as an opportunity to explore ideas that can be the solution for the problems. The following image is the result of “how might we” created through Focus Group Discussion.

“How Might We” result

During the focus group discussion, my friends and I did some voting to determine which “how might we” would be the main focus. The voting result shows that ‘minimize human-error in recording cash flow and performance’ as the thing we’re going to focus on.

3 — Ideate

At this stage, we brainstorm the solution ideas based on “how might we” that was previously selected. The solution ideas obtained are then arranged according to their priorities based on the user value and effort. We use the prioritization matrix to help the team define the top priority solution to do this activity

Solution prioritazion

Based on the top priority solution that can be seen from the matrix, we brainstormed and poured our ideas into wireframes with Crazy-8’s sketching method.

4 — Prototyping

After sketching the ideas, the next thing to do is make a prototype to make the ideas more real. To carry out this activity, we start to make user flow. There are three user flows we made, which are Membuat Catatan Keuangan, Melihat Performa Keuangan, and Mencetak dan Membagikan Pencatatan.

This task was made in order to solve the user problem which is the occurrence of human errors in financial recording.

To overcome the users’ pain point which is preparing and projecting future sales plans based on financial conditions, this sub-feature was added in order to help users to maintain their business performance continuity.

Through this sub-feature, we hope that users can easily print and share their financial records in order to simplify their communication flow between other internal parties in the business.

Besides the above-mentioned sub-feature, we also adding another sub-feature which is “Money Spend Notification”. This sub-feature can give users a reminder if their spending has crossed the limit. So, users can be more aware of their spending and can perform better financial planning.

Next, we made a low-fidelity wireframe based on the user flow.

Before jumping into the UI design process, we firstly create a design system which is a library collection of reusable components. This is one of the most important things to do before designing UI because it helps us to deliver consistent user interfaces in time. Below is the snippet of our design system.

The next following image showed the high-fidelity prototype that we made with some adjustments and improvements from wireframes that were created before.

Please kindly try out the following interactive prototype version to feel the actual experience of Krealogi especially for the Cash Flow feature😃

5 — Testing

At this final stage, we conduct Usability Testing to get feedback and suggestion from users using Single Ease Question (SEQ) method. We held a testing session with some of the SME entrepreneur as a participant. During the activity, we gave the participant an interactive prototype link and asked them to try the prototype according to the tasks we gave while sharing their screen. We give them the freedom to disclose their opinions and suggestions about what they feel and experience when doing the task. Most of them have completed the task correctly and without any hitch. From 1 to 7, the overall result of the SEQ value is 7. This means the usability level of this application is already acceptable to users. However, there are still some constructive feedback from them about the details in this feature. This means the application still needs continuous refinement and improvement according to user needs.

For more details, you can access the results of user research here.

After acknowledging users’ feedback from testing results, we start to discuss the solutions for the next iteration. After getting the solution, we continue to do some refinement in order to fulfill uncovered user needs from the first iteration. Below is the result of our second iteration.

Conclusion

In conclusion, in the first iteration, this feature already provides user-friendly and easy-to-access flows and interfaces. This is shown in the result of the SEQ value is 7. Since this is still on the first iteration, we’re determined to keep improving every design aspect to make sure users can really meet their needs through this application especially in cash flow feature. Hopefully, in the subsequent iterations, Krealogi can provide more convenience for users and can be developed into an actual product.

What I’ve Learned

From this case study, I learned many things which are very insightful for me. First, I gained deeper knowledge about business cash flow which was really interesting for me. Other than that, I’ve also learned that understanding and getting to know deeper about users’ problems needs more effort. I found that most users might not know about their real problems quickly from the in-depth interview I held. Therefore, we need to provide them with more sample solutions actively. Another thing I learned is that applying design principles is very important. Why? Because it helps us to keep the process on track and make sure that our design is consistent. Other than that, it’s beneficial to ensure the consistency and suitability of our design with what has been determined in the Ideation stage.

What’s Next?

Next, we should focus on fixing user input from the second iteration. The whole iteration must be repeated again in order to provide more solutions for users. We also have an intention to explore more about others Krealogi’s features. Furthermore, there will always be room for improvements in design. We always need to make sure the services we provide are user-friendly and easy to use by conducting user testing.

Thank you for reading! hopefully this case study can be useful for you. I’d like to hear from you if you have any feedback. Please say hi through my Linkedinand let’s have some talk! every feedback from you means a lot. See ya! 👋🏻