UX Case Study — Krealogi

A Digital Talent Scholarship (DTS) Challenge

Erwin
10 min readOct 24, 2021
UX Case Study
Photo by Startaê Team on Unsplash

Digital Talent Scholarship (DTS) is a free learning program which is held by the government for all generations especially the young generation, so they can learn and have a better understanding of technology.

Digital Talent Scholarship (DTS) has cooperated with so many digital platforms and presented so many unique challenges that can be chosen by the participants. The program that I choose to learn is UI/UX Design and I’m working in a group of 3 people (including me).

I and my teammates are taught about the basics of UI/UX and have gotten a challenge to finish as a final project. From all of the challenges, we choose to redesign the Krealogi mobile application to become more user-friendly and add one or more features that will be useful in the future.

⚠️ Disclaimer: This project is part of the UI/UX Training Program held by the Ministry of Communication and Information, Skilvul and Krealogy as Challenge Partners. I am not employed or bound by a professional contract by Krealogi.

Overview

Krealogi offers a complete solution such as a community for Small and Medium-Sized Enterprises (SMEs), training for developing abilities and skills, and a friendly mobile application for users to write down the operational activities and strategic planning. The experience in Crafting since 2015 has helped Du Anyam to understand the problem of SMEs in order management, production, stock, and delivery.

Krealogi has three types of users, they are vendor, producer, and seller. Vendor and Seller are users who sell webbing products through the Du Anyam platform and other online platforms. A producer, on the other hand, will produce the product. Here is how the apps will work.

  1. Vendors or Sellers can access the features that assist vendors in keeping the records related to their business processes in the form of incoming order records, production planning, financial records, and inventory records.
  2. Vendors or sellers can monitor their business processes according to the data they record in the form of incoming orders, production plans, financial records, and the availability of goods in the warehouse.
  3. Sellers or vendors can get requests for quotation orders from Du Anyam and can respond to their availability.
  4. Vendors or Sellers can allocate order processing to villages/groups and craftsmen in each village.

However, the problem is Krealogi doesn't have a user-friendly mobile application. For now, Krealogi requires a mobile application design that is user-friendly and helps Krealogi users to record their operational activities, create strategies and maintain their operational flow.

Krealogi has several features that are already available and features that will be available later. We are challenged to design one of the features that will be available later. Here are the features.

  1. Production Planning and Monitoring
  2. Sales recording
  3. Expense report
  4. Inventory management
  5. Simple CRM (Not Available)
  6. Cash Flow Feature (Not Available)
  7. Integration with Logistic and Marketplace (Not Available)

In this challenge, we choose to design Integration with Logistic and Marketplace features.

Objective

As we mentioned at the beginning, the Krealogi platform’s problem is it doesn’t have a user-friendly mobile application. Krealogi also has several features that will be available later and we are challenged to design one of the features that will be available later. So here are my team’s objectives in this challenge.

  • Redesign the Krealogi mobile application to become more user-friendly.
  • Design Integration with Logistic and Marketplace features.

Role in Team

As a UI/UX Designer, I collaborate with 2 team members, Muhammad Arindra Khoiru Syawal and Jumiati. Here are my responsibilities in my team.

  1. Carry out the stages of the design process together with group members.
  2. Become a note taker who records a summary of the interview results on Usability Testing.

Design Process

In this case, we choose to use Design Thinking as our design process approach.

Design Thinking is an iterative process in which we seek to understand the user, challenge assumptions, and redefine problems in an attempt to identify alternative strategies and solutions that might not be instantly apparent with our initial level of understanding. At the same time, Design Thinking provides a solution-based approach to solving problems. It is a way of thinking and working as well as a collection of hands-on methods.

In our opinion, the design thinking approach is the right decision, because the displays that will be made later are based on the problems obtained from the user’s side. The following are the stages that we run with the application of design thinking.

1 — Empathize

To provide the best solution for the product, the first stage in the design thinking mindset is to instill a sense of empathy. Through a sense of empathy, you can understand the needs, goals, and desires of users.

At this stage, we did not conduct interviews or surveys due to the limited time. Instead, we try to understand the needs and wants of the users (vendor, producer, and seller). Krealogi itself has provided us with criteria for their users. Here are the criteria for Krealogi’s users.

User Profile

  • Gender: Not Specific
  • Age: All Ages
  • Profession: Small and Medium-Sized Enterprises (SMEs)
  • Geographic Range: Not Specific

2 — Define

The next step is to define or explain the problem. In this phase, we begin to define what are the pain points for the user from the observations we got from the previous empathy stage.

Image 2.1 — Define Pain Point with Figjam

We begin to define the pain points using FigJam. Each of us began to investigate the problems found on the Krealogi mobile application, and write them down using the sticky notes feature for 15 minutes. After we finished defining some pain points, we started to group them into Affinity Diagram.

Affinity diagrams are a great method to help you make sense of all your information when you have a lot of mixed data, such as facts, ethnographic research, ideas from brainstorms, user opinions, user needs, insights, and design issues. Affinity diagrams or clustering exercises are all about bundling and grouping information, and this method can be one of the most valuable methods to employ. For this reason, it is used in many phases of Design Thinking, as well as outside of the design context.

