Dapur Berkah — Food Charity Website Case Study
Tags: Website Design, Ux Ui Product Designer, UX Design, Website, UX

Solution

Prototype — user test — iterate (design)

We conducted a user-test for 5 people to experience the 75% done prototype. The reason being is to dig out input that not only covers the usability, effectiveness but also understanding of content (text, picture) which were done towards the end. But I left room for iteration.

User Test Method

The user-test process consists of 5 minutes brief background introduction — 10 minutes site exploration walkthrough(impression and trustworthiness) — 30 minutes of feature/section spotting walkthrough with specific instruction — 5 minutes post-test (rate on ease of use, information testing, and program preference)

The pictures below are taken from the live site, which appears similar to the final prototype.

1. Main Task easy navigation — Donate

The donation button needs to stand out.

The test proves easy spotting and navigation to donate. The previous sliding donation amount tool is scrapped off for giving lesser control over the number aimed compared to conventional manual insert number.

Before (from prototype)

After (live site)

2. The element of trust:

2.a. Data

Data transparency such as financial reports and statistical progress are made prominent on the main tab menu. Users can track not only the yearly but monthly progress. The team profile is elaborate and uses real pictures for accountability.

They prove to be the first go-to pages when users were asked to bet on the foundation’s accountability.

2.b. Field documentation

In-field people photos populate the site to give a clearer idea of the field situation. Selected interviews with beneficiaries and donors were put with links to channels with more dynamic documentation.

Despite having had photo sessions, 2 out of 4 mentioned the need for more so after selection we added more.

3. Clarity of the foundation

Succinct program elaboration is as important as reading a product label before purchase so that users can assess which program suits their personal calling.

One experience that annoys people with multiple program pages, is the number of clicks needed to go back and forth. Between the dropdown menu and clickable program section, I chose the latter. The program title is a little quirky and not as well known for first time user. Drop-down made users wonder what they are going to click, as opposed to laying them on the program with heavier affinity with the pictures. To not make users click so much I counter that with sub-tabs for every subprogram.

To my observation, users use them sometimes to shift from one program to the other, but their safe bet is to click on the program.

4. Effect in society

As food aid is still heavily associated with an emergency rather than a regular need, the impact is not as well-aware. This site makes the connection clearer: Regular free meal for informal workers allows them to spare more.

The beneficiaries shared their background and perspective on lunch expense and how it helps, and I placed the sliding conversation on the home page.

Aside from 10 testimony on home pages that covers beneficiaries’ story and spared expense, I made the “Why” button that can be divided into two, why food and why Dapur Berkah. I split them as each can generate more information later on. A lot of illustrations meant to turn dry numbers more digestible.

Users tested go to this page when asked to understand better about Dapur Berkah.

How Rp10.000 helps

What can the sum of spared money be allocated into?

Why not help in cash?

Extra and accent

Rp10.000 is equivalent to one free meal distributed. We wanted to emphasize that being charitable is simple and easy, so I made this section to show expense comparison with a menial purchase that could translate into free meal donated.

Design aside, the test also shows lists of potentially misleading wording, which is very helpful.

Lessons learned

I encountered difficulty on the asset hand-off, as the Adobe XD the link gives unmatched asset size to what appears on the developer builds. It turned out to be oddly common across the XD users, as shown on the adobe forum. I was lucky I had a chance to work with a patient and big-time learner developer that understands my first-time role here, as he himself encountered technical restraint to solve, as this project was entirely built from the scratch and it was new for both him and me. I resort to using Figma next time.

There were a couple of ideas dear to stakeholder and designer that has to be scrapped off upon poor test result. It was good learning to stay objective and see the bigger picture.

I also learned that clear communication and promptness to do so is a crucial thing, as the late address of matters could potentially snowball into an inefficient loop of work on both sides.