Disclaimer

This project is a DTS Kominfo x Skilvull program. Part of the UI/UX training program implemented by Skilvul.

About Kitabisa

Kitabisa is a donation and fundraising site for initiatives, campaigns and social programs. Let’s work together to build Indonesia!

Kitabisa Founded in 2013, Kitabisa website and application have become a bridge for goodness and a forum for mutual cooperation for the Indonesian people.

Objective

Provide donors with the latest news (campaign updates) to make their donation experience more emotionally engaging and increase retention rates.

Target Users

• Gender: Male or Female.
• Age: 25–35 years old.
• Profession: Unspecified.
• Domiciled: Indonesia.
• Have the ability to speak Indonesian as a primary language.
• Have a good level of understanding of technology.
• Have an interest in making a donation.

Team Roles

My role as UI/UX Designer in collaboration with Gga.porto, Giosanera, Safitri Herdian R Safitri Herdian R, Ahmad Irsyad Hidayatulloh. We brainstormed the flow and designed wireframes, prototypes, and usability testing.

Design Process

Design thinking methods are used in the design process to meet requirements or specifications. The design thinking process can be seen as shown below.

Empathize

We start from empathize, we use the user's point of view to find out the problem and the user’s need. we conducted observations about competitor analysis, and feedback users and explore challenge partners from Kitabisa.

Define

We define the core of the problem by putting together all the information with sticky notes and analyzing it to make Pain Points.

Here is the problem we have found :

1. Provide the latest news that can have an emotional effect on donors.
2. The homepage makes it confusing to donate
3. There are still no update details after the donated funds are given to people who need funds
4. Eliminated Minimum Donation
5. Add back the prayer feature that previously existed
6. Provides and makes it easier to find information about campaign updates.
7. Can’t give a personal message to the desired donor
8. The transaction of withdrawing money from the donation bag to the account is too high
9. There is no payment by digital bank method yet

How Might We
After making Paint Points, next We brainstormed How Might We to solve the problem.

And this we got for How-Might We:

• Update on details of incoming and outgoing funds to donors.
• Presentation of donations can be in the form of images and text so that donors feel the emotions of the recipient of the donation.
• Fundraisers can give thanks or other personal messages to donors.

Ideate

After We got How-Might We, we shared, grouped, and prioritize ideas about solutions that can solve problems.

These are the solution idea we got :

• Upload video/gif feature for fundraisers.
• Upload multiple Image features for the image slider on the Fundraising view.
• Personal Message to Donors.
• Thanks Card for donors
• Donation progress updates
• Transparency feature
• The Fundraising view contains images, videos, and text.

And this is the result of grouping solution ideas that have a similar feature

Prioritization Idea

Then we prioritize solution ideas in a diagram to prioritize the ideas we want to Solve first based on value and effort.

Yes, Do it Now :

• Personal Message to Donors
• Thanks Card for donors

Do Next

• Donation progress updates

Do Later

• Upload video/gif feature for fundraisers.
• Upload multiple Image features for the image slider on the Fundraising view.
• The Fundraising view contains images, videos, and text.

Do Last

• Transparency feature

Prototype

In the prototype stage, we created a user flow using the features of the prioritized idea solution.

Wireframe

At the wireframe stage, we created a low-fidelity (Lo-Fi) Interface for Kitabisa Apps

Next, We created Design System for efficiency in high-fidelity user interface (UI) creation.

High Fidelity Prototype

In High Fidelity, all the User Interface that has been created are connected to each other and can be tested.

And here is the final of our prototype

Testing

After creating a high-fidelity prototype, we conducted research to test the Kitabisa application prototype that had been made for users. We used Single Ease Question and survey. From the results of this study, we will evaluate whether the application we have created has achieved its goal, which is to provide donors with updates (campaign updates) to make their donation experience more emotionally engaging and increase retention rates.

Stimulus Research
Our group first determines who is the criteria for usability testing, creates a list of questions, and creates tasks for usability testing.

Criteria for Responden

1. 18–35 years old
2. Gender female and male
3. Any job is not specific
4. Domiciled throughout Indonesia
5. The primary language is Indonesian.
6. Have a good level of understanding of technology

List Of Questions

1. Have you ever made a donation? Especially online donation
    — If yes, what application do you use? Why?
    — If not, why?
2. Do you know the Kitabisa.com application?
3. Have you ever donated to the Kitabisa.com application? Explain why!
4. What features do you want to include in Kitabisa.com?
5. What do you like and dislike about Kitabisa.com?
6. In your opinion, how important is it to be able to see transparency in the use of fees when making donations? Why?
7. What feedback would you like to get when you donate?

Usability Testing
In Usability Testing this time we have 5 Tasks. Our respondents were asked to fill in based on their experience of exploring the prototype that we made. In the end, we will provide an ease scale of 1–7 or the Single Ease Question (SEQ) method.

RESULT

The number of usability testing participants was 7 people. Before doing usability testing, users are first asked to answer a list of questions.

Overall, here is how easy the task was according to respondents on a scale of 1 (very difficult) –7 (very easy):

Feedback from Users :

1. Login improvement, by providing the option of SSO (single sign-on) Facebook, Gmail account, or phone number
2. Payment Flow is not final
3. It’s pretty good, maybe you can give pictures, videos, emojis, or something else so that the text isn’t too monotonous

Conclusion

5 out of 7 respondents gave a scale of 6 and the other 2 gave a scale of 3. And 2 respondents who gave a rating of 3, were respondents who were not familiar with Kitabisa.

From the results of our research, there are still several features that can be developed better to increase the emotionality of the donors. Especially to improve the login page and provide images, videos, emojis, or others so that they are not too monotonous

Introduction

Hi, I am Refsam Maulana. Recently, I and Ilham Pratama Redesigned an educational community website called Teras Cerdas.

About Teras Cerdas

Teras Cerdas is a community that is engaged in alternative education for marginalized children who live in Pasar Induk Kramat Jati area. Teras Cerdas was initiated with the idea that learning can be anywhere and learning is a reciprocal process. For Teras Cerdas, this universe is a school and everyone is a teacher. We believe that the ideal learning activity is an equal knowledge sharing activity between the teacher and the learner. Therefore, the concept of learning at Teras Cerdas is considered as a learning process together.

Background

Every year Teras Cerdas is looking for volunteers who want to join to be a part of Teras Cerdas. Teras Cerdas has a website that is used to provide the latest information, programs, registration and is also used to attract volunteers to register and join. The features that Teras Cerdas want to have on the website is the volunteer registration feature, which is a feature that can be used by prospective volunteers to be able to register directly through the Teras Cerdas website. The book & money donation feature, which is a feature for donatur who want to donate books and/or money for Teras Cerdas. And reports on donations & learning activities, namely the transparency feature of donations and student learning progress for 1 batch.

Objective

• Knowing the suitability of the design with user needs
• To find out user behavior in donating.

Team Roles

In collaboration with Ilham Pratama, we brainstormed the flow and designing wireframes and prototype in Figma with using design thinking method.

Design process

Design thinking methods are used in the design process to meet requirements or specifications. The design thinking process can be seen as shown below.

Empathize

At the empathize, we find out the user’s point of view and needs with research before defining the problem statement and doing ideation. We conducted interviews with Teras Cerdas volunteers and volunteers candidate who have opened a Teras Cerdas website to find out the point of view and needs of the Teras Cerdas website.

Define

At the define, we define the core of the problem by putting together all the information with sticky notes and analyzing it.

Based on the problem we got, we then asked the question how might we solve them.

Ideate

The core of the problem is apparent, now at the ideate stage, we discuss solution idea to solve the problem

Because there are no solution ideas that can be grouped, next we prioritize solution ideas based on user value and effort.

Prototyping

we made a donation flow diagram consisting of book donations and money based on the Teras Cerdas experience of receiving donations

Wireframe

At the wireframe stage, we created a low-fidelity (Lo-Fi) Interface for the Teras Cerdas website. The wireframes that have been created consists of the Beranda, Tentang kami, Donasi, dan Laporan.

UI Mockup

After going through the user flow and wireframe stages, we created a UI mockup design. The UI Design Mockup is a pre-built high fidelity wireframe. Here’s a look at the mockup our team has created:

Testing

After creating a prototype, we testing to test the Teras Cerdas users. We used Single Ease Question and survey.

Stimulus Research
Our group first determines who is the criteria for usability testing, creates a list of questions, and creates tasks for usability testing.

Criteria for Responden

1. 18–40 years old
2. Gender female and male
3. Have ever been a Teras Cerdas volunteer or have ever been registered as a volunteer.

List Of Questions

1. Who are you? Choose one!
   Former Teras Cerdas Volunteer
   Ever Registered as a Teras Cerdas Volunteer
   Don’t know about Teras Cerdas
2. How does the Teras Cerdas website redesign look like?
3. Overall, how much value do you give to the appearance of a Teras Cerdas website redesign?
4. Are there any problems during the Book/Money Donation?
   Does the information for making a donation meet the user’s needs? If not, why?
5. Do you have any suggestions or criticisms for the Book/Money Donation Page?
6. Are you having trouble seeing the report of learning activities/donations?
7. Is the information contained in the learning activity reports and donations correct? If not, why?
8. Do you have any suggestions or criticisms for the Learning and Donation Report Page?

Usability Testing
In Usability Testing we have 4 Tasks for our target respondents.