Featured Redesign: Kitabisa — UI/UX Case Study
Hi everyone. I’m Annisa Laili Fitria. I’ve been participating as a UI/UX Designer Intern at the Skilvul Virtual Internship (SVI) program, and on this occasion, I want to share my UX Case Study, which is also an SVI project collaboration with one of their challenge partners, KitaBisa. The UX Challenge is to redesign the design of the Latest News feature. This project duration started from around last October-November 2021 approx 2 weeks.
Disclaimer: This project is part of a UI/UX Designer Internship program held by the Ministry of Education, Culture, Research, and Technology under the program KampusMerdeka with Skilvul and KitaBisa as the challenge partners. I am not employed or bound in a professional contract with Kita Bisa.
Overview
Kabar Terbaru is one of the features provided by Kita Bisa to provide updates on donations made by orangbaik. When it comes to Kabar Terbaru, many people have expectations about the writing, how it is delivered, or the news itself. The challenge is to redesign the feature so it can be more simple, attractive, and engaging it also can increase the motivation of donors to donate again.
Problems
- User finds it hard to access the campaign updates
- Users feel that the feature “Kabar Terbaru” is less attractive and touches the user emotionally.
- Users feel there is a lack of transparency because there is no progress in raising donations.
Research Objectives
- Provides and makes it easier to find information about campaign updates.
- Encourage donors to re-donate to campaigns that have been helped or other campaigns related to previous campaigns.
- Make it easier for donors to find out the allocation of funds that have been donated.
- Test the success rate of updating the latest news feature.
- Observing the needs and habits of users as donors.
My Role
In this program, we are expected to work together in a team. In this collaboration project, I work alongside my teammates Tenia Enggar Pratiwi and Niaprima. Basically, in this team we have the same responsibilities, we work together in every initial step of this feature redesign project. As UI/UX Designer we choose to use the design thinking process in redesigning this feature from the beginning to the prototype stage. Specifically, I led the question list session when we were doing the usability testing and redesign these features below:
- The Cards
- Kabar Terbaru
- Pop Up
Design Process
In this case, we choose to use Design Thinking as our design process approach. We chose Design Thinking because we wanted to create user-oriented features, or rather focused on the user so that we could observe and pay attention to people’s wishes when developing our features.
1-Empathize
At this point, we observe the problems around us and determine who is eligible to be the application’s target. At this stage, we also conduct a Competitive Analysis of several other Indonesia’s fundraising platforms, including RumahZakat, Wecare.id, Indonesia Dermawan (ACT) ext. The information itself comes from user-submitted reviews on Google Reviews. Furthermore, we empathize based on the outcomes of the AMA Session with challenge partners.
After doing all of these, based on our findings we finally step to the next stage which is the define stage.
2-Define
The problem points from the previous empathize stage were grouped at this stage. We analyze and observe the problems that users frequently face into several large points, known as Pain Points, which we then formulate into a user-oriented problem-solving statement. This stage makes it much easier for us to illustrate and solve the problem briefly in the How-Might-We stage.
1. Pain Points
In this stage, we found 17 problems that are often faced by users. From these pain points, we take another step to generalize these pain points in How-Might We.
2. How Might We
Based on our findings, we conclude these pain points which is the problems that are often faced by users above into 6 points, which are :
- Improved the display and placement of campaign updates to increase users’ motivation to donate again.
- Make a simpler display in the “Kabar Terbaru” section
- Make users interested in donating again
- Provide a display that can increase user sympathy
- Improved/redesigned the design of the app that provides donors with the latest information or news about the campaign
- Increase campaign engagement
So we can conclude that the main thing that we need to do is to:
Improved the display and placement of campaign updates to further increase the motivation of users to donate again
Which in this point we need to make a simple and interactive feature on Kabar Terbaru to increase the campaign engagement for both users and campaign organizers.
3-Ideate
At this stage, we divide the solutions to the problems encountered by users into several ideas. We divide the problem into 4 stages which will be discussed below.
1. Solution Idea
At this stage we formulate the problem in 17 points which we focus on the results of the how-might-we points we found, namely improving the appearance of the feature and increasing user motivation to re-donate.
2. Affinity Diagram
At this stage, we’ve organized our solution ideas into five major features that we’ll implement in our application: the reaction feature, the story feature, the donation progress feature, the notification feature, and the latest news. This classification is meant to make it easier for us to brainstorm ideas for the next stage.
3. Prioritize Idea
This stage is intended to see the priority scale of each feature to be developed; this priority scale is aimed at developing applications while taking time and capabilities into account to save design time while maintaining the quality of our features.
Our priority scale is currently divided into four priority stages, the most important of which is the “Yes Do It Now” stage. This scale is the feature that we prioritize the most; in other words, it necessitates a high level of urgency and is regarded as extremely important to be prioritized; these features are:
- Kabar Terbaru Feature: This feature is intended to provide updates to the user. we redesigned the existing features to attract more users to donate again like the major goals.
2. Notification (Pop-up) Feature: This feature is a push notification with a new unique design on the homepage.
.Meanwhile, those who enter the scale below Yes Do It Now, such as Do It Now, Later, Do Last, are deemed to be of insufficient urgency to become a priority scale in this feature redesign, but we still developed these features into our UI Design.
4. Crazy 8's
In this process we brainstorm the ideas that we have written in the previous stage, this stage is intended to generate various kinds of innovations from each of our team members.
4-Prototype
At this stage, we are focused on implementing the design results from crazy8’s into a wireframe and UI Design. We created three flows: the latest news flow (Kabar Terbaru), the donation progress flow (Progress Donasi), and the pop-up notification flow.
Next, from the division process that we have done, we start to create wireframes. This wireframe is intended to be a rough idea of the design features that we will develop.
Following the completion of the Wireframe stage, we will create a UI Design. We had a lot of discussions and changes during this process. In this case, we try to show features that are both appealing and simple. Here’s a look at our UI Design prototype.
5-Usability Test
At this stage of usability testing, we conducted an interview with one of the users using the respondent criteria specified by the Challenge Partner, as follows:
- 25–35 years old
- Gender male or female
- Domiciled in Indonesia
- Have the ability to speak Indonesian as a native language
- Ever donated on the web or fundraiser app
To find out the aim of this study, the author in this case employs usability metrics measurement with the Single East Question (SEQ) method. The Single East Question is scored on a scale of 1 to 7, with a median score of 5.5. As a result, if the SEQ results are higher than 5.5 during the usability testing process, it can be concluded that the application/product is easily accessible to the user. We tested the user in this activity, which was divided into four tasks, which were as follows:
- Task 1 (Accessing Latest News (Kabar Terbaru) from Pop Up Notification)
In this task, respondents were asked to access the link that was already given in the chat section. After that, the respondent was asked to close the pop-up notifications and access the latest news page. On this task, the respondent is confused about the button that is less visible because the button’s color is less noticeable for the respondent.
- Task 2 (Accessing Latest News (Kabar Terbaru) from Story)
Following that, in this task, our respondents were requested to access the story feature of one of the campaigns which are already available on the home page. In this task, respondents doesn't face any obstacles but the respondents asked about the timestamp of the story, how long will the story stayed.
- Task 3 (Accessing Latest News (Kabar Terbaru) from the Inbox)
After that, in this task, the respondents were requested to go back to the Homepage and access the Inbox to access the full story of the latest news. So far, on this task, the respondent doesn't face any trouble.
- Task 4 (Accessing Donation Progress and Financial Reports)
In the last task, the respondent was requested to access the donation progress, the respondent thought that this feature is more simple and not hard to access. When viewing the most recent news in the form of stories, the display of the separated donation progress looks neater and helps the user focus.
Iterate
At this stage, we try to improve our prototype after doing usability testing. Based on the test result we try to develop our UI Design we changed our button color that is less visible on Task 1 and also on the Story feature we are not given the timestamps but we changed it by adding the button time where we can see all the campaign archive story so it gives a new way to represent the Story, especially latest news feature in a more simple and interesting way.
Conclusion
After the usability testing, it can be concluded that the results of the Single Ease Question (SEQ) are 6 out of 7, the results are taken from the value of the Single Ease Question 4 task that has been carried out by the user, which means that the design and even this feature is easy and considered to meet the expectations and needs of the users in this Applications.
Things I could have done better :
This project was a great way for me to learn the fundamentals of UX/UI design. This is my first, and I’m astonished by how much I’ve learned. Based on user feedback and the author’s own suggestions, it is possible to conclude that several things could be improved, namely:
- Improve the flow prototype
- Fixing the button of the pop-up notification so it would be more visible
- It would be better if there is a specific time-stamp on the story feature.
I believe, there are still many flaws in the design and creation. However, this experience has shown me my flaws and the areas in which I need to improve so that in the future, I can compile case studies that are better than this.
That’s all for my UX Case Study, thank you for reading my UX case study, which, of course, still needs comments and feedback from readers. I’d also like to thank Skilvul and my mentor Ilham Akbar Solichin, for his expertise, guidance, and feedback on our even my UI/UX design. Thank You and see ya!
