UI/UX Design Case Study Challenge Apps kitabisa.com

Novrijal Azhar
7 min readOct 13, 2022

--

Disclaimer : This project is part of the UI/UX Training Program held by the Ministry of Communication and Information with Skilvul and the Kitabisa App as Challenge Partners. I do not work or work under a professional contract by App Kitabisa.

ABOUT
Hi, I’m Novrijal Azhar, I am a participant of the Digitalent Scholarship Training held by the Ministry of Communication and Information with skilvul (skilvul.com), I joined class 26 group 7 with group members Mohammad Alfath, Novita Hidayati, Wa Ode Nur Fitriah R, Yudhigiyantoro.

Background : Kitabisa is one of the largest crowdfunding platforms in Indonesia. You can use this platform to do fundraising for various purposes. Most of the purpose is for medical needs. However, you can also raise funds for several categories such as natural disasters, education, environment, social activities, humanitarian and others.

Currently we want to redesign and even revamp or change the “News” section which we can find through the Inbox menu in the menu navigation and then look at the News section next to the Messages section.

This feature is our way of distributing information from campaigns they have donated. Not only that, the information provided can also be related to similar campaigns so that users can re-donate in other campaigns. Our goals are as follows :

  • Provides and makes it easier to find information about campaign updates. This will allow donors to be emotionally involved with the campaign that has been donated.
  • Encourage donors to re-donate to campaigns that have been helped or other campaigns related to previous campaigns.

Therefore, we need an application design that can provide donors with the latest information or news about the campaign so that their donation experience is more emotionally engaged and increases the retention rate or regular users who use the Kitabisa application product.

Some recommended features to expect in the news section that we want to change:

  • Donors can view updated information in story format. We are also open to shape exploration beyond images and text.
  • Donors can view the latest information regarding the use of donated or raised funds.

TOOLS

Some of the tools we used while working on this final project, namely Figma, Google Docs, Google Sheets, Zoom

Tools

Design Proccess

In this case study, we chose to use Design Thinking as our design process approach. We chose design thinking because we think design thinking is very useful in solving very complex problems, by reformulating the problem from the user’s point of view, generating lots of ideas in brainstorming sessions, and adopting a hands-on approach in initial design creation and testing. The following are the stages in design thinking.

Design Proccess

Empathize

Empathize stage is to find out the views and needs of the target user by doing research.

ABOUT COMPANY

Kitabisa is an online fundraising and donation application that has been established since 2013. Kitabisa has facilitated thousands of health services and social fundraising every day. Kitabisa has the license and legality to run all fundraising activities.

Objective

The objectives of this case study are:

  • Donors can view updated information in story format. We are also open to shape exploration beyond images and text.
  • Donors can view the latest information regarding the use of donated or raised funds.

Secondary Research

At this empathize stage, we also conduct secondary research for each user’s needs and constraints. Secondary research is obtained from the findings of articles or research such as Playstore feedback, UX Case Study on Medium and Behance. In the following, we summarize the results of the secondary research.

Secondary Research Team 7 (https://docs.google.com/spreadsheets/d/1CQwF1aE3IyKFC08xnuW0KLeW84lOOlhs4C9HpWf2K5A/edit#gid=0)

Define
From the Empathize stage we brainstormed about the results we got from the survey and from Bank Jago itself, and this is what we got:

Pain Point

from the pain point above we analyze and then we get How Might We.

How Might We

IDEATE

In this stage, we brainstorm together about solutions based on how likely we are. We choose to determine the best solution for the problem.

Ideate Stage (Solution Idea)

after that we categorize from solution ideas to Affinity Diagrams

Affinity Diagram

Finally, we determine the priority based on Yes, Do it now | Do Next | Do Last | Later

Then we made Crazy 8 to sketch about the design, it helped us to make some references to the wireframe.

Crazy 8
Wireframe

Style Guide & Design System

A. Color Line

Typography

Icons

Atom

Molecule

Organism

then at the prototyping stage, we organize the UI into a process flow according to the solution idea and user flow that has been created. The prototype will be used for testing with users.

Here’s a prototype that can be tried!

TEST

After the prototype process has been completed, the last step I did was to do the testing phase of the Redesign of the News Inbox page. Testing using Indepth Interview of users which also uses Usability Testing with Single Ease Questions. Before conducting the test, the first step that must be done is to make stimulus research. Which will serve to determine user criteria, what questions to ask and what scenarios to do so that the interview process and usability testing of users can run smoothly and focus on a predetermined goal.

User Criteria:
1. Aged 18–40 years (Productive Age)
2. Domiciled throughout Indonesia
3. Kitabisa application users

A list of questions :
1. Please introduce yourself? Name, Occupation and Age.
2. What made you interested in using the Kitabisa application?
3. How long have you been using the Kitabisa application?
4. Have you ever used or been aware of the existing news inbox page?
5. How often do you follow the campign updates that you have donated on the news inbox page?
6. What do you think about the features on the existing Kitabisa application news inbox page?
7. What do you think about the information on donations and campign funds disbursement on the Kitabisa application at this time?
8. What are the advantages and disadvantages of the Kitabisa application in your eyes as a user?

Task 1 — Latest News Menu

  1. How was your experience when accessing the Latest News Menu? Are there any problems that you experience when accessing it?
  2. What do you think about the news presented in the News Menu?
  3. What do you think about the detailed news information presented in the News Menu?

Task 2 — Individual Donation Feature

  1. How was your experience when making individual donations? Did you experience any problems during the process?
  2. What do you think about this individual donation feature?
  3. What do you think about the detailed information on the individual donation page?

Task 3 — Group Donation/Other Features

  1. How was your experience doing group donations? Did you experience any problems during the process?
  2. What do you think about this group donation feature
  3. What do you think about the detailed information on the group donation page?

Task 4 — Badge Menu (Badge)

  1. Bagaimana pengalaman anda saat mengakses Menu Badge? Apakah ada kendala yang anda rasakan saat mengaksesnya?
  2. Bagaimana pandangan anda tentang Menu Badge ini?
  3. Bagaimana pendapat anda tentang detail informasi pada halaman badge?

You can see interviews with users here. After conducting an in-depth interview process and testing with users using the Indepth Interview method, the following are the results of the process:

Interview result 1

Conclusion

Based on the results of in-depth interviews with users (In Depth User Interview) and Usability Testing with Single Ease Questions, respondents gave an overall score on existing tasks with a scale of 6 (PASSED) from a scale of 1–7 which means the new design Inbox section of news and new features that are made fall into the category of easy to use. This can be influenced by the respondents who have been using the Kitabisa application for a long time. Respondents also provided additional suggestions to improve the design features, namely:

When we work on these designs, we think of new ideas, discuss them, implement them, revise and iterate, always moving on and making them better over time.

Thanks to all member team 7 Mohammad Alfath, Novita Hidayati, Wa Ode Nur Fitriah R, Yudhigiyantoro & thank you for the UIX-A26 class mentor Al Fitra Netera Anfal

Connect with me via LinkedIn

THANK YOU

--

--