UI/UX Case Study — Kitabisa Donation App Redesign Challenge
Disclaimer: This project is part of the UI/UX Training Program which was held by the Ministry of Communications and Informatics with Skilvul and Kitabisa as Challenge Partner. I neither work nor under a professional contract with Kitabisa.
Introduction
Well, hello everyone! I am Adeline Rosabella, currently Associate Engineering Manager in Topremit. Long story short, I am accepted as one of the participants in UI/UX Design in SKilvul — Digitalent Professional Academy (PROA) which was held by the Ministry of Communications and Informatics. The participants who attend in this program are given the opportunity to redesign the challenge partner apps, to achieve the objective they stated. So here’s the summary of case study with Kitabisa — the challenge partner I choose 😆
Overview
Kitabisa.com is a digital fundraising and donation platform connecting millions of kindness in Indonesia. Initiated in 2013 as a social movement, Kitabisa continuously grow and collaborate with many companies, government bodies, non-profit organizations, hospitals, and public figures to harness the power of the masses in tackling social issues. Thus far, millions of #orangbaik have joined to scale up the impacts in helping other people in need. Through technology, Kitabisa strive to build the largest community of people helping and protecting each other.
Currently Kitabisa have a wish to redesign and revamp the “News” section which users can find through the Inbox in navigation menu, next to the Messages section. This feature is one of Kitabisa’s way of distributing information from campaigns users have donated. The information provided can also be related to similar campaigns so that users can re-donate to another campaigns. The goals are as follows:
- To provide and make it easier to find information about campaign updates. This will allow donors to be emotionally involved with the campaign that has been donated
- To encourage donors to re-donate to those campaigns that have been helped or other campaigns related to previous campaigns
Objective
Therefore, Kitabisa need an application design that can provide donors with the latest information or news about the campaign so that their donation experience can more emotionally engaged and can increase the retention rate of Kitabisa application product. Some recommended features in the News section that Kitabisa expect us to deliver:
- Donors can view updated information in story format. Kitabisa are also open to shape exploration beyond images and text.
- Donors can view the latest information regarding the use of donated or raised funds.
Target Users
In order for the design solution to be made more focused and in accordance with user needs, it is necessary to classify users based on certain criteria according to the explanation in the UI/UX Challenge brief. There are several user criteria that are used as benchmarks when determining a design solution, which are as follows:
- Gender: man or woman
- Age: 25–35 years old
- Profession: not specific
Roles
Throughout the process, I collaborate with Ainun Jariah Yusuf, Alfi Rochmah Primasari, and Maria Bellaniar Ismiati, mentored by Jennifer Efendi to complete this case study. Together we work as a team and support each other. The responsibilities in creating and implementing this project are:
- Establish design thinking
- Create user flow and wireframes
- Create Design System — UI Kit
- Produce UI/UX Design
- Create prototype
- Conduct usability testing and analyze the results
To complete this project, we use Figma as the main tool for designing and prototyping, also Google Drive, Google Docs and Google Spreadsheets to document everything needed along this 3 months. The project will takes part from 9 March — 18 June 2022. We also use Discord and Zoom to communicate and meet because we’re all in different provinces.
Design Process
The design process method used in this UI/UX Challenge project is Design Thinking.
Design thinking is an iterative process in which you seek to understand your users, challenge assumptions, redefine problems and create innovative solutions which you can prototype and test.
Design thinking contains five phases: 1. Empathize, 2. Define, 3. Ideate, 4. Prototype and 5. Test. You can carry these stages out in parallel, repeat them and circle back to a previous stage at any point in the process. The core purpose of the process is to allow you to work in a dynamic way to develop and launch innovative ideas.
1 — Empathize
Before carry out to Define and Ideate stage, we start by doing Empathize stage using Secondary Research method to find out the views and need of users, in which will generate assumptions for the problem we are going to solve.
Secondary Research is a research method carried out by summarizing published research data, such as analytical data from articles, conducting competitor analysis, looking for journal references, and others. In this stage we don’t involve users directly, but we position ourselves as user who is going to use Kitabisa app instead.
Following the Empathize stage, we need to simulate Define process which produces How-Might We and Ideate process which produces Solution Ideas and Crazy 8’s.
2 — Define
The assumptions from the Secondary Research that we have done in Empathize stage will be discussed in this Define stage. After those observations, findings and research, we determine what Pain Points (difficulties), needs and goals to be used in the next stage.
With these bunch list of problems mapped out in post-it at FigJam, we created How-Might We to define how those problems will be solved.
3 — Ideate
In this Ideate stage, we define the Solution Idea based on those How-Might We we have created before.
Those related solutions will be separate into several groups through Affinity Diagram. Grouping them will make it easier for us to prioritize which solution should we solve first.
Yes there are sooo many solutions that popped out from our mind 🤣
Next we need to choose the most valuable and easiest to be implemented. Solutions will be group based on their importance through Prioritization Ideas that we identify in Eisenhower Prioritization Matrix. The grid are divided to 4 quadrants: valuable-low effort, valuable-high effort, low value-low effort, and low value-high effort.
So, the solutions sorted from most important to least important are:
- Campaign Category (grouping campaign, add searching filtering and sorting in campaign)
- Emotional Content (change copywriting and add video on campaign update)
- UI (change copywriting, for example from “Berita” to “Kabar Terbaru”)
- Navigation — Newest Campaign (separate Campaign Update from Inbox, separate campaign story and the use of funds)
- Notification Feature (real time notifications)
We decided not to resolve the last — Notification Feature problems due to limited time.
Then we generate the design solutions with Crazy 8’s Framework, by drawing wireframe using paper divided into 8 parts, and it takes only 8 minutes to create a low-fidelity design results. After we sketch the Crazy 8 done, we need to vote to the design that will be used for Kitabisa application. Do you see the love love stickers down this photos? That’s our votes. 🥰
Then we start making the User Flow. User flow will help us figure out the flow of the feature that we will add to the Kitabisa application.
4 — Prototyping
Before creating a high-fidelity UI design, we need to make Wireframing (low-fidelity UI design) to clarify the design that was made and voted at the Crazy 8’s phase.
After done wireframing, we create Design System to make the UI components that will be used for designing. We choose colors, typography, and themes based on current Kitabisa design system to make sure the UI doesn’t differ a lot.
We can start designing the interface after the components in design system has been done. This is the results of the mockup UI design that we build from the wireframe that we have done previously.
5 — Testing
The final step is to validate if the given solution do solve user’s problem. We conducted a test through usability testing and in-depth interview to get feedback from user.
First, we need to make Stimulus Research Document which contains:
- Research Objective
- Respondent Criteria
- List of Questions
- Research Scenario
Second, to measure the success rate of this project, we use Single Ease Question (SEQ) as our usability metrics. Those metrics will be recorded in Record Data Document.
We know that minimum tested user should be at least 5 respondents, but due to deadlines, skilvul mentor suggested only 1 respondent and it’s accepted.
Then we got the 1 respondent which match with our persona, we interviewed her and asked her to test the prototype that we have created. We also give scenarios for the respondent like searching, filtering, and also donate with amount of IDR 10.000,-
After the interview has done, we ask her for the level of usability, convenience and satisfaction on a Likert scale from 1 to 7 as the results. Turns out she gives us 5 score out of 7 which is not passed ☹️ (minimum score passed is 5.5). But during interview, we gain many recommendations, feedbacks and also some insights which is really helpful, such as:
- Respondent feel the UI is good enough to highlight buttons. For example, one button is gray so that it seems to be disabled. In addition, the donation button is now also well highlighted.
- Respondent could not find where the latest news and disbursement of funds were.
- According to respondents, the idea of separating the latest news and disbursement of funds is good, but respondents prefer to be combined.
- Respondents also felt deceived that the latest news and disbursement of funds could be filtered.
Conclusions
We got new experience that the respondent use a smaller device than our prototype. This cause some of our designs are not viewable is her device. We also decided to delete the navbar when success searching campaign as one of the respondent feedback.
In this UI/UX Challenge, our solutions help the user but still need some more improvement. We know what we are doing is still far from perfect, but believe that we can still continue this project in the future to help user by creating more solutions.
What’s Next
We will focus on the Notifications Feature and also improve on some of the sections that respondents recommended, such as combination and differentiate of the latest news and disbursement of funds. We need to do some data research on Kitabisa users to see which options they prefer.
Thanks for reading this case study. I’m happy to be part of this journey by joining UI/UX Design class held by Skilvul x Digitalent. Hope this recommendation can be considered by Kitabisa and can be implemented for the next Kitabisa development.
Feel free to comment my writing!
References
