Kitabisa — A UX case study as well as Inbox ReDesign
Disclaimer: Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul dan Kitabisa sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Kitabisa.
🎯 What’s the purpose of this UX study?
The purpose of this UX study is to thoroughly investigate and figure out the inner workings and designs behind Indonesia’s largest campaign and funding application- Kitabisa.
Kitabisa is Indonesia’s most popular website to do and initiate crowdfunding, similar to International websites like Gofundme. Like the former, this project is very similar to what Gofundme offers- which is the option to sort and create your own campaign, donate to anyone’s campaign, as well as give multiple options to scroll through lots of campaigns as well as giving the user to anonymously donate and find campaigns. It’s a very well thought up system and is effective in garnering lots of attention for campaigns and people that need help.
In collaboration with Kitabisa x Skilvul, we’re given the opportunity to find problems, investigate the system behind Kitabisa’s designs, as well as provide solutions to said problem. Let’s dive in! Hopefully, this read may be useful to a lot of readers who are looking to figure out more about kitabisa’s inner workings, as well as possible design ideas for future projects.
🤔About Kitabisa
Kitabisa, as explained briefly in the previous paragraph, is Indonesia’s largest online platform that is mainly set in the field of donations and campaigns. With this application, it’s possible and very easy to connect donators as well as campaign creators.
What differentiates Kitabisa from other crowdfunding websites is its option and ease of access to donate Zakat, Wakaf, as well as Sedekah which is only quite prevalent and important in Muslim-oriented countries, such as Indonesia. As the process usually involves an offline process of coming to a building, lining up, as well as the payment process, the process can be quite tedious. With the online process that Kitabisa offered, we are able to make donations much easier.
Kitabisa also offers a lot of clarity for donators as well, due to its credibility as Indonesia's largest crowdfunding website, since its creation in 2013. Kitabisa’s funds and process of the transaction are closely monitored by Indonesia’s Social Justice Division(HAM), Kementrian Sosial, as well a lot of government-appointed divisions, so no money is used inappropriately.
🏡Challenge Features
Due to this project being a collaboration of Kitabisa x Skilvul, there were several requests made by Kitabisa in order to ensure better service and flow to its users, mainly being:
- Information of Campaigns being more accessible as well as making the contents more communicative in order to invoke a sense of emotional connection between a user as well as a potential campaign, as well as improving the relationship and clarity between the donator as well as the donor.
- Giving more impact for the user to donate once more to the campaign that the user has previously donated, as well as a new campaign.
🎨Design Method — Design Thinking
In order to find a problem of a website or a mobile application, there are various designs as well as design methods that can be analyzed and used to find said solutions. Some of the most popular guides for UX designs are Lean UX, Design Sprint Method, as well as design thinking. Due to the nature of this internship as well as the general shape of the application, we have decided to use Design Thinking as one of our design methods.
Design Thinking, as seen by the Interactive Design Foundation, describes the process as:
Design thinking is a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test.
From this, we can assume that it is a nonlinear process that is used and created to challenge, assume, as well as re-define a problem in order to create an innovative solution for a prototype as well as testing. Design Thinking focuses on the process of problem solving with the main focus on human as the main users of said application, as well as website.
There are various steps in Design Thinking, which can be elaborated into:
- Empathize,
- Define,
- Ideate,
- Prototype, and
- Test.
Emphasize focuses on understanding the users in order to find a problem in another perspective. The issue is, how do we understand what a user wants? There are various ways, such as:
- Try to assume the user’s mindset,
- Try to figure out their thoughts using What? How? and Why?
- Interview a user(for empathy purposes),
- Bodystorming,
- Analogous Empathy,
- Extreme Users,
- And many others!
Due to the limited duration frame of time given in this internship, we decided to focus on one aspect which is to assume a beginner’s mindset.
Define is the process to record all of the recollection of problems that we have found after exploring the application that will be investigated, which is Kitabisa. In order to be more structured, the define step is further brought down to more processes that we will use, mainly the Pain Points and How-Might We.
Our team decided to create the file on Figjam, which is our preferred application in order to brainstorm.
Pain Points can be defined as problems- such as the issues and bugs that users have gone through when traversing through the application, while doing the exploration in the Empathize step.
This process is then compiled and then forwarded to the next process, which is the How-Might We process.
How-Might We are a solution for the points that have been brought up in the Pain Points process. After compiling all the solutions, each team member is encouraged to do a voting system where each team member are eligible to give 5 votes to the points made. It’s a very delicate system where we are encouraged to be objective in order to ensure the best solutions in order to do the Ideate process carefully. From the voting results, we are able to gather several important points:
- Auto transfer
- Donation reminder
- Recent donation on homepage
- Report the updates
- Add time sorting
- Donation code access
- Divide notification and message tab
- Add a vibrate notification.
Solution Idea, as seen above, is the expansion of the results of the HMW that has been chosen.
In order to make all the solution idea more structured, we should group every solution based on the function into an affinity diagram.
We have carefully sorted the solutions in sections, based on the needs and the priority of the solution. From the results of the solution Idea that has ben made, we divided it based on News, Adjustment, Update as well as Repeat Donation.
Prioritization Idea is a good process to group ideas based on the same needs. However, the main idea is prioritized over other solutions and then sorted through a Priority Scale.
Now, some people may ask — why must we sort based on priority? The answer is simple- by properly sorting between solution/ideas based on the priority scale, it will immensely help designers to be more focused to what goals and improvements they should do first compared to the other solutions. On this project, the most important aspect is the donation process as well as re-donate option, so we have set these main points as the top priorities:
- Active campaign,
- Donation button,
- News update, and
- Auto transfer.
Crazy-8 is the final step in this process before moving on into the wireframe phase.
Crazy-8’s are made by each team member and then developed in order to make a more detailed wireframe. Wireframing is the general low fidelity work to sort through an item on the website or the interface of the application. The application that our group chose was Figma, as well as Design File.
Below is the wireframe we attached based on the design of the Crazy 8 we made.
From each wireframes made by each team member, we decided to combine features that were most crucial from each design and combined it into one wireframe, so it is able to complement each other.
Prototyping is the next phase that needs to be done, in order to give an image in high fidelity. There are four steps into creating a prototype, the first being creating a user flow.
User Flow is made when we have successfully created a wireframe. We need to create a user flow in order to find out how a user is going to accomplish a task based on their needs.
The creation of the user flow is important, as it will immensely help a UI designer in creating frames when the UI process is created, in order to be more structured.
Design System is the next step after making a wireframe. Its purpose is to be a clutch, or a guide for the main UI Design when making the prototype later on. This is important in order to make the design we use to be consistent, as well as faster to create by creating a set piece of color palette, typography, button styles which will then be made into components and variants, input fields, tabbing, icon, navigation bar, status bar, and many others.
Fortunately, Kitabisa already has a set of design systems so we can build our own design system into a more complicated one from Kitabisa’s original design system.
Making a UI Design is one of the final steps of the design process. Our next job is to make a UI Design based on the User Flow, as well as being consistent with what has been made in the design system. UI Design is made with the help of Design System that has been previously made. Each frame that has been done must be created as tidy as possible in order to maintain a consistent frame.
Before creating a prototype, it’s recommended to polish the UI Design to everyone’s best efforts in order to make a well-made prototype.
Prototyping is the next step after making a polished UI. Below is our prototype details.
After making a prototype, we will re-evaluate the results of the UI and design, as well as the flow between the UIs between our team members, which we will then do the testing step to several respondents. below is the prototype of our finished UI:
From the prototype, we have successfully solved several main problems that were present in the previous Kitabisa design, such as:
- Adding the option to auto donate right after donating to a certain campaign
- Adding an auto recommendation feature on the Pesan section in the Inbox, to ensure a better experience.
Testing is the final step of the design thinking process. testing is usually done before the launching of the application that is to be used in public. Testing has a lot of important functions — mainly to evaluate our design in order to see if our flow and design is already proper enough to be released to developers or to be made public, as well as to test if it already fits the user’s wants properly. From the testing process, we can see if there are other things in the designs or the flow that needs to be improved on.
The methods that are used for the testing process for this project is an In-Depth Interview as well as Usability Testing.
In Depth-Interview is one of the interview techniques that are used mainly by UX researchers as well as users in order to gather and dig through information as detailed as possible, while Usability Testing is the method that is used by UX Researchers in order to confirm if the design used is already proper to be launched professionally by companies.
In order to brace ourselves for these interviews to gain the best results, there are a lot of things that needs to be prepared beforehand, such as:
a. Creating a Stimulus User Research,
b. Making a record for the User Data, as well as
c. Interviewing the User.
Stimulus User Research is the general guide or process that needs to be done before we have the interview. Interviewers usually read this before an interview in order to have a good grasp of the situation of the interview.
User Record Data is the activity where we document the results of the interview in order for it to be more easier, if there are any issues that needs to be reviewed and fixed(per request/review of the user).
Interview User is, well, the main interview. This step is done last, right after Stimulus User Research and User record Data. for Kitabisa, we were limited into these main criterias:
- Aged 18–55 years old
- Works as a company employee in any company
- Lives in Indonesia
- Has good Indonesian language abilities, and has Indonesian as their native language.
From these results, we were able to get several users for the Interview.
User Persona
Conclusion
From the results of Design Thinking that we made during the project, we were able to gather several data and results from these users.
Based on the interviews as well as the prototype testing done to respondents, we got a score of 6 out of 7 for the compilation of all the respondents.
From the general review of the prototype, several adjustments can be made to further improve the flow and the UI, such as:
- Giving more clarity between the Pesan and Berita section, since a lot of users were confused by that
- Make more font options for different users
- Give more clarity to the Zakat and Donasi Rutin option in order to avoid confusion, and give a more detailed explanation so users can understand better.
✌Conclusion
This concludes the UX case study of the ReDesign/Revamp that our group has made. This project is far from perfect — there are still lots of points that may need to be improved, however we hope that this small read is enough for users to get a general idea on our goals, as well as our dreams into making a better UI. Thank you to Kitabisa, Skilvul, as well as Kominfo for sponsoring our course. Cheers, until the next one!