Image 2.2 — Affinity Diagram

Furthermore, we started to turn those affinity diagrams into “How-Might We” questions to solve the problem in the affinity diagram.

How Might We (HMW) statements are small but mighty questions that allow us to reframe our insights into opportunity areas and innovate on problems found during user research.

Image 2.3 — How Might We

3 — Ideate

This stage is generate ideas. All ideas will be generated based on the How-Might questions that we created in the previous stage.

Ideate Generate Ideas for Krealogi Problem
Image 3.1 — Solution Ideas

After grouping all solution ideas into an Affinity Diagram, the solution ideas are compiled into Prioritization Ideas to determine which ideas must be realized first using the user value benchmark (how much the feature will benefit the user) and the effort that will be spent.

After that, the solution ideas that have been generated will be prioritized in order to determine which ideas must be realized first using the user value benchmark (how much the feature will benefit the user) and the effort that will be spent.

Image 3.2 — Prioritization Ideas

In this prioritization Idea, we will focus on integrating Krealogi with the marketplace and logistics because it’s our objective in this challenge. The last step of the Ideate stage is to generate ideas for the layout with the Crazy 8 method.

Image 3.3 —Result of Crazy 8 Ideas

The results of the sketches are collected, then each of us gives an explanation about the sketches that we have made. After that, we vote for the best sketch using stickers. The chosen sketches will be used in creating a low-fidelity / wireframe view.

Before we continue to the next stage and create a wireframe, we create a user flow, so we will have a big picture of the feature that we are going to create.

A user flow is a diagram that shows at a glance, the path your user will take through your app or website to achieve a certain goal.

Image 4.1 — User Flow

4 — Prototyping

In this stage, we will create a prototype based on the user flow that we created in the previous stage. The first thing to do in creating a prototype is to create a wireframe.

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys.

Krealogi Wireframes
Image 4.1 — Wireframes

However, because the result of the wireframe view still seems to have a different layout style, we need to create and define a design system so we can adjust the layout style before creating a Hi-Fidelity / Mockup view.

Krealogi Design System
Image 4.2 — Design System

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

The design system is very helpful in creating a consistent hi-fidelity / mockup display. Using the design system in Image 4.3, we reconstructed our wireframe and produced a Hi-Fidelity / Mockup view.

Image 4.3 — Hi-Fidelity / Mockup view

From the mockup displays that have been produced, we are ready to make a prototype, which can be used for testing purposes in the next stage.

Embed 4.4 — Krealogi Prototype

5 — Testing

The last stage of the design thinking process is Testing. At this stage, we are looking for a respondent to try the prototype. We found a respondent who was willing to be interviewed by us. This interview process is called Usability Testing.

Usability testing is a method to evaluate the user experience of a product, whether on a website or application. Usability testing is carried out to find out whether the design made is easy enough for users who will use the product.

Before usability testing with respondents, we create the Stimulus User Research in a Google Doc. User Research stimulus will become our guide in conducting usability testing with respondents. Here are Stimulus User Research summaries.

  • Research Objective — The objective of our research
  • User Criteria — Criteria of respondents that we are going to interview
  • Question List — List of questions to be asked to respondents
  • Research Scenario — Steps/scenarios that will guide the moderator in the testing process
Usability Testing Process
Image 5.1 — Usability Testing process

In the Usability Testing process, I take the role of a note-taker, whose job is to record what happened during the testing process. The recording results are then summarized into a report commonly referred to as Record Data User Research. We use Single Ease Question (SEQ) as our usability testing measurement method and here are the test cases.

  • (Task 1) Register and log in
    In the first task, the user finds the feature is easy to use and the user suggests us to add more business categories other than the Crafting category.
  • (Task 2) Add a new product and sync the product to the marketplace
    In the second task, the user can use this feature without any trouble. The user understands every step and all of the instructions are clear.
  • (Task 3) Edit and delete a product
    In the third task, the user finds out it’s hard to edit the product because the user can’t find the edit button, but when they find out how to edit. The user can do the task (edit and delete) smoothly.
  • (Task 4) Accept a new order and confirm the delivery
    In the fourth task, the user said the feature is so useful that he can accept a new order and confirm the delivery from all marketplace in one App. and the user said it’s easy to use since he understands every step to do the task.
  • (Task 5) Connect Krealogi to a marketplace
    In the fifth task, the task is done very fast. The user said the menu is easy to use. The user can find “connect to marketplace screen” and do the task without any trouble.

The results of the usability testing are very satisfying, because the respondent that we interviewed gave a lot of positive feedback on our prototype, and the results from the resulting SEQ also showed that the design we made was easy to use.

Conclusion

In this challenge, we have done all of the stages of the design process successfully and we have produced a user-friendly design. This can be confirmed from the results of the usability testing. The respondent that we interviewed gave us a very positive response to the design.

Next Recommendation

Although we received positive responses from the respondent, there is input from the respondent in our design. The input is to add the edit button and delete button in the product card, so the customer will have a better understanding of how to edit the product. The respondent also suggests us to add more business categories other than the Crafting category.

--

--

Erwin

A Full-Stack Web Developer who helps entrepreneurs start their digital business