UI/UX Case Study: Krealogi— Customer Relationship Management (CRM) Features.
Overview
Krealogi, is a supply chain digital platform that is designed and provided by PT. Karya Du Anyam. Krealogi offers solutions to help those Micro, Small, and Medium Enterprises in the field of Fashion and Craft as the container to network among other Enterprises, it also provides such training workshop to develop as well as improve skills and abilities for the Micro, Small, and Medium Enterprise. Not only that, Krealogi is also a mobile application that is user-friendly, especially those Micro, Small, and Medium Enterprises to plan, monitor, analyze, as well as record their business progress strategically so that the business keeps growing.
Background
If you have already read my previous writing, the background of me as the author is basically the same, it’s actually about me incorporated in such Internship Program at a company, named Skilvul. Skilvul engages in the field of education which provides web-based online courses. Technically, Skilvul conducted an Internship Program called as SVI a.k.a Skilvul Virtual Internship for 4 months long. At this program, for the first two months i was assigned to to online-course provided by them, and as the result of the online-course was the writing that i made before, entitiled UI/UX Case Study: LEARNGUAGE — Online Language Learning Platform.
For the next two months, i was assigned to finish a challenge from various challenge partner, but i only had to choose one of many. The challenge i chose was Krealogi, a glimpse about what Krealogi is has been declared on the overview above. In order to finish the challenge, i had to team up with other 2 interns, they are Sena Bayu and Isnaini Solikhah. At this challenge partner of Krealogi, there were actually some challenges from them, there were approximately 4 challenges, but we only had to pick one of the challenges to be finished. Long story short, we chose the challenge of CRM a.k.a Customer Relationship Management , and it was because we thought that this feature is quite important to be implemented on such digital platform.
Basically, the challenge that we chose was about how to create a recommendation idea of UI/UX Design regarding to the feature that provided the user to be able to build and keep the relationship up with their clients (customers and vendors). It was our job to try to give the best of us about what features we could possibly give it a shot in order to fulfill the needs of CRM itself.
Objective
The main objective of finishing this project is typically to be able to implement the knowledge about UI/UX Design in a real project from the first stage that is Design Thinking to the final which is User Research & Usability Testing. At the final stage of Usability Testing, we would also like to find out about the usability, ease, needs & effectiveness, success, and satisfaction from the solution idea offered.
User
The targeted user for Krealogi was starting from the age of 20 until 50 that owns a small business and also has enough ability to operate technology, especially smartphone along with the mobile application inside.
Role in Team
As i have already stated before, I work to finish the challenge in team with Sena Bayu and Isnaini Solikhah. As a team, we technically had the same tasks and responsibilities to get done, starting from the Design Thinking process until the final User Research and Usability Testing. But, each of us absolutely had responsibilities towards the tasks that we needed to accomplish. Apparently, here what my responsibilities were:
- Generate pain points.
- Classified the pain points into some categories.
- Create the “How Might We” towards the classified categories.
- Creatively generate solution ideas based on the “How Might We” created.
- Categorized each solution ideas into Prioritization Diagram.
- Do voting towards the Prioritization Diagram, which solutions that had the urge to be executed immediately.
- Create Crazy 8's.
- Generate User Flows.
- Turn each of the user flows into Wireframes.
- Making components for UI Kit Style Guide.
- Develop the UI Mockup High Fidelity Design.
- Do prototyping toward the UI Mockup High Fidelity Design.
- User Research and Usability Testing.
Tools
The tools that were used to support the development of this project challenge were:
1 — Figma
Figma was one the tools that is mainly used (like most of the time) to develop regarding the UI/UX Design itself.
Figma is a browser-based application used for mostly designing interface designs and it also provides code generation for hand-off.
This is probably the best application for team-based collaborative design projects. (webdesign.tutplus.com)
2 — Google Docs and Google Spreadsheet
These two tools were used mainly for documenting, especially for Stimulus User Research and Record Data based on the interview result with the user.
Google Docs and Google Spreadsheet are basically online word and number processor offered by Google.
3 — UseBerry
Useberry was the tool that we used at the moment we did the Usability Testing with user where this helped user to operate the prototype easily by only opening the project link given.
Useberry itself is a platform for user feedback and prototype analytics. Some of design and prototyping tools, such as Figma, Adobe XD, InDesign, Marvel, etc. are also integrated with Useberry.
Design Process
Basically, Krealogi had listed down some conditions that they might had observed before also some main pain points that we as the apprentices technically needed to develop our ideas regarding to the UI/UX Design.
Here are the steps and processes that we did from the start to the final:
1 — Empathize
Honestly, this stage we were not really get focused on, because we already got the conditions along with the main pain points that the challenge partner wanted us to develop. But we somehow did a little research, it was Secondary Research, where we tried to get the data needed through the resume that Krealogi had given to us, competitor analysis, and by looking at the feedback given by the user at the Playstore. More or less the result as shown below:
2 — Define
At this stage, each of the member of the team had to put what’s in mind, each other’s ideas, etc. towards some sections in this stage. The sections are such as Pain Points, Affinity Diagram, and “How Might We”.
[Pain Points]
What we did at this section are most likely about expanding and exploring to generate more pain points towards the conditions and “pain points” given by Krealogi. Here are the pain points that we successfully generated:
As we can see above, the yellow-colored sticky notes were the pain points that i generated. Generally, here are what they were most likely about:
- There is no client data storage, thus the data of the same customer needs to be asked over and over again.
- The broadcast template for product promotion is not provided yet.
- The information about sales record has not yet integrated to the client.
- Users do not have contacts for business of their own.
- There is no feedback box for the client.
- Communication between the user and the client only happens within the incoming and completed order.
- There is no progress updates to the client.
[Affinity Diagram]
From the pain points that had been already generated earlier, it’s time to classified all the pain points into some categories so that we knew which pain points had such similar purpose. We successfully categorized and classified the pain points into 7 categories.
As shown above, there are 7 categories , more or less here’s the explanation:
- Data Integration, in this category all the pain points listed down were most likely talking about the problem found regarding data integration that probably hadn’t been covered in the application.
- Broadcast, this category contained of the pain points related to the not yet available broadcast kind of thing as well as the template in the application.
- Customer report, all the pain points in this category were likely referring to the report where the user can digitally record and take a look at, which hasn’t been developed yet.
- Business contact, the pain points contained in this category basically talked about the unprovided business contact.
- Feedbacks, this category talked about the pain points in which related to the unaccommodated feedbacks from the client.
- Communication, the pain points in this category most likely talking about the lacking communication between the user and the client.
- Logistic, this category was about the unavailable certain logistic methods.
[How Might We]
After all the pain points had been categorized and classified based on their similar purpose, the “How Might We” for each category needed to be generated. Basically, the How Might We was about creating “Question” that will lead to the solution we were about to make.
Below, i declared the How Might We for each category:
- Data Integration: How might we help the user to create client data record in a general and personal way?
- Broadcast: How might we maintain a good relationship towards the client?
- Customer report: How might we help the user to discover the client transaction progress and growth?
- Business contact: How might we ease the user to differentiate between business contacts and personal contacts?
- Feedbacks: How might we help the user to know the feedbacks from the client towards the product?
- Communication: How might we help the user to keep in touch and to approach the client?
- Logistic: How might we help the user to collaborate and cooperate with the logistic services to ease the shipment along with the shipment fee.
3 — Ideate
All the outcomes from the stage before (Define) determined the process of this stage, especially after the How Might Wes were discovered, at this stage, there are also some sections such as Solution Idea, Prioritization Diagram, and Crazy 8's.
[Solution Idea]
This was the section where all the creative ideas were generated. At this section we tend to “answer” the How Might Wes that had been discovered earlier.
From above, it was clear that we had generated quite many solution ideas in which each solution had to be related to each of the How Might Wes.
[Prioritization Diagram]
This was the section where all the solution ideas were categorized based on their priority level, the less effort and higher the user value, the more prioritized the solution ideas were. The result as shown below:
After all the solution ideas had been prioritized, each member of the team had to vote the solution ideas in the YES, DO IT NOW category, the most-voted solution ideas, would be the ones who get executed immediately. The results were as shown below:
At the end, the most-voted solution ideas would be the features that were going to be executed, and they were most likely about:
- Create a client data record feature which can be done manually (the user input the client data manually through provided forms) and automatically by importing the contact in the user’s phone to the application. In the end, this feature functions to save and store the client data such as (name, phone number, address, etc.) into the application.
- Create a feature that could ease the user to communicate with the client while processing the sales record, so that the users do not have to open the communication platform manually (which is complicated enough), yet they could just automatically directed to go to the platform they are willing to use.
- Create a feature for business card making and to share them as they wish to. This feature is aimed to ease the user to create their own business card as their personal branding, and being able to share ones to promote as well as introduce their business to the new and old clients.
- Create a report feature. The purpose of this feature is to help the user to see and recognize the progress and growth of their businesses towards the chart and table provided in the report feature.
[Crazy 8's]
This section was about each member of the team had to create ideas or depictions by drawing maximum of 8 screens/pages about the how the feature would look like which at the end, the result of the Crazy 8’s would be the benchmark or inspiration for wireframe making later on.
4 — Prototyping
Prototyping stage was the stage where the process of UI Mockup High Fidelity and Prototyping happened. At this stage the process to the end needed to be done step by step, and down below are the explanation of each step.
[User Flow]
User Flow is a flow of how user would finish the task from the start to end that is spelled out through steps in order to achieve the goal. For this case, my team had generated approximately five (5) user flows, take a loot at the flows down below:
1. Client Data Recording Flow
As we can see, there are steps that have to be done in order to reach the goal, as for this flow the steps are simply starting from the start, then user will go to the contact feature, then try to add new contact, after that user can choose whether they want to add the contacts manually or by importing from the personal contacts in their device, lastly the new contact saved and the goal has been reached.
2. Sales Recording Flow
Same goes to the sales recording flow, to reach the goal there are steps that have to be traversed, from the start, the user need to choose the sales record feature then try to create the new record, after that user would be asked to insert the client data whether by selecting the already saved contact or create new ones (would be directed to the client data recording flow), after client data has been selected, user need to fill the sales record form, and finally saving the record as the goal.
3. User-Client Communication Flow
As for this flow, the user will start by going to the sales record feature then user would have to choose one of the sales record on the available list, after that the user could go to the communication platform such as WhatsApp, SMS, or Phone directly from the page shown which is the goal of this flow.
4. Business Card Flow
This flow has the goal in which the user could make their own business card as well as sharing the already created ones through some platform provided. In order to reach the goal, user at first has to go to the profile menu, then got in to the Business Card feature, if the user wish to create one, they could just simply click the button to create ones, then pick the design they want, complete the data form, save it, and finally their business card is made and is able to be shared.
5. Client Report Flow
This is the simplest flow compared to the other, because basically the users just have to go to the performance menu and from there they could see the charts of sales progress, if they pick the client report button they would be directed to the page where they could download and share the report as they wish, by that the goal is reached.
[Wireframe]
After all the user flows were already made, now it’s time to go on making Wireframes. Technically, my team had agreed to split up the process of making wireframe by randomly shuffling the user flows, as there were 5 user flows, each member would get 2 user flows to get the wireframe done, but there is also one member that only got one. Here are some of the wireframes that i personally had created:
[UI Kit Style Guide]
After the wireframes had been created, before we move on to the process of UI Mockup High Fidelity Design, we first had to create UI Kit Style Guide that would be used for designing the UI mockup. UI Kit Style Guide is basically containing of the typography, colors, iconography, atom components (button, input field, navbar, etc.), molecule components, etc. which are useful to make the UI mockup looks consistent and tidy.
[UI Mockup High Fidelity Design]
This is the core of the whole project, the making of UI Mockup High Fidelity Design. We start designing by combining all the suitable components from the UI Kit Style Guide and make the wireframes as the reference/matrix. Down below are some of the UI Mockup High Fidelity Design samples that i personally created:
[Prototyping]
After the UI Mockup High Fidelity Design had been done overall, what to do next was implementing the prototype within the mockup designs. Here i attach the example of the prototyping UI Mockup High Fidelity Design:
By finishing the protoyping, the whole design process had unofficially done, since there was still one step ahead, but technically the “design process” was completely done. Hence here is the result of it:
5 — Testing
Finally, this is the last step of the design process before the design was officially declared complete. This is the step for testing the product developed directly with the user. Basically, what would be done in this stage were User Research and Usability Testing, and both were done virtually. Technically, we split up the role for each member of the team, as the moderator, the observer, and the note taker.
The moderator was the one that would lead the whole activity as well as interact with the invited user from the start to end, and it was my job.
The observer was the one that is responsible to observe the whole activity, especially on the Usability Testing section, the observer had to observe the movement of the user toward the product, and if there’s something strange, the observer communicate it through the moderator. In this project, the observer was Isnaini Solikhah.
The last was the note taker, the one who was doing the note-taking for every single information thrown by the user. And it was Sena Bayu’s job for being the note taker.
These are the documentation of the User Research my team and i did with the user:
[Testing Result with SEQ Scores]
In order to know the usability level from the user, including the ease, the comfort, etc. We used SEQ a.k.a Single Ease Question method that was asked after the user accomplished every single tasks given. The SEQ method itself basically used the Likert Scale. So, we asked the user from 1 to 7 how easy the task was and why did they give such number. Hence, Based on the usability testing, here is result:
Apparently, there were 5 tasks that we asked the user to accomplish, they were:
- Task 1 = To record client data, manually and by importing from the personal contact. The user gave us 7 out of 7.
- Task 2 = To record the sales. The user gave us 7 ouf of 7.
- Task 3 = To check the sales record and communication flow. The user gave us 5 out of 7.
- Task 4 = To create their own business card and share them. The user gave us 7 out of 7.
- Task 5 = To check the client report. The user gave us 7 out of 7.
As the conclusion, the result from the Usability Testing was 7 out of 7 overall, means that the product solution that we had developed was pretty easy to use for the user.
[Feedbacks]
The SEQ result might looked almost perfect. But even so, we did get a quite much feedbacks towards the solution for improvement in the future. The feedbacks were most likely:
- The language used in the copy writing has to be synchronized, stick to only one language.
- Improve the copywriting for every feature to be easily understood.
- Provide the depiction about broadcast templates when directed to other platforms for particular needs.
- Additional information such as the payment progress from the client for the product ordered.
- Sharing to SMS isn’t really needed anymore, try to find the substitute.
[Design Iteration]
Based on the feedback obtained from the user, we did the Design Iteration, or let’s say it was such design revision but based on the pain points thrown by the user and we had to try to find the solution for it. And after going through discussion, here are some samples of design iteration on my team:
As we can see, the design iteration related to the business card flow, in which the pain points itself were the 3rd and the 5th point in the feedback section above.
To solve the 3rd feedback or pain point, we come to the idea of improving the feature of broadcast template pop-up before the user get directed to the platform they wish.
As for the 5th point, the idea was by changing the ‘SMS’ option with ‘Facebook’ instead, because nowadays the use of facebook is rapidly growing in which probably could enlarge the market.
Conclusion
Overall, the challenge was interesting. Because we’re sued to implement what we had learnt about before in a real project. This experience was great, especially this is a team project where there was not only one head but a couple more, in which there must be discussion in order to make the best decision for the project. And because i was the moderator at the usability testing session, i feel like i got a lot of new insight and knowledge from the user, it was fun and interesting to get to know new people and what they do in the daily basis!
Final words, this challenge was amazing and would be one of the memorable thing in my journey.
Recommendation
Before this article ends, I would like to insert some of the recommendation towards this product solution for improvement in the future, they are:
- The notification feature to remind the user about the ongoing sales.
- The feature of sales/order status and progress.
Gracias!