UI/UX Case Study — Krealogi: Simple CRM

reynald sapoetra
8 min readOct 24, 2021

--

Photo by Carlos Muza on Unsplash

Disclaimer : This Project is a part of the UI/UX Training Program held by Indonesia’s Communication and Information Ministry, with skilvul (skilvul.com) and Krealogi as Challenge Partner. I am not a part of Krealogi or in any professional contract with this company.

Challenge as a Lesson

A few months ago, I started learning UI/UX from the Local Government Funded Program. In this program, we got 2 tasks to complete, the theoretical one and a case study. In the case study, the client, Krealogi by Du Anyam, is a local start-up company engaged in building a supply chain mobile platform for handicraft small-medium enterprises(SMEs).

Photo by Krealogi oleh Du Anyam

Objective

  • Making the mobile platform more user-friendly.
  • Adding a simple CRM feature to make it easier for the user to analyze the market trend how the customer responds to the product.
  • Make it easier for the user to make some strategic decisions in operating their enterprise.

Roles in Team

I did this UI/UX case study as a team with Ragil Burhanudin Pamungkas, Zri Adlani, and Noor Saadah. As a team, each of us has our own roles and responsibilities. Here’s what I had done so far:

  1. Leading some of the discussion and brainstorming.
  2. Working together in creating the UI styleguide and prototype.
  3. Finding some references regarding the design, flow process, and some features.

Design Process

In this project, we are using Design thinking as our design process framework because of its versatility and how common this framework is used for problem-solving.

1. Empathize

Because of the nature of how this training is, in this case study we don’t really have persona as our data. The user profile provided by the client is also quite general.

Gender: Not specified

Age: Not Specified

Profession: Small Micro Enterprises(SMEs) owner

Geographical range: Not Specified

As the user profile is quite matching with our team member demography, to know more about the application, we decided to download and try it and position ourselves as a user of the product. Here is the result based on what we feel:

The application is quite useful and versatile, but its UI design can be improved. This mobile application can record new orders, production planning, cash flow management, and inventory management. Other than recording it can also track the progress of each order. But many features are still in development and quite lacking. For example, in cash flow management feature, this app can only record the production expense. From my team's perspective the most important thing that this app lack is Customer Relationship Management (CRM). From this CRM feature, we can do many things such as tracking the behavior of our customers, knowing which item is the most popular with our customers, knowing the one who is a big spender so we can improve our relationship with the customers, etc. Another feature that our team recommends to be added to this app is the improved cashflow management feature, integration with marketplaces and logistic services, and bar code/ QR code system to improve inventory management.

2. Define

As shown above, there are still too many pain points that actually overlap with each other. We can transform this into a more refined state. First, let’s group the pain points to make it easy for us to see the problem.

From this, we know that there are many problems in how the platform manages the sales and there is no way to know the product status.

To make it easier for us to select which problem should we solve first, we can start by making how might we (HMW) and vote which HMW is the most potential to be solved.

3. Ideate

After selecting the 3 most voted HMW, we can start brainstorming how to solve the problems. And here is the result of the brainstorming session:

After we finish this brainstorming session, there are two things that we can do to group these solutions. First, we can do it like in the define stage to make it easier to know which solution belongs to the same group.

The other one is to classify which solution we should implement first based on the impact and how hard it is to implement them.`

From the classification result above, the thing that we can do with small effort but have a very high impact on the user is the CRM dashboard. After this session, we can start the crazy 8 sessions by brainstorming how our CRM dashboard and its feature will look like. Here is how our crazy 8 sessions looked like.

My Crazy 8
crazy 8 session result

After the crazy 8 session, we made our user flow to make it easy for us to make the prototype, here is the user flow that we use:

User Flow Diagram

From the crazy 8 sessions, we also make our own wireframe and vote on which wireframe we will use in the prototyping stage. Here How this session turns out.

My Wireframe
wireframe voting session
Ragil’s Wireframe

4. Prototyping

In this prototyping stage, because of some improvement and learning journey along the way when we made the prototype, we don’t really use the wireframe that we vote before as the base of our design, it’s more like the combination of the 3 wireframes made by me, Zri Adlani, and Ragil Burhanudin Pamungkas with some improvement. But even though the wireframe is not the same, we still use the user flow diagram as our reference in making the prototype. And here it is:

  • Log in
  • Performance Menu — Empty Data State
  • Performance Menu — Filled Data State

5. Testing

we wanted to run small testing to see if our solution works well. So we shared this prototype made from Figma with one of our colleagues who own a small business and do some usability testing.

Our Tester is a SME owner engaged in F&B business and printing service, who live in Banjarmasin, Indonesia. The tester is a millennial and still use spreadsheets and book to operate the business(cash flow, stock management, etc).

And here is the results:

  • (Task 1) Log In

In the first task, our tester finds the feature is easy to use, the design is simple but elegant, and the color combination of the UI is very charming.

  • (Task 2) Navigating through Performance Menu

In the second task, The user finds this app very practical. The features are easy to use and can navigate seamlessly with little to no effort. the only pain point that can be found is when the menu button is selected, the color does not contrast enough for the user to differentiate from the unselected button. Other than that the user gives a recommendation to add a feature to contact the customer from the app.

  • (Task 3) Using Print/Share Feature

In the third task, the user doesn't have any problem at all in navigating through the app. For the user adding the name of the format other than a logo is a plus point. Another suggestion that the user gives us is to add jpeg/png format so the report can be saved into the gallery.

  • (Task 4) Using Help Menu

In the fourth task, the user got some problems with the color of this feature. the user feels that the color is too monotonous because it is the same color as the main menu. For the user, this problem makes it hard for her to differentiate the help menu from the main menu.

The final point the user gave for our team UI design is 6/7. The app design is good and practical but it is not perfect, it can be improved with some minor changes.

At the End…

From this case study, we learn many new things. especially in how to implement the design thinking process into our UI/ UX design. Even though it is clear that this implementation result is far from perfect, but one thing that I know every step we take, every road we pave, is a sign that we are growing.

What’s the next Move???

From the point given by the tester, we can say that the UI/UX design is a success. The design is not perfect, there are a few recommendations that can be highlighted.

  • UI button color contrast
  • Color differentiation between main menu and help menu.
  • More features such as cash flow, marketplace, and logistic integration, direct contact to the customer from the app feature.

From my experience in this app, we can also make something like a barcode or QR code scanner and maker to make inputting and outputting data easier, especially from an inventory management perspective.

Final thought

The goal of this app is to help small and medium businesses, especially handicraft businesses to improve how they manage their business. It is my hope that this app will keep the support and be supported by small and medium businesses, becoming a powerful app that can impact both economically and socially in the country.

Special thank you to my team Nazri Adlani, Ragil Burhanudin Pamungkas, Noor Saadah, and everyone who supported and helped me while working on this project.

--

--