UX Case Study: Krealogi App
This project is a group project given from taking part in the UI/UX Training Program held by the Ministry of Communication and Information in collaboration with Skilvul (skilvul.com) and Krealogi as Challenge Partner. By any means, I am not employed or bound by a professional contract with Krealogi.
Introduction
Krealogi is a community as a forum for networking with Micro, Small, and Medium Enterprises (MSME), also they have the training to develop the capabilities and skills of MSME and provide an application that can be used by MSME to do records. Currently, the application is still in the development stage. One of the features that Krealogi wants is the CRM (Customer Relationship Management) feature. Therefore, those of us who took part in the challenge were asked to design a mobile application that has a CRM feature.
Goal
The goal is to make a user-friendly application that has a Customer Relationship Management (CRM)feature for Micro, Small, and Medium Enterprises.
Objective
The purpose of this project is that users can store customer data in the application, simplify communication with customers by integrating it into social media, save or create their own business cards, and can view customer analysis.
Team
We are a team (Satrio Tjiptoadhi, Muhammad Ilammm, and myself) working together in developing the Krealogi application by adding the Customer Relationship Management feature.
Tools
- Figjam to do define, ideate, and user flow.
- Figma to do Wireframes, UI design, and prototype.
Design Process
In this case, we use the design thinking framework as a tool in the process. Design thinking is a framework that has five steps and it can help us to solve problems in complex systems. We can do repairs and make additions easily in this framework.
Empathize
In-Depth Interview
In the empathize process, we conducted an in-depth interview with someone who has the following backgrounds.
User Persona
Define
First, we outline the pain points of user frustration. Then the pain points will be used to create a ‘how might we’ which will be used to create solution ideas in the idea process.
Ideate
HOW MIGHT WE make the CRM (Customer Relationship Management) feature in the Krealogi application user-friendly for users? Here are the features to consider.
- Customer Contact:
Users can add, change, and delete customer data and customer categories into the application.
2. Customer Selection:
Users can select customers when recording orders.
3. Customer Recent history:
Users can choose previous buyers quickly.
4. Customer Detail:
Contains data as well as contacts that can be integrated with social media applications.
5. Customer Search & Filter:
Users can search for customer names and filter customer category, Province, Regency/City, or District.
6. Business Card:
Users can choose a business card template or upload their own business card.
7. Customer Analysis:
Users can view statistical data regarding what are the needs of the goods that users are most interested in, where are the most customers located, and which customers have made the most purchases.
Prototyping
User Flow
UI KIT
We created our own designed system to make it easier for us to create a neat and consistent UI design. With the design system, every time there is a change in a particular component, we can change it instantly without changing the components one by one. It’s called UI Kit or Style Guide.
1. Color Palette
We follow the company’s primary color and secondary color style guide. We generate one of the secondary colors which is purple color using this. After generating, we take all the purple color palettes. For neutral color, we take randomly it from the color palette generator. And for the light color, we use white color.
2. Fonts
For the font, we used the Gotham Font that the company wanted. We use three kinds of fonts and differentiate the usage for each use for the title, heading, and normal text.
3. Avatars
We create avatars that are divided into three types, the first using the icon, the second using a female photo, and the third using a male photo. Photos of females and males can be changed according to several photo options. We also make two sizes, large and small.
4. Header and Bottom Navigation
In the bottom navigation, we make several choices to access the main features. Just in case, we made it more. We only use the bottom navigation for Contact (Contact) and Profile (Profile).
5. Buttons, Checkbox, and Radio Button
Buttons are divided into two categories, buttons with icons and those without. So at the time of UI design, we simply replace the icon. Buttons are also divided into three types, primary buttons for important buttons, secondary buttons for non-primary buttons, and disabled buttons to make the button unable to be pressed by the user. For the size, we made it into three sizes, large, small, and x-small.
Creating a radio button is very simple but it needs to be made into a UI Kit because it is widely used in forms or other.
6. Lists and Tabs
For lists, we create various types, such as whether a list needs an icon or multiple icons, the difference between a title and a description, and whether there is a need for numbering. As for tabs, we create simple tabs as well as tabs that have time periods.
7. Search Bar
We created two types of search bars. One has a filter and the other doesn’t. This is because not all pages have a search bar that needs to be filtered so we differentiate between them.
8. Text Field
Because the application we make needs a form, we create various types of fields that can make it easier when designing. Starting from state empty, active, filled, and also disabled.
Wireframe
UI Design
Prototyping
User Testing
We use a user from the empathize process to test the app. The purpose of this user testing is:
1. Analyze user needs in using the Krealogi application.
2. Conduct trials on the design of the CRM feature design solution (Customer Contact, Customer Selection, Business Card Making, and Customer Analysis) whether it is user friendly.
3. Knowing the advantages and disadvantages of designing a CRM feature design solution.
4. Knowing the end result of the level of usability, convenience, and satisfaction in the Krealogi application.
User Feedback
App Design Improvement
We made adjustments from user feedback and here are the results.
Conclusion
By saving customer data using the Krealogi application, it will help micro, small and medium enterprises (MSME) in finding customers easier, saving time to contact customers, being able to list business cards and send them electronically, and seeing some customer analysis available in the application.
Recommendation
The notification feature will greatly assist users in strengthening relationships with their customers, such as regular delivery schedules. Therefore, this feature is the next recommendation in the development of this application.
Thank you for giving your time to read the study case that I made. Hope it helps you. If there are things that need to be asked, criticism, or suggestions, please contact me.