Case Study: Designing an Integration with logistic and marketplace

Anisa Budi Setiawati
Bootcamp
Published in
6 min readNov 28, 2021

Hello everyone! My name is Anisa Budi Setiawati. I am going to share my design process of designing Integration with Logistic and Markeplace of Krealogi. This project is part of the UI/UX Training Program which held by the Ministry of Communication and Information with Skilvul and Krealogi as Challenge Partners. We do not work under a professional contract by Krealogi.

Timeline : Approx. 2 Month

Tools : Figma

Background

Krealogi offers a comprehensive solution : a community as a forum for networking with other business actors, training to develop and develop UMKM (Usaha Mikro, Kecil dan Menengah) skills, as well as a user-friendly application to help record operational activities and make strategic plans. From the experience of running UMKM (Usaha Mikro, Kecil dan Menengah) Crafts since 2015, Du Anyam really understands the constraints of UMKM (Usaha Mikro, Kecil dan Menengah) in order management, production, inventory to delivery.

Currently there is no integration to Logistic (Expedition) and Marketplace that could make inconsistent information due to manually update in separate application.

Objective

  • Adding product delivery features such as for example through several shipments (expedition) such as JNE, JNT, Tiki, Pos, etc. So users can check shipping costs easily.
  • Adding a feature so that users can see the expedition closest to the user’s place.
  • Adding a feature so that the product catalog from Krealogi can be integrated with marketplaces such as Shopee, Bukalapak, Tokopedia, etc.

Roles & Responsibilities

In this project, I have collaboration with 2 friends, Fiqri Khaidar Yahya and SiskaKhusnulKhotimah. As our roles and responsibilities are the same, we are brainstorm ideas, design of the Marketplace Integration, we made design of Logistic Integration, prototyping and UX Researcher.

Design Process

In terms of designing a product there are several several stages that need to be done. During my design process, i choose to apply the design thinking methodology. Which consists of 5 steps ; Empathize, Define, Ideate, Prototype, and Test.

Design Thinking

1 — Empathize

In this steps, we learns use brief information from Krealogi for analysis and for grup discussion. Here are the results :

Condition

  • Difficult to access logistics for delivery
  • There are not many logistics alternatives that can be accessed and become choices
  • Difficult to calculate shipping costs
  • Currently available delivery confirmation on incoming orders

Target User

  • Age : 22–51 years
  • Gender : Female/Male
  • Profession : Entrepreneur
  • Language : Indonesian
  • Domicile : Indonesia
  • Have a smartphone

Apart from the information provided by Krealogi, my team and I conducted in-depth interviews as user research with respondents who matched the target user that had been created. In this user persona there are goals, frustrations, and also information that supports the design process.

User Persona

User Persona

2 — Define

After doing the research and observing all the user problems. My team and I defined the user problem from empathize result. We define the problem by finding the pain point and then we generalize the problem at the Pain Point in the form of How-Might We.

Pain Point and How-Might We

3 — Ideate

From the Pain Point and How Might We. we formulate the best solution to solve the problems that have been collected in the Define Stage.

Solution

How Might We : Creating applications that are integrated with logistic and markeplace to make it easier to estimate prices

Solution Idea

Affinity Diagram

After the solution stage, we regoruped the results of the solutions that had been mad into 4 groups on the Afinity Diagram.

Affinity Diagram

Prioritization Idea

After brainstormed and after the ideas are classified, then we created an Prioritization Idea to know which ideas should be prioritize. In this Priorization Idea there are 2 parameters which are User Value and Effort.

Prioritization Idea

Crazy 8's

After getting the Prioritization Idea, we create Crazy 8’s to unify the perception of design. After we create the Crazy 8’s we decide to votes for the next steps.

Crazy 8's

Userflow

In this case there are 4userflow, which are Price Comparison for Logistic (Expedition), Nearest Logistic (Expedition), Tracking System, and Integration Marketplace.

Userflow

4 — Prototyping

Wireframe

After we create the userflow and the next step is we are made wireframe based on the userflow that we created before. We are made High Fidelity Wireframe Design.

Wireframe

UI Style Guide

In this steps we are made UI Style Guide. Ui Style Guide makes designing more easier and more structure also consistent. Here is the UI Style Guide that we used for UI Design Integration Logistic and Marketplace Krealogi.

UI Style Guide

UI Design

In this UI Design, we are designed the User Interfaced based on the Wireframe and Userflow. We are adding the UI Style Guide for this UI Design.

UI Design

Prototype

After we finishing the UI Design, we make a prototype using a figma to add an interaction. So here the simulate for the UI Design :

Prototype

5 — Testing

After we finishing prototyping, we did testing to know that prototyping we made is work for user. In this step we did User Reaserch with the in-depth interview method. We did a usability testing to know the level of usability, convenience, and satisfaction using SEQ (Single Ease Question) scale and to know the feedback from the user for this project.

Usability Testing

We made Scenario in google document and google sheet for interview session with user, here the scenario :

  1. [TASK 1 — Price Comparison for Logistic (Expedition), Nearest Logistic (Expedition)]
  2. [TASK 2—Integration Marketplace]
  3. [TASK 3—Add Order and Tracking System]

Based on result of the interview we use SEQ (Single Ease Question) scale we got 5.5 out of 7. Which is good because we had 78% from the our goals result. Here is the result :

  1. Quite satisfied with the fatures provide such as transactions, barcode checking and some of the features that make easier for user
  2. The information presented is good and complete
  3. On the Logistic (Expedition) there is no information on the number from Logistic (Expedition) Company
  4. We need add option the marketplace

UI Iteration

After we finishing interview with user, we do some interation based on respondent suggestion here the resut for before and after the iteration :

Ui Iteration : Before (Left) and After (Right)

Conclusion

Based on the test with users, the design that we have made are effective and can answer the goals and need of users and also user friendly. Integration with Logistic and Marketplace is very useful for them because it can make more easier when they have an order to out of town. So, it would be efficient and have integrated application in one place.

Next Recommendation

After all the process and our user research. The respondent suggest some recommendation, it would be great if there more option for integration with marketplace. Then we need to add number of Logistic (Expedition) on our UI Design to get more information about the Logistic (Expedition).

Thank you for reading!

Let’s get connected :
LinkedIn | Instagram

--

--