UI/UX Case Study — Marketplace Integration, Delivery Logistic & Cashflow on Krealogi Apps
Disclaimer: This project is part of the UI/UX Design training program by Skilvul, for Kominfo Digital Talent Scholarship Batch 3 2022: UI/UX Design Mastery (Intensive Class) program organized by Ministry of Communication and Information of the Republic of Indonesia (Kominfo). Krealogi is a Challenge Partner. I am NOT professionally employed or contracted by Krealogi.
Hello guys, my name is Ghisani Ghina Bakhitah. On this article, I will share a new UI/UX case study that I created with my team. In this project, we develop some new features on Krealogi application. This features will make users easily to sell their product, cashflow detail and checking delivery status (tracking).
Overview
UMKM (Usaha Kecil Mikro dan Menengah /Small Micro and Medium Enterprises) in Indonesia are increasingly emerging. To make it easier for UMKM to develop their businesses, digital recording, production, cash flow, promotions and so on are needed. Krealogi is here to help UMKM in developing their businesses. Krealogi is an application for recording, planning and analyzing developments aimed at UMKM.
In its development, some users have difficulty using Krealogi application, especially to sell, promote their products online and calculate cash flow. Because of that, Krealogi gave a challenge for DTS PROA Batch 3 participants to create some new features for Krealogi application development. My team and I chose to develop integration features on Marketplace, Shipping and Cashflow.
Krealogi as a challenge partner, wants the development of filters so that users who are business actors can find it easier when using the application. There are several provisions relating to marketplace integration features, arranging delivery services, checking delivery status (tracking), integrating receipts into recipient cashflow.
Objectives
- Develop features related to marketplace integration, cashflow & delivery
- Create user-friendly interfaces
Roles and Responsibility
In this project, Me with my team Abdur Rasyid, Hariril Fikri and Muhammad Luthfi Fadhli Ilah have the same duties and responsibilities as follows:
- Do research, design thinking by collecting pain points, how might we, solutions to existing problems and affinity diagram
- Create User Flow
- Create Wireframe
- Create Design System (colors, typography, design styles and others)
- Create UI design and Prototyping
- Do Usability Testing
Design Process
We used the Design Thinking method as our Design Process. We chose to use this method because Design Thinking is one of the most recognized methods in the problem-solving process because it can be effective in a deeper and wider range of ideas. Its simplicity, on point, and flexibility. Each phase in the process doesn’t need to be in order to accomplish certain tasks. So, it increases our flexibility to do our job.
Stage 1 — Emphatize
The first step we had to do in creating Krealogi’s UI/UX using the Design Process methodology was to get empathy with the problems.
This step we are positioning ourself as a user to find Pain Point and How Might-We. We collected data regarding problem and needs user as user position. We do some research are: Secondary Riset, Resume AMA Session Krealogi from Du Anyam, Qualitative method, Analysis Competitor (include user feedback), Feedback from user in Playstore & Appstore, Analytics data from government/research agencies. Detail can see here
User Persona
Tools
Google Docs, Google Spreadsheet, Figma.
Stage 2— Define
Next step, we define problem and list down Pain Points and How Might We that we found. We use FigJam to make it easier. When list down Pain Points we need to positioning ourselves as users to get pain points from the problem.
On How Might We, we listed solutions from Pain Points. After that, voting for 3 (three) best solutions that can be implemented.
Stage 3 — Ideate
The ideas from How Might We were listed earlier. Later it will be in the application.
Create an Affinity Diagram by grouping ideas into specific categories. The Affinity Diagram is a Cartesian diagram, where the x-axis represents the effort required to create the solution, and the y-axis represents the effect on the user. Affinity Diagram will converted to Prioritization Idea.
In Prioritization Idea, we will know which one need to “Do it now”, “Do later”, “Do next” and “Do last”.
Stage 4 — Prototype
At the Prototype stage, we make Task Flow then after that make Wireframe
Task Flow
Task Flow help to defines the process that the user goes through when performing a process. There are Integration Features: Added Marketplace, Sync, Stop Connection; Redesign the appearance of the item catalog and the Publish Item Feature; Notifications and Accept Orders feature from Marketplace; Features Arrange Delivery Services, Check Delivery Status (Tracking), integration of receipts into cashflow receipts.
Wireframe
Wireframe is a framework for organizing an item on a website or application page. Wireframe helps to make it quickly and effectively from Task Flow to the low fidelity mock up.
UI Styleguide
The next step is UI styleguide components. This one is to make it standarize with all design style in one app. There are several types of the same components are combined into one variant. The components made are colour, typography, iconography, buttons, and text fields. We use Poppins font for font type text fields.
High Fidelity
This step is combination from wireframe & UI styleguideline. It is completed design and ready to do test. Full prototype with high fidelity can see here
Stage 5 — Test
After completed the High Fidelity prototype, we need to test to the user. Are this prototype that we made can solve user problem? In this test, we use depth interview with Krealogi user. Herewith the lists of questions:
- Silahkan perkenalkan diri saudara? Nama? Pekerjaan? Usia?
- Sudah berapa lama menggunakan krealogi?
- Pernah menggunakan aplikasi serupa selain krealogi?
- Apa fitur yang paling saudara suka di krealogi, yang tidak saudara temukan di aplikasi lain?
- Menurut saudara, fitur apa yang belum saudara temukan di krealogi tapi ada di aplikasi lain?
- Seberapa sering menerima pesanan dalam 1 bulan? Apakah itu termasuk banyak?
- Apa kendala dalam mempromosikan jualan?
- Apakah saudara menggunakan aplikasi marketplace penjualan online seperti tokopedia, shopee, dsb?
- Apa kesulitan saudara berjualan dengan semua aplikasi itu? mengapa?
- Pernah menggunakan aplikasi tertentu dalam mengelola semua akun jualan marketplace? Aplikasi apa itu?
- Fitur apa yang anda suka dan tidak suka dari aplikasi itu? mengapa
- Selama ini bagaimana dengan proses pengiriman dalam menerima pesanan? Apakah ada kendala?
- Menurut saudara fitur pengiriman apa yang seharusnya ada untuk mempermudah melakukan penjualan?
Result
After we done the depth interview with Krealogi user, herewith the result. Detail of result can see here
Conclusion
The result from Usability Testing, user feedback is positive, user friendly and hope this features can be implemented soon on Krealogi application. Because user don’t have any experience for sell his product in other marketplaces previously.
Closing
Thank you so much for:
- Randy Apriansyah our mentor
- My team : Abdur Rasyid, Hariril Fikri and Muhammad Luthfi Fadhli Ilah
- My twin sister : Ghassani Ghina Amirah
- Krealogi as partner challenge, Kominfo and Skilvul.
Our recording presentation also can see from this link.
