UI/UX Case Study — Krealogi Mobile App
“We require a mobile application design that is user-friendly for our user and we need a solutions in the form of designs for our new features (that are not yet available)” — Krealogi
Intro
At the beginning of 2022 I decided to re-enter the Digital Talent Scholarship, which is organized by the Indonesian Ministry of Communication and Information. For your information, this is my 4th time participating in the program held by Digital Talent Scholarship.
On this occasion, I took training with the theme: Professional Academy UI/UX Design with Skilvul as the organizer. Long short story, after being declared to have passed the program selection. The participants were divided into several groups based on the challenge they chose, I chose Krealogi as UX Challenge’s Partner, cause I like their goals
📢 Disclaimer : This project is part of the UI/UX Training Program held by the Digital Talent Scholarship (DTS) organized by Ministry of Communication and Information with Skilvul and Krealogi as Challenge Partners. I am not working for, nor contracted professionally by Krealogi.
Brief Introduction
Krealogi is a digital platform developed by Du Anyam. Krealogi offers a comprehensive solution: the community as a forum for networking with other business actors, training to develop the capabilities and skills of MSMEs, as well as a user-friendly application to help record operational activities and make strategic plans. From the experience of running craft SMEs since 2015, Du Anyam really understands the constraints of SMEs in order management, production, inventory to delivery.
The features created also aim to answer the problems faced by business actors. Some of its main features are Incoming Order Recording, Production Planning, Inventory Management, Expenditure/Incoming Recording, and Reports.
Krealogi has three types of users, namely Vendors, Producers and Sellers. Vendors and sellers are users who want to sell woven products through the Du Anyam platform and other online platforms. While Producer is the actor of production.
The Challenge
Problem
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.
Project Task
Make the Krealogi app look user-friendly for their users (vendor, producer and seller). In addition, create solutions in the form of designs for their features that are not yet available, such as :
- Simple CRM
- Cash Flow Feature
- Integration with Logistics and Marketplace
Krealogi also said it would be better if we can describe the design process using an existing method or our own.
In working on the Krealogi challenge partner project, we as a team decided to choose the Simple CRM (Customer Relationship Management) feature. This CRM feature itself is one of the important features because this feature serves to manage the relationship between the user and the customer.
Objective
The main objectives of developing this feature are:
- Develop CRM-related features to enable business actors to reach customers easily.
- Develop the user interface to be user-friendly and easy to use.
Expected Output
- High fidelity design and clickable prototype
- Describe the design process and its methods
- Using free license resources for fonts, vector icons and other assets
- Figma file (.fig) to preview the created designs
The Team
To complete the challenge, we split into groups of 5 people but 1 person didn’t show up for no reason until now, so we only have 4 people in the team. My fellow team members are Shidik Chusnawi, prayoga adhi and Nur Lujeng Kinanti.
The four of us have the same role as UI/UX designers. As UI/UX designers, we perform the following tasks:
- Secondary Research, Brainstorm the ideas and Create user flows(Team)
- Crazy’s 8, Wireframes, design system (Individual)chusnaw
- Design and Create a high-fidelity prototype (Individual)
- Test and Evaluate the prototype (Team)
- Medium Article Portfolio (Individual)
- Presentation deck (Team)
The Tools
In working on this project I used several tools that supported me to complete this project, including:
- Figma
Used for brainstorming ideas with team members and also for designing the entire project. - Google Workspace (Drive, Slide, Docs, Spreadsheet)
Used for recording Secondary Research, Record User Research Data and Stimulus User Research and all file we need. - Zoom
Used for In-Depth Interview with respondents and Discussion to peers in other project to get more insight. - Discord and WhatsApp
Used to communicate with mentors and teammates.
Design Process
Design process is a process of developing a design solution, breaking down abstract solution into details to fulfill requirements or specifications.
Stage — 1 : Empathize & Define
The focus of the empathize stage is to understand the users. We needed to figure out what did the users need, want, dislike, and struggled with. For that, we conduct research with qualitative methods. The data sources we process are the results of the AMA (Ask Me Anything) Session With Challenge partners, observations of similar applications, and Challenge Partner Slide Deck.
“The user interface is not user-friendly, and it lacks some other features” -User
Based on the answer, we formulated potential user pain points. We also know from the research data that the users face problems such as:
- The appearance of the application is confusing (not user-friendly)
- Need a feature that can input many orders at once without having to record one by one
- Sharing information to client
- Chat feature
Stage — 2: Define
With the team, we used FigmaJam to collaborate to gather ideas to define the difficulties that users might experience with the features provided by Krealogi with sticky notes.
Pain Point
Pain Points are collected from understanding user experience information, then summed up into possible user difficulty points. Several team members, find the same pain points and related sticky notes will be grouped in the next step.
Affinity Diagram
After collecting all Pain Points, the Pain Points that are related to the same problem are grouped. Each topic group is given an appropriate name that describes the overall problem discovered.
How Might We
The Team then completed the objectives to represent how to solve the problem on each topic at this point.
And the final decision on the How-Might We section is that we will focus on establishing a problem-solving goal to enable users to see and manage customer data and also communicate with customers.
Stage — 3 : Ideate
Solution Idea Solution ideas for the target objectives will be developed at this stage. The solution concepts are categorized into priority diagrams depending on the consumers’ primary needs and the time and effort required to develop them.
Prioritization Idea
This priority chart is used to determine the preferred features during feature development. It is intended to directly help users meet their needs.
After going through the elimination and voting stages, we see that all of our priorities are in the CRM area which focuses on Customer Data and How users can do communication to customers.
Crazy’s 8
In this process we reating a general sketch of 8 minutes on a piece of paper folded into 8 parts, each crease has a sketch period of 1 minute.
Stage — 4 :Prototyping
In this phase, in collaboration with team members, we creates user flow, wire framing (low fidelity design), design system, and UI design (high fidelity design).
User Flow
The first process in this stage is Create a User Flow that was taken from the previous Ideate stage. In this user flow we do not include the login/registration process. We only focus on the CRM features that we want to make, so it doesn’t waste a lot of time, due to the limited time of members who had tight schedule with their work and also the deadlines given by the Skilvul and DTS.
Wire Frame
In this phase, we made a visualization of Crazy 8’s that we already made in Stage 3.
Design System
After creating a Wireframe, the next process is to create a Design System. This Design System aims to make the UI Design that will be made consistent because each member has a different part to design the UI.
UI Design
After making a wireframe we finally finishing our design in UI Mockup.
Prototype
In this process, the previous UI Design results are made into the Prototype so that the UI Design looks more interactive. The Prototype’s flow guide :
- View and share Business Cards : Home > Click User’s photo in the upper right corner
- Customer Management Menu : Home > Menu List > Customer Management
- Customer List, Contact List and Send Message Menu : Home > Customer Management > Customer List, Contact List & Send Message
- Viewing Customer Profiles Menu : Home > Customer Management > Customer List > Select Customer Name > Customer Profile
Stage — 5 : Testing
The final process of this stage is Testing. The goal is to find out whether the design we have designed is in accordance with user needs.
Research Objective
Before doing Usability Testing, We as team brainstroming to made the following Research Objective :
- Finding out user needs in managing customer data and promotions
- Finding out user habits in conveying information to potential buyers.
- Find out the level of usability, convenience, and satisfaction of the idea solutions offered in the process flow
- Finding out the success rate of SEQ
Respondent Criteria
After making the Research Objective, then I determine the Respondent Criteria as follows :
- Age: 18–55
- Profession : Productive Economic SME
- Domicile : Indonesia
- Native Language : Bahasa Indonesia
- Technology : Standard to Savvy
Research Scenario
In this test, We created 6 tasks that the respondent had to do to measure the usability and convenience of the feature for the respondent. The following is the task that must be done by the respondent
- [TASK 1] Asking the user to enter the profile page in the application (by clicking on the profile photo), view the business card, edit the business card, distribute the business card into the application and observe what respondents do.
- [TASK 2] Ask the user to enter the customer management page (by clicking on the customer management menu) and observe what the respondents are doing.
- [TASK 3] Asks the user to enter the customer list page. on the page there are options for add subscribers, all customers, priority customers, filter customers, and inactive customers. What observations were made by the respondents.
- [TASK 4] Asks the user to enter the customer detail page by clicking on the customer’s name. In the customer details page there is a menu of customer profiles and purchase history. What observations were made by the respondents.
- [TASK 5] Asks the user to enter the contact list. What observations were made by the respondents.
- [TASK 6] Asks the user to enter the message sending page, and observes what the respondent does.
Result
We use the UX metric Single Ease Question (SEQ) as a benchmark for user usability, convenience, and satisfaction with the features that We offer.
Testing was carried out on 1 respondent and the score we got was 6 This score indicates that the feature design that we have created is user friendly (this is considering the minimum score to pass this test is 5.5 which is good)
Here is the result from respondent :
What’s good
- Quite satisfied with the features provide such as the label of customer, the features make easier for user to know who is the prioritize one.
- The information presented is good and complete, didnt found any problem.
Need Improve
- Need more detail in Contact such as filter.
- Need directions to Business Cards Menu.
- Need more detail in ‘Profil Pelanggan’ such as Location Point.
- Need filter in Purchase History for easy searches
UI Iteration
After we finishing interview with user, we do some iteration based on respondent suggestion here the result for before and after the iteration.
Beranda
Respondents found it difficult to find business cards so they needed a guide to click Profile Photo to enter the Business Card view. The guide will only appear once the first time a user accesses the homepage.
Profil Pelanggan
Respondents found it difficult to search on purchase history so a filter feature was added to make searching easier.
Kontak
- The contact filter button and font size is too small and invisible, so its features are often not noticed by the user.
- No “back” button on filter
- Need filter per day or calendar date
Conclusion
According to the test, the UI/UX design for Simple CRM in the Krealogi application that we have created is user friendly. The respondent said that CRM information is very useful in details.
Customers will like the seller if the seller really cares and pays attention to them. However, we also know that it is difficult for sellers to remember all the details of their customers, that’s why we provided a solution in our design to label each customer, so that the seller knows who the right person is if the seller do re-targeting promotion or just a reminder message to customers.
By placing a room for chat, labels and contact features in our proposed design, I hope our desain can help business owners maintain and improve their relationship with their customers.
Recommendation
To develop this app more deeply, we should focus on improving user input and implementing user feedback based on user interviews that’s why we should test the design with the respondence as much as we can. Then, take a some pain poin in priority chart (Do Later and Do Last) to do more improve.
Also, I think it would be better if there is a feature where user can have a communication with Krealogi’s Help Center only from the app. So there is 2 Customer Relationship Management Features in the App, which is :
- User to Customer (we already provide the solution)
- User to Krealogi (do next)
Outro
Learning about UI/UX and also take a challenge to designing the app in such a short time was an interesting experience and hectic moment in my early 2022. I learned a few things like, I can’t be perfect all the time, communication between team members is important, the device must support our work, and the most important is we should maintain our stamina during the project.
One I believe there is no single perfect answer for a design challenge. The best approach for is test it out. Test your design with your respondence or maybe your acquaintance, then you can learn as much as you can from real users. After that, you can filter their feedback, so we as designer didn't overthink a solution or regret it.
I hope in the next batch of this program, the challenge partner will be more variative, the student can explore more things and also get a chance to do internship.
Thankyou note.
I would like to express my gratitude to Skilvul and Digital Talent Scholarship Professional Academy: UI/UX Design who selected me for being one of the person who get the awardee to join the precious course for free. Also to our mentor Lana Banatulhusna who is always ready to help us, the peers in the same class who always have a good laught, my teammates who always had positive vibes and my powerful Celeron 💻 in the world.
And for You who already spend your time to read until this section, I wanna say thankyou. I’ll appreciate if you do claps 👏 or write down what you think about this post in the comment section.
