UI UX Challenge : Redesign Kitabisa Application Features to Create a Better User Experience
Disclaimer : This project is part of the UI/UX Training Program held by the Ministry of Communication and Information with Skilvul and Kitabisa as Challenge Partners. I am not employed or bound by a professional contract by Kitabisa.
Introduction
Hello, my name is I Wayan Satria Dharma Widhiantara. I’m a Product Operation Officer at a Start Up in Malang and currently learning more about the UI UX realm. In August, I’ve been learning UI UX at DTS Professional Academy program in collaboration with Skilvul. I’ve got a challenge from kitabisa which is to redesign some features from kitabisa.
Overview
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 do fundraising for several categories such as natural disasters, education, environment, social activities, humanitarian and others.
Problem Statement
- 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.
Roles & Responsibilities
In doing this case study, I collaborated with my team, namely Mr. Fajrul Falach & Mr. Listiananda Apriliawan and was guided by our mentor, Mrs. Dheavira. As our roles and responsibilities are the same, namely focusing on finding problems and solutions, but on the part of ideate will be responsible per feature to improve their capabilities and shorten the time. And I got the opportunity to be in charge of the ‘Donasi kembali’ feature.
Design Process
In completing this case study, we use design thinking as a design process, starting from the empathize stage to the test stage and continuing to iterate the design.
Stage 1 — Empathize
The first process we did was empathize, where our first step was to find problems with Kitabisa. Because we have received a brief from skillvul, we did not do research on the user directly, but we did self exploration.
Background
On this occasion, I am currently joining the DTS Professional Academy program in collaboration with Skillvul to provide lessons about UI/UX designers. I got a challenge from kitabisa to redesign or change the “Berita” menu which we can find through the Inbox menu in the navigation menu and then look at the “Berita” menu next to the Inbox menu.
Objectives
- 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.
Methodology
Self Exploration
App Exploration
Based on the challenges given by Kitabisa through skill, we then browsed the application from Kitabisa by paying attention to what objectives we wanted to achieve. Because the main objective to be achieved is the ‘news’ page and how to encourage donors to donate again, so we have discussions and explore what can be developed from the features in Kitabisa.
We also carry out a deficiency analysis through reviews on the Kitabisa application on the Playstore, where we will determine which additional features can increase user satisfaction.
Stage 2 — Define
Then in the second define process where we have mapped the pattern of the problem and started to formulate solutions to the pain points we found.
Pain Points
After doing observations and independent research, we mapped out what pain points we got in 1 frame containing the post-it that we made at FigmaJam.
Stage 3 — Ideate
After getting a list of what problems exist in the Kitabisa feature that will be redesigned, we created how-might we (HMW) to determine a general solution from the pain points that have been found previously.
How-might we
After finding several solutions to problems from HMW, we voted to determine which solution we would take in accordance with the objectives we had previously set.
And the 3 HMW result that are chosen by all our team members is :
- Placing the donation news as far as the other page so that it is not too long
- Encourage users to donate again and donate to other campaigns of similar urgency
- Make it easier to find information about campaign updates
Solution Idea
After determining our HMW it is easier to determine a solution per problem, so we design a more specific solution idea based on the HMW we have found before.
Affinity Diagram
Then we make an affinity diagram, which is to group solutions that are related to each other in 1 clump to make it easier for us to determine which solution priority scale we will build first.
Through the affinity diagram, 5 groups of solutions were obtained :
1. Easy flow
2. Encouragement to donate again
3. View the latest news and history
4. Placement
5. and more.
Prioritization Idea
After that we group solutions based on their importance through prioritization ideas that we design in diagrams that can be called prioritization matrix.
Crazy 8's
Then to unify the perception of design, we made a wireframe that was made using the Crazy 8 method, which is a rough design method using stationery and paper which is divided into 8 parts and takes 8 minutes. We use this method to determine low-fidelity results quickly and can vote on what kind of design will be used for the redesign of the Kitabisa application.
After each of us designed Crazy 8’s, we voted again to determine which design we chose to be the main design in the redesign of the Kitabisa application.
As I wrote about roles and responsibilities, at the ideate stage, each team member will focus on their respective feature responsibilities and I will handle the ‘Donasi kembali’ feature on campaigns that have been donated by users.
Furthermore, after we divide the tasks, we immediately execute the solutions we found in the previous process according to their respective tasks.
User Flow
The first stage in this ideate I created a user flow which will help me find out the flow of the feature that I will add to the Kitabisa application, namely the ‘Donasi kembali’ feature.
Wireframe
Before entering into the creation of a high-fidelity UI, I first made a wireframe to clarify the appearance of the low-fidelity design that was made at the crazy 8’s stage.
Design System
Then my team and I made a design system to make the perception of the UI components that will be used in our respective designs be consistent. Of course, we have adjusted the design of this system to Kitabisa’s.
Mock Up
After all the components are finished, then I start designing the interface in the form of a mockup for the ‘Donasi Kembali’ feature. This mockup display is the result of a series of stages that my team and I have completed previously.
For a description of the redesign of our application, what I can do is :
- Change the ‘inbox’ menu to ‘berita’ menu so that users know about the progress of campaigns that have been donated by users.
- Adding a progress bar, collected funds, and end time to tell the user whether the campaign is still running or has ended and can be an encouragement for users to donate again if the funds collected are still far enough from the funds that should be needed.
- Fixed the position of the user’s unread news notification (pink circle on the right side).
- Adjusted the appearance of the news detail page by adding a ‘donate back’ button as a CTA page that lets users know that in the campaign the user has already donated.
- Added campaign recommendations when the user successfully completes a donation which is expected to increase the user’s willingness to donate to other campaigns in Kitabisa application.
Stage 4 — Prototyping
After the mockup is complete, I create a prototype to represent the UI like a real product. The figma prototype can be accessed here :
To access my prototype of the ‘Donasi kembali’ feature, you can select flow ‘Fitur Donasi Kembali’ on the sidebar.
Stage 5 — Test
After all stages of finding a solution have been completed, now is the time to test the design that I have made to the user because after all I still need to need the user to find out how far this design is effective in solving the problems found in the Kitabisa application.
Note : At this test stage, we do sampling to 1 user who meets the criteria and we do the test according to our respective duties. For that I will report the test results of the addition of the ‘donate back’ feature.
Respondent Criteria
Before we do testing on each user, we first determine the respondent criteria that will be used when testing so that it is consistent. the main requirement is the user of the Kitabisa application with other criteria such as :
Scenario
Then we formulate scenarios to make it easier for us to organize the flow when testing.
Task
Then we create a task for each flow, where my task focuses on the ‘Donasi kembali’ feature.
Testing
In testing I use the usability testing method, where I find respondents who match the criteria, namely Mr. Davit Romadhon. I use online user testing using zoom.
Result
- Behavior
Overall, the user understands the flow when on the news menu, only a few small notes that slightly interfere with the user’s usual flow of donating such as entering the nominal, choosing the payment method, and confirming after pressing the ‘Donasi kembali’ button.
2. Problem
Based on the explanation of the problem that I have shown in the picture, the problems found during usability testing are :
a. The user is not aware of the pink notification which serves as a marker that the news has not been opened by the user.
b. The user does not know the meaning of the news highlighted in blue.
c. Nominal is not highlighted well.
d. Quite ambiguous copy, what does ‘Donasi kembali’ mean?
e. There is no action yet, even though the flow should be able to take action so that in terms of user experience it doesn’t get confused.
f. The toggle switch icon can be enlarged again.
g. After being clicked it immediately leads to thank you, there is no confirmation pop-up first.
3. Solution
After finding some problems while doing usability testing, I started to remap some future adjustments such as:
a. Design improvements such as highlights, notifications, and text size.
b. Adjust the flow according to the Kitabisa.co application to match the user experience.
c. Conduct research to determine the appropriate copy for ‘Donasi kembali’.
Single Ease Question (SEQ)
Then to measure the value, I use the Single Ease Question (SEQ) method, which is a Post Task Questionnaire used to assess the level of difficulty of a product feature based on user experience using only one question.
I share this SEQ with 2 people to provide a comparable rating. and from a scale of 1 to 7, the SEQ result obtained is :
And usability testing this time the average value given by the two users was 5.75, which based on the determination of the SEQ the value already met the standard.
Summary
Based on usability testing that was carried out directly to the user, it can be said that the design solution offered is good but not better than user expectations because there are several things that make the user confused about the flow presented.
Recommendation
For further recommendations, there are many things that can be considered, firstly, strengthening from the research side first by testing or other methods in order to avoid bias between the designer and user perspectives, the second is paying attention to the flow of the prototype / UI design that must be in accordance with the user experience at least similar to the Kitabisa.co application or better developed, and the last thing that is important is to do usability testing with at least 5 people in order to get even more valid results from the user.
Lesson Learned
While working on this UI UX challenge I learned a lot of things and one thing I want to underline is :
Always involve users and validate assumptions
Why is that? because from the start I made a fatal mistake, namely not placing the user in exploring this challenge process, even though I was given a brief from the challenger, I should have validated the user and not based on my personal assumptions, because in the end it was the user so put the user first.
Closing
That’s all for my UI/UX challenge report, I thank my mentor in the DTS Professional Academy Program, Mrs. Dheavira has guided me and other friends in studying the material provided, thanks to team 10 friends, namely Mr. Arul and Mr. Nanda for being able to collaborate very well in the tasks given during this program, thank you to Mr. Davit who is also a friend in this program as a respondent who has helped me do usability testing, and lastly, thank you also to the DTS Professional Academy program which collaborates with skill in managing the program and providing UI/UX material from start to finish very well.