UI/UX Case Study - Kitabisa Redesign Challenge: How to present the latest donation progress in the crowdfunding app
⚠ Disclaimer:
This project is part of the Digital Talent Scholarship PRO Academy - UI/UX Design Mastery program held by Skilvul and Kementerian Kominfo RI. We are not an official part of the challenge partner (Kitabisa).
What is Kitabisa?
Indonesia is a country whose people having the principle of helping each others, or also known as “gotong royong”. With the spirit of gotong royong and followed by digital era, Kitabisa is become the largest crowdfunding platform in Indonesia.
Kitabisa has become a bridge of kindness between the donors (called as #OrangBaik) and recipients of donations. Kitabisa app is used to raise funds for any charities such as natural disasters, education or health infrastructure, social issues, or other humanitarian activities.
Case brief
In this case study, Kitabisa wants a redesign or revamp for the “News” menu. News or “Berita” menu is a feature that is provided to distribute any updates from campaigns that users have donated to. As is known, the News section in Kitabisa’s current app is can be found on the Inbox menu in the navigation bar.
Objectives
The expected change is that users can more easily find information about the campaign updates they have donated. The goal is for users who donate (a donors) to feel emotionally involved with the campaign.
In addition to making it easier for users to find the updates of the campaign they are participating in, it is also hoped that there will be a recommendation about similar or related campaigns so that users are encouraged to donate again in other campaigns.
Team in the project
This project is carried out in groups of 5 members. We are Group 6 of class UIX 3 — A26, DTS x Skilvul UI/UX Design program.
1. Rofii Nurdika Qori (Leader)
2. Farhan Deristianto Putra (Me)
3. Vivi Ramadyah
4. Nova Aditya Utami
5. Muhammad Fadlan
We all worked as UI/UX Designers. I collaborate with all my teammates from the research to the evaluation phase. Tasks that I personally complete includes:
- Work together in do a Design Thinking
- Create Crazy 8 and digital wireframing
- Create Design System for Navigation and Cards components
- Design User Interface (UI) for “My Donation” (Donasi Saya)
- Prototyping and adding final touch for all UI pages
Design Process
We chose to use Design Thinking because this approach is essentially well-known being able to solve complex problems with a user-centric approach. Design Thinking is divided into 5 phases:
1 — Empathize
The first step we did was to look for the problems of Kitabisa and collect data about user needs. Kitabisa (via a module in Skilvul) provides a brief or deck that contains main aspects they need to improve and some user personas.
Meanwhile, in collecting user needs data, our group conducts Secondary Research. Secondary Research is a research methods by collecting and analyzing data from the primary information found. My own sources are by doing Competitor Analysis with similar case (or apps), and curating user’s feedback or comments from Kitabisa app on Google Play/App Store that relate with the scope of the project, which is about news or information updates.
The research results found by all group members are qualitative data. There are at least 2 of my findings:
- Many activities or campaigns did not provide any latest updates on the progress or distribution of donations, so the campaign looks empty and unconvincing.
- In similar crowdfunding apps (the competitors), the “Activity Details”, “Donation Updates” and other sections are divided into tabs so it’s easy to navigate.
2 — Define
Next, we summarize the problems or obstacles experienced by users based on our findings at the Empathize phase before into several pain points.
So, now what to do? Each member of the group writes down several plan or ideas that can be done and might be a possible solutions. So that’s why it is called How-Might We.
Based on the cards above, it come to a conclusion:
“How can updates of funds/donation management and distribution can be accessed easily and well-informed for the user?”
3 — Ideate
Based on the plans or ideas we defined in How-Might We, the next step is we try to explain our each idea in more detail with Affinity Diagram, categorize, then prioritize it based on the value that is relevant to solving the case → Idea Prioritization.
This is where all the design execution planning comes from. As a group, I was then responsible for designing for the following points:
- Adding Tabs for grouping information sections in the Campaign Detail page, so user can easily switch or navigate, including to view directly to the section about donation updates (Kabar Terbaru).
- Create donation updates into a chronological order or timeline form, and also have their dedicated page or feature.
Next, we were directed to create a User Flow to illustrate how the user will use or navigate the Kitabisa app based on the feature we create and the flow we expect.
4 — Prototyping
Based on the user flow that we have created, then we visualize it in a low-fidelity form. There are two techniques that we do, sketching on paper using the Crazy 8 method and also digital wireframing.
Crazy 8 is a design sprint that draw sketches on paper to capture what ideas appear, containing 8 frames and must be done in 8 minutes. Crazy 8 was performed by each member (5 people) during a live class session, resulting 40 frames. Here is my version:
From the 40 frames collected from all members, then we curate based on the prioritized pages or features, so that 10 frames were selected which were then remade into wireframes.
Before proceeding to the high-fidelity prototype, we prepared a Design System which aims to make the visual design process of all members consistent, the components used are continuous, and similar to the original style of the current Kitabisa app.
After the Design System is formed, the next process is to transform the wireframes into a high-fidelity design, which is the mockup. The mockups and prototype were made using Figma, with Android Small frame size standard (360x640 px). The selection of this frame size is because at the implementation later, a small screen will be easier to apply to a larger screen (responsive).
And now is the final stage of creating the UI design, which is prototyping, where all the hi-fi mockups are linked frame by frame so that they can form a user flow and can be operated by the user.
5 — Testing
After prototyping is complete, the next step is to conduct testing to validate whether the solution provided is considered capable of solving the problem and gather the feedback.
At this stage, our group conduct a user testing with 2 methods, which are:
- Usability Testing (unmoderated)
Using Maze Report - In-Depth Interview
Using Zoom Meetings with 1 (one) user
Before recruiting user to be tested, we compiled the Stimulus User Research and the required respondent criteria as follows:
- Gender: Male & Female
- Age: 25–35 years old
- Job: All professions are allowed
- Live in Indonesia
- Donors/respondents who have used the Kitabisa app
Test results can be accessed via the following link: 🔗 bit.ly/UIX-A26-KEL6
Conclusion
We are grateful that we were able to complete this UX case study according to the set time, even though there were some shortcomings in the process.
We learned that UI/UX is not just about making a beautiful appearance or design, but also how to create an application process that can be used by users easily and comfortably.
Hopefully we can continue to improvise for this project or the next projects.