UX Case Study: Re-Design Kitabisa.com

M Sultan Aldo
7 min readSep 27, 2022

--

DISCLAIMER: This UX Case Study is for a practice project of UI/UX Design Mastery (Intensive Class), held by Kementerian Komunikasi and Informatika Republik Indonesia with Skilvul in Program Professional Academy — Digital Talent Scholarship 2022. Kitabisa.com is the Challenge Partner of Skilvul. I am not working or contracted professionally by Kemenkominfo, Skilvul, or Kitabisa.

Background

A learning program organized by the DTS (Digital Talent Scholarship) Ministry of Communication and Information collaborates with Skilvul with the UI/UX Design Professional Academy class program. Through this learning program, they are asked to choose one challenge partner as the object of the study project. Where I decided the Kitabisa.com application as my challenge partner. Kitabisa itself is an online platform that was established in 2013 until now and aims to make it easier for people to donate online and raise funds online as well.

Objective

  1. Finding out the habits or experiences of users using the kitabisa.com application.
  2. Find out the habits of users in donating.
  3. Create design solutions for problems or constraints from the Kitabisa.com application.

Team Role

In this UI/UX project exercise I was allowed to work together in a group, here are the members:

Muthiara Panghurina as UI/UX Designer
Muhammad Sultan Aldo as UI/UX Designer (Me)

Design Process

In this case study, we chose to use Design Thinking as an approach to our design process, based on the lessons on Design Thinking that Skilvul had taught us. There is Empathize, Define, Ideate, Prototyping, and Testing.

1 — Empathize

In this empathize stage, we conduct Secondary Research based on the problem brief from the Challenge Brief (Kitabisa Application). Where at this stage we conduct research through user feedback on the App store/playstore and references on websites such as articles and journals.

Secondary Research

2 — Define

In this Define stage, we make a list of Paint Points and also write down ideas from problems that have been defined from paint points (How-Might We) using Figjam.

Results of Paint Points and HMW

3 — Ideate

In this Ideate stage, we create solutions or ideas from problems that have been defined in the define stage, namely How-Might We.

Solution Idea

Furthermore, from the solution ideas that have been made, an Affinity Diagram is made which can be used to organize various ideas that have previously been made that are still chaotic and then grouped based on related themes.

Affinity Diagram

After making an Affinity Diagram, then a Prioritization Idea is made which serves to sort which ideas/solutions are the priority to be worked on/executed first. Where for the Prioritization Idea sequence consists of 4 sequential stages, namely:
1. Do It Now
2. Do Next
3. Do Later
4. Do Last

Prioritization Idea

4 — Prototyping

Before entering the prototyping stage, we first create a User Flow, namely the steps in the form of a flow from the starting point to the endpoint to make it easier to create UI Design later.

User Flow

After the User Flow has been created, what we do next is create some Wireframes based on the user flow that we created earlier.

Wireframe

After creating a Wireframe, we create a Design System consisting of a Font Style, Color Style, and Button Style.

Color style, Font style, Button style

After creating a Color style, Font style, and Button style, the next step is to create a UI Design for the Kitabisa application.

UI Design Aplikasi Kitabisa

After making the UI Design, then we’re making the Prototype. The prototyping itself is the process of processing an idea into something more physical so that it can be felt, played, and tested by users.

Prototyping

5 — Testing

In the last stage, we will do testing of the results of the work that we have done before. At this testing stage, we start by making a User Research Stimulus which we will later use as a guide/scenario when testing by in-depth-interviewing prospective users. The contents of the Stimulus User Research are as follows:

Research Objective

  1. Finding out the level of usage needed in making donations through the Kitabisa application.
  2. Finding out the level of user needs in doing zakat through the Kitabisa application.
  3. Find out usability testing in the UI design of the Kitabisa application.

Respondent Criteria

  1. 18–55 years old
  2. Work as an employee/employee in any agency
  3. Domiciled throughout Indonesia
  4. Have the ability to speak Indonesian as a native language
  5. Have a medium economic level
  6. Knowing about the Kitabisa app
  7. Used to technology, especially mobile phone

List of Questions

  1. Can you introduce yourself first such as your name, age, and current activity/occupation?
  2. Have you ever donated? When? What kind of donation?
  3. Have you ever paid zakat? When? What kind of zakat?
  4. How often do you donate?
  5. How often do you pay zakat?
  6. Where do you usually make donations? Online or offline?
  7. Where do you usually pay zakat?
  8. Do you choose to donate or not?
  9. If you donate usually in what context? e.g. social, health, etc.

Research Scenario

  1. Give greetings when meeting with respondents and thank them for taking the time to do this activity.
  2. Introduce yourself (name, age, occupation, domicile) and explain the purpose and objectives of the activities to be carried out with the respondent.
  3. Explain the flow of the activity process from start to finish.
  4. Ask respondents to introduce themselves starting with Name, Occupation, Age, and Domicile.
  5. Conduct interviews based on the Question List that has been made.
  6. Briefly explain the Kitabisa application.
  7. Give the Figma link to the respondent and ask the respondent to Share Screen.
  8. Briefly explain what to do and how to operate Figma Prototype to respondents

And after the questions above are finished, we continue with the Tasking where we will give the task to the user to run a prototype application from Figma and then ask them a few questions according to the scenario.

[TASK 1] Asks users to register and log into the application (stops on the Home page) and observes what respondents do.

  • Ask if there are problems in running the prototype.
  • Ask how the UI is designed.
  • Does the registration and login information meet the user’s needs? Why?

[TASK 2] Ask the user to donate (stop until the Donation Success page) and observe what respondents do.

  • Ask if there are problems in running the prototype.
  • Ask how the UI is designed.
  • Does the information display meet the needs? Why?

[TASK 3] Ask the user to pay zakat (stop until the Donation Success page) and observe what respondents do.

  • Ask if there are any problems with the flow.
  • Ask how the UI is designed.
  • Does the information displayed by the user’s needs? Why?

[TASK 4] Asks the user to browse the Search menu and observe what respondents do.

  • Ask if there are any problems with the flow.
  • Does the information displayed by the user’s needs? Why?
  • Asking the level of usability, convenience, and satisfaction of the respondents every time they complete the flow of Registration and Login, Donation, Zakat, and Browse the search menu.
  • Asking about the level of the Single Ease Question the respondent.
  • Closing and saying thank you.

Testing Results

These results are done by doing In-Depth Interviews (IDI) with a certain user, we were doing the IDI by the scenario that we already made before.

Respondent Info
Answers to the Question List
TASK and SEQ

Conclusion

Based on the testing results and the data records that have been obtained, it is concluded that based on the prototype experiment with the requested task, respondents gave a score of 6 out of 7. In other words, the final result of this testing is that 85% passed the SEQ and the respondents found it easy after trying the application prototype that we have made.

Closing

Thus the results of this UX Case Study exercise with Kitabisa application as the platform. I thank my teammate for being cooperative and supportive in working on this project and also thanks to DTS PROA and Skilvul for allowing me to be able to participate in this UI/UX Design program, hopefully, the knowledge will be useful for me and all that follows to the end or not.

and finally, thank you also to you guys who have visited to read this UX Case Study, hopefully, it can help or inspire you all.

Ciao!

--

--

M Sultan Aldo
M Sultan Aldo

Written by M Sultan Aldo

Hi! my name is Aldo. I like things related to design, especially UI/UX. BTW I’m still a newbie but I am eager to learn don’t worry.

No responses yet