Krealogi, a local supply chain SMEs partner

Maratussholikhah Nurazizah
6 min readSep 28, 2022

--

Redesign a useful application to be powerful ones

Disclaimer: This is the result of a group project from Skilvul UI/ UX Design Mastery Class with Krealogi as a challenge partner. We attended the design class thanks to the chance given by the Indonesia Ministry of Communication (Kominfo) through the Professional Academy Digital Talent Scholarship.

Introduction

Hello, warm greetings to you who find this UX case study!
Thank you for coming to my page :)

My name is Maratussholikhah Nurazizah, but you could just call me Ayik. I am a pharmacist who aspires to be a health-tech product manager. Since a product management field is an intersection between three fields of design, tech, and business, I start the learning journey from the design part.

My first step to learn about design is by enrolling to the Skilvul UI/ UX Design Mastery Class with Professional Academy Digital Talent Scholarship. I chose the Krealogi for the design challenge just because this application makes me fall in love with it for its goal to help the SMEs entrepreneurs in managing their business. In this challenge my role is a combination between team meeting moderator, assistant designer, and UX researcher.

Krealogi challenge's objective is to create a user-friendly design that could help the users record their operational activity and keep their operational business flow. In completing this UI/ UX challenge, we applied the Design Thinking Framework as the guidelines and here are the stages:

1. Empathize

For the empathize stage, we would like to know how the user feels when they use Krealogi application. Thus, we searched for user reviews from google play store, watched an AMA session with Krealogi video recorder, and tried using Krealogi application ourselves. We decided to write up three main pain points- the problems that users face when they use the application.

Pain points — krealogi

2. Define

In this stage, we utilized the How Might We Framework as a tool to reframe the user pain points — wondering how we could help the users by creating a question. By making questions, we will try to answer the questions from different types of perspectives and our minds will consequently think of new workable solutions which might not have crossed our minds before.

How Might We framework — krealogi

3. Ideate

In the ideation stage, we posted all our ideas of possible solutions as the answer to the three How Might We Framework questions on a Figma jam board.

Ideation — krealogi

After that, we made use of The Affinity Diagram to organize our ideas into categories of features, which are contact, order process, inventory management, order finalization, statistics dashboard, and lastly app user guideline. Then, we voted on the category that we think would have the greatest impact and made a rank out of it.

Affinity diagram — krealogi

Next, we used a Prioritization Matrix to help us in making decisions on selecting the highest-priority ideas (what we should do now based on the idea's value and effort). At this step, we decided to work on designing inventory management and statistics dashboard features.

Prioritization Matrix — krealogi

4. Prototyping

For the prototyping stage, we started with user flow — a flowchart showing a set of actions that a user will take to complete a task in the application. This user flow would be extremely helpful for us to rethink when to present the right information at the right time and also allow us to make sure that the user will complete the desired task in the easiest and fewest steps possible.

User flow — krealogi

We then created a wireframe for the user flow in a form of a sketch/ blueprint/ skeletal framework. This wireframe will be used for our visual guide in drawing our UI design.

Wireframe — krealogi

In this drawing UI designs step, we could not just straight use colors or icons that we like. In order to create a good UI design, we need to develop a Design System. A Design system is a compilation of components (color palette, typography, button, navigation bar, header, etc.) with clear standards (size, width, length, spacing, etc.) which could be assembled to create any applications.

Example of components in Design System — krealogi

After developing the design system, we drew UI design frames based on the wireframe with as much detailed information as possible. We had it in mind that the UI design frames would be close to how we see a real application page.

Example of UI Designs — krealogi

And finally, we made a prototype (still using Figma, of course) by linking our UI design frames and adding some animations to make sure the tester feels a smooth user experience as how they use a real application.

Prototype — krealogi

5. Testing

In this stage, we did usability testing. We started by creating a stimulus research document—a document where we write our research method, respondence criteria, questions, and research scenario.

Record data user research (interview) — krealogi
Record data user research (interview) Part 2 — krealogi

After that, we recruited some people that meet the research criteria to be the respondents. Gladly, we found five people for this testing stage! For this research, we combined the use of interviews (one respondent) and questionnaires (four respondents) for the research method and ask for the Single Ease Question score (a score to measure how easy it is for the respondents to use our prototype). Here is the summary result of our usability testing.

Usability testing result — krealogi

In conclusion, all respondents gave a 4 or 5 (Likert scale of 5) for the usefulness of our ideas and four of five respondents gave a 6 or 7 (Single Ease Question with a scale of 7) for easiness in using our prototype. Since each of our UI designs still received a score of 5 from one respondent, then we need to improve it based on their feedback, which are:

  • make sure that all the basic functions of the prototype could be used, such as the ‘back’ navigation icon
  • double-check that the ‘add’ button is consistently located in a specific place within the UI design, especially the ‘add’ button on the ‘product’ menu
  • give a clear indication on the statistic ‘preview’ page with ‘print’ and ‘close’ icons

Closing

Here we are, at the end of this design journey story. This challenge is still ongoing, and we need to come up with improvements based on user research explained in the testing part above. After finishing the improvements, we will continue with redesigning the ‘contact’ on the Krealogi application.

At last, I am overjoyed with this UI/ UX design master class, the curriculum is well-planned, the dedicated group mentor is superb, and I got to know new skills and knowledge. Up to this point, I learned a lot about the theory of design and research, and of course how to use fundamental tools on Figma.

Once again, thank you for visiting! Hopefully, the design journey story that I wrote would be useful for you. Finally, please leave feedback or comments, so we could know each other and discuss further :)

--

--