UX Case Study — Designing the Integration with Logistic and Marketplace of Krealogi App
This time i’m going to share my design process of designing Krealogi App. This project is part of the UI/UX training program implemented by Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi is the Challenge Partner. I am not working for nor contracted professionally by Krealogi. The design process is carried out according to the direction given by the mentor from day to day.
Duration : Approx. 1 Month
Tools : Figma
Introduction
Krealogi is a supply chain-related digital platform developed by Du Anyam with the goal of accelerating MSMEs’ growth. Krealogi is an ecosystem built on Du Anyam’s expertise running an Indonesian craft business.
Krealogi provides the community with a comprehensive solution that includes a platform for networking with other business players, training to increase MSME capacities and skills, and user-friendly tools for recording operational activities and making strategic goals. Du Anyam understands the restrictions of MSMEs in order management, manufacturing, inventory, and delivery based on his experience running MSMEs craft since 2015.
Vendors, Producers, and Sellers are the three types of Krealogi users. Users that desire to sell weaved products through the Du Anyam platform and other online platforms are known as vendors and merchants. Producer, on the other hand, is a production actor. However, Krealogi’s present issue is that their target users don’t have a user-friendly application design. Krealogi currently requires a user-friendly application design that can allow Krealogi users record their operational actions, build strategies, and maintain their operational flow.
Currently the Krealogi app doesn’t have several features such as:
- Simple CRM
- Cash Flow Feature
- Integration with Logistics and Marketplace
Work on Team
In this project, I actually work with 2 friends, Princesia Olivia and Yuhono Indra Pitarto. in this team we have the same responsibilities that is:
- Brainstorm Ideas
- UI Design
- Prototyping
- UX Researcher
Design Process
In the process of designing the integration features with logistics and marketplace, there are several stages that need to be done. In this case study, the steps taken follow the basic stages in the design thinking process.
I use the design thinking process because Design Thinking is very useful in solving very complex or unknown problems, by rearranging the problem from a human point of view, creating lots of ideas in brainstorming sessions, and adopting a hands-on approach to initial design creation and testing.
A. Empathize
The process carried out at this stage is to research the target user’s viewpoints and needs before defining the problem and conducting ideation. Prior to doing research, we will identify the target user, who will then be categorized into User Personas as follows:
Then we did research by analyzing the UI, UX, User flow, IA, and important features of a few competitors or similar platforms.
Following our competitor research, we had an AMMA session with a challenge partner, Krealogi, using the Zoom application to gain more about the problems and needs of its users.
B. Define
After collecting and analyzing all the information obtained from the empathize stage, the next step is to determine user problems which will then be resolved in the design of this product. The define stage we collect the user’s perceived pain points.
Based on these pain points we collected, we generated a How Might We (HMW) question to focused our direction in designing the integration features with logistics and marketplace. From all the question we gathered, the chosen question which we thought represents users’ problems most is:
“How Might We Develop features that are integrated with logistics and marketplaces to make it easier for sellers to manage orders so that they can be updated in real time”
we used the How Might We format because it suggests that a solution is possible and because they offer me the chance to answer them in a variety of ways. A properly framed How Might We don’t suggest a particular solution, but gives you the perfect frame for innovative thinking.
C. Ideate
After analyzing the problems and opportunities, we explored solutions that can answer the HMW question and then we classified them into the Affinity Diagram.
- Affinity Diagram
In the affinity diagram, the solution ideas that we have proposed will be grouped into 4 groups.
From the Affinity Diagram above, it can be seen that there are several solutions we offer, ranging from Logistics, report, marketplace to export shipping feature that we think can answer the HMW question.
- Prioritization Idea
After brainstormed and collected all the possible solutions, we created an Prioritization Idea to map each solution on the affinity diagram and determine the level of impact and effort to be implemented now, next, then, and finally as a future development stage based on the results of our discussion on the level of user value effort of the ideas.
We have discussed it together and focus on “Yes, Do It Now” side (left above side).
- Sketch
The next step is to make a sketch using the design sprint method, we made sketches using the Crazy’8. There are only 8 frames that portray the rough layout of the mobile app and this activity was carried out for 8 minutes using HVS paper as the media. We use this method to determine low-fidelity results quickly and can vote on what kind of design will be used to design the logistics and marketplace integration features of the Krealogi app.
After each of us designed Crazy 8’s, we voted again to determine which design we chose to be the main design in the design of integration features with logistics and marketplace.
- User Flow
User flow is a comprehensive process or steps that users do to reach their goals/their objective when using this product. After determining which ideas will be implemented in this project, we made user flow to map the task flow that will be run by users when using the features we created on Krealogi app.
User flows have been done, it’s a crucial part before creating Lo-fi dan Hi-fi design, because we have to make sure that every scenario works well. There are 4 flows in the user flow created.
- Wireframe
After completing the user flow creation and before entering into the creation of a high-fidelity UI, we create the wireframe first. Wireframe is a design of a user interface that is made using only gray scale colors. This wireframe will be the basis of making the User Interface.
In making the wireframe, we tend to avoid using dummy text for the content we already know what will be written there. It is also to make the wireframe more clearly and help us ease the next design process.
D. Prototype
After finalizing the ideate phase, we’re ready to start designing. This stage consists of making a UI Styleguide, interface design, and prototyping. We created a high-fidelity prototype by beautify the interface design, add some flows to make it interactive, and make the UI style guide to documented the design resources.
- UI Styleguide
Here is the UI Style Guide that I use on the high-fidelity interface of this app.
The style guide is based on the Krealogi app’s existing brand identity. The majority of the changes we made were to the typeface, button, and input field.
Due to a time constraint, it is not recommended that we develop our own illustration from scratch. While finding a suitable illustration that matches the Krealogi style guide is tough, I took the initiative to adapt existing illustrations from free illustration stocks.
The human illustration is essentially a rework of an existing source that I obtained from undraw.co. Then, to make it suit with the situation, I adjusted the color and added accompanying illustration decorations.
- Interface Design
After that, we implemented the style guide in making the user interface design.
- Interactive Prototype
After finishing the UI design process, I use Figma to make a prototype and add interactions. We were also concerned about how consumers react to integration features with logistics and marketplaces, so we opted to include micro-interaction with a dash of animation to engage the user experiences.
E. Testing
The next stage is to test the prototype that has been created after we have finished prototyping. The idea of the problem, the flow of performing a task, the information presented while performing a task, and the user’s feelings after finishing a task are all tested here. The In-Depth-Interview method is used in this testing step to get a response from the user while using the prototype that has been created by delivering a value. The testing stage is based on previously established user criteria.
We conducted in-depth interviews and usability testing with the respondent, namely Inggrita Putri Kusumawardani who is the owner of the Gritamora MSME.
After asking questions from the question list to the user. The user will then be able to try out the prototype and explore it based on the user flow that has been created to see if the flow is appropriate, pleasant, and simple to use by the user. There are four tasks scenario to complete:
- [Task 1 — Registration and Login] Requests that users register and log into the application (stops at the Home page) and then observes what they do.
- [Task 2 — Order Recording] Requests that users to record orders (stop at the Order entry page) and then observes what they do.
- [Task 3 — Order Tracking] Requests that users to track orders (stop at the Order Tracking page) and then observes what they do.
- [Task 4 — Marketplace Order Confirmation] Requests that users to confirm the marketplace order (stop at the Incoming order page) and then observes what they do.
- [Task 5 — Connect Marketplace and Manage Marketplace] Requests that users to connect marketplace account and manage marketplace account (stop on Marketplace page) and then observes what they do.
- [Task 6 — Add Finished Products] Requests that users to add finished products (stops at the Incoming order page) and then observes what they do.
When the user has completed all of the tasks, I’ll utilize the SEQ (Single Ease Question) to determine the ease with which the prototype was created. The Single Ease Question (SEQ) is a 7-point grading scale that determines how difficult a task is for users. If the score is greater than 5.5, the design is regarded easy to use, whereas if the score is less than 5.5, the design is considered tough by the user.
Based on the usability testing that we have done, it was found that the respondent rated the usability and interface design of design feature integration with logistics and marketplace is quite good with a score of 6 of 7. However, the user gives suggestions in the form of:
- on the expedition/logistics selection page to include the estimated arrival date, not only the estimated delivery day.
- in the product details section and the form for adding products, the user wants an item code because the products sold by the user are very varied.
Iteration Design
Based on the suggestions given by the user, we create iterations of the design on several pages.
- Delivery Option Page
The image above is a design page that we have created for the design iteration of the shipping options, here we add the estimated date of the Product to arrive. In addition, we also added a confirmation button and a special marker on the selected delivery section so that users don’t feel confused.
2. Add Finished Products Page
The image above is a design page that we have created for the design iteration of adding finished products, here we add a section for item codes so that users who have varied products can give each product a specific code.
Conclusion
Based on Krealogi’s challenges, the problem we’re focusing on is figuring out how to keep track of its sales in terms of logistics and marketplace. We offer solutions in the form of improving current functionality and coming up with new ideas to make this application more user-friendly.
It is hoped that the integration features we have designed with logistics and marketplaces, such as expedition selection, shipping tracking, checking shipping prices, managing order confirmations from the marketplace, connecting with various marketplaces, and managing stock both warehouses and marketplaces, will assist Krealogi in resolving problems that arise.
Based on the design that has been created, it can be determined that the design that has been created is basic, easy to use, and the appearance of the application is familiar, requiring no additional time to understand it. Furthermore, the SEQ value supplied by the respondents indicates that the application fits the criteria in terms of design, flow, and information delivered, but that it requires certain extra functionality to support user demands.
Next Recommendation
From the process that we have done, we recommend the following:
- Conducting research with a larger number of respondents in order to obtain more accurate results on whether the design is simple and intuitive to use, and whether the features are useful.
- More information about product stock information in the marketplace integration.
- Can create a separate page to check shipping costs without having to make a detailed record of the order.
- Add the option to pick up delivery orders at a specific location.
