UX Case Study: Krealogi CRM App
The Project
Krealogi CRM is a new Customer Relationship Management feature of the Krealogi app that my teammates and I created as a part of UI/UX Design Training Program held by the Ministry of Information and Communication Technology with Skilvul, and Krealogi as Challenge Partner. We’re not employed or bound by a professional contract by Krealogi.
Role: UI/UX Designer, UX Researcher
Timeline: Sept 2021 — Oct 2021
Methods: Affinity Mapping, Wireframe, Prototyping, Test
Tools: Figma
Team: Raiza Thalia, Rachman Yulianto, and Rifqi Fahrudin
The Process
The design process method that we used is the Design Thinking. This method is easy to execute and allows designers to look at problems using creativity. It has 5 stages of design process from empathy to test. But for this case, we skipped the empathy stage.
Define
The first stage of the design thinking is to define all the problems of the users.
Problem Statement
The existing app doesn’t have a user-friendly interface for its target users, small business owners with a low level of digital literacy. Krealogi App still found some issues from its users regarding their business activities. Therefore, Krealogi wants to create additional features that help its users to grow their business. One of the features is a simple Customer Relationship Management (CRM) that helps the users to store and organize customer and prospect data, and also to track customer interactions.
Pain Points
At this stage, we brainstormed all the problems that the target users might experience in running their small business. To identify the problems, we wrote down all the pain points in sticky notes.
Ideate
After analyzing the pain points, we used How Might We (HMW) method as an opportunity to provide solution.
Solution
There are many HMWs that arose to find the solutions. Thus, we chose two main HMW. The followings are the two HMWs
- How might we allows users to easily store and manage their contacts
- How might we support users to track their projects
Based on the HMWs, we found solutions to the problems and classify them using Affinity Mapping.
Core Features
We identified three core features to focus on for the product. The common CRM softwares have tons of different features that would be too overwhelming to use in a mobile app, especially for non-tech savvy users. Hence we chose three core features to implement.
User Flow
Sketch
I quickly drew a lo-fi wireframe on a piece of paper with the team using crazy 8 method to get a rough initial idea of the screen to be made.
We continued to create a more detailed digital wireframe. Each member created their version of digital wireframes, which I then finalized again before entering the mockup design.
UI Styleguide
Interface Design
Dashboard
Contact Management
Sales Pipeline
Task Management
Prototype
After designing the high fidelity interface screens, we created an interactive prototype using Figma. Below is the interactive prototype you can try.
Test
To analyze the effectiveness and efficiency of the prototype, we conducted a user research using Usability Testing method.
Usability Testing
Before conducting usability testing, we created three task scenarios to be performed by the representative users. The followings are the tasks that my team and I have created.
Task 1: Create a new contact in Contact Management (Kontak) page
Task 2: Create a new proposal in Sales Pipeline page
Task 3: Create a new task in Task Management (Tugas) page
These three task were created to test the main features of the app. The users were asked to complete the task and were asked how they felt about the app. Through these usability testing, we could get feedbacks and if there were any points that we could improve on.
Key Findings
We conducted usability testing to three users and gathered their feedbacks. Overall, they completed the task without any significant problems. But we got some minor negative feedbacks on the interface design.
- Users took time to find the “save” button
- Users need Notes field to add additional information on Contact and Task page
Design Changes
We had some minor design changes such as, adding Notes field and Save button on the bottom. The followings are the before and after changes.
Retrospective
Challenge
My biggest challenge was to design a simple CRM for mobile app. Considering the common CRM platforms are web-based, we struggled to decide what features to be included in such a small platform. We realized that our research hadn’t been thorough enough to create a human-centered product. It’s a shame that some of the decisions were made based on our assumptions.
What can be improved?
While the objective of this project is to design a simple CRM, I realized that three core features wasn’t enough to provide a powerful system to help the target users. There are some features that wasn’t included in the proposed product. Our proposed solutions which include mailing list and report template wasn’t able to be included due to a limited time to complete the project.
I only used Figma for this project for everything from whiteboarding to wireframes and prototypes. While we were able to complete the design within Figma, I would like to expand my knowledge and use other standard tools in the industry.
Thanks for reading! If you have any feedback, kindly email me at raiza.alika@gmail.com
