UI/UX Case Study: Cash Flow Feature for Krealogi

Fahrimuamar
7 min readNov 28, 2021

--

Disclaimer: This project is part of the Skilvul Virtual Internship program with Krealogi as Challenge Partners. My team is not contractually bound to Krealogi.

Introduction

Krealogi by Du Anyam comes with very strong positioning, a digital platform that prepares its users for supply chain access. Krealogi is a digital supply chain ecosystem, especially for SMEs in the craft sector.

My Role

I led the user research, UI design and prototyping, and then user testing. I collaborated with 2 UI designers (Rahul and Ferra) throughout the entire project.

Problem

Krealogi has no specific feature yet to manage business cash flow, after researching and analyzing, they realize that they need to improve their application by adding the cash flow feature to help SMEs for tracking their financial condition. By that, of course, it will be easier for SMEs to make business decisions in the future.

Goal

  • Create a feature for users to track their income and expenses by making a financial record.
  • Create a feature that can help users to see their financial performance based on their financial records and sales records.

Design Process

Throughout the design process, we apply the design thinking method. 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.

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, we conduct research to develop knowledge about users’ problems, needs, and feelings. First, we explored some similar applications that have cash flow features. We put ourselves as the user which is an SMEs entrepreneur to get ideas about their habit in managing cash flow. We also conducted surveys and interviews with several SMEs entrepreneur business actors.

2 — Define

After collecting all the users’ problems, I defined the 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

We use a voting process to determine which ‘how might we’ choices we will focus on. The process resulted in the option ‘ help users by providing business records and controlling business expensive as the selected one.

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

After determining which solution is the top priority, we started brainstorming and turning our ideas into wireframes/sketches using crazy 8's.

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, Mencatat Pengeluiaran Operasional Perusahaan, 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.

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.

Based on the user flow, we made some low-fidelity wireframes. We didn’t create a wireframe for the entire user flow due to time constraints, so here is the wireframe for the ‘on-going class’ 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.

I recommend you to try the interactive prototype version below if you are using Desktop to get a real experience.

https://www.figma.com/proto/LI5k2Uv2qYvszC3VwrGDXN/KEL-6---SVI-19---KREALOGI?page-id=113%3A769&node-id=440%3A2717&starting-point-node-id=440%3A2717

5 — Testing

After We’ve done all the previous phases, we are looking for feedback on the designs we’ve made. We did user research by interviewing one of the SMEs entrepreneur a respondent who fit a predetermined market.

We conducted an interview via a video conference app to ask the respondent a few questions and share their screens while running the prototype. Not only did we ask respondents to run the prototype, but we also used the SEQ method for measures users’ perception of usability based on the last attempted task. From 1–7, this is the value of each task given by my respondents.

As you can see, the overall result of the SEQ value is 6.5, this means the usability level of this application is already acceptable and almost perfect 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.

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 6.5. 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’s for reading till here! I wish this case study will give you insight, cheers…

--

--