Dapur Berkah — Food Charity Website Case Study
Dapur Berkah is a food charity that regularly distributes free lunches 4–6 times a week, on 6 permanent locations.
Donors’ contribution is essential as the foundation keeps growing. The minimum donation is set at Rp10.000 for each meal, which helps both free meal recipient and supplier (cooks). In just two years it has distributed 95.000 free meals.
The previous template-built website struggled to portray the innovative, fun undertone of the site, and most importantly direct donation link. There were more fresh programs invented during the design process as a clearer unique character of the foundation was formed. Such flow rises content ideation tasks during the early design map out.
Based on the initial aim and research collected from people, there are three things to focus on:
- Increases donation
- Amplify unique selling point: food distribution on a regular basis
- Inform on the benefit of regular food charity, which is still rare in Indonesia
My role
Research, design, and content ideation.
I liaised with the marketing person for content suggestions and worked closely with one developer.
Period
Design: Early July — late August 2020 (2 months).
Development: Early September — late December 2020 (4 months).
The website is live starting on 19th December 2020, which can be seen at www.dapurberkah.com
Process
Desk Research and survey distribution —> Site mapping —> Mid fidelity prototype
I began with desk research on other charity website both national and international, as I distributed the survey to 80% Millenials out of a total of 60 respondents. It helps with content ideation knowing the credibility and how food charity is taken in the perspective of users. This research and ideation are done along with the site architecture process.
Finding
- Most acknowledge food charity’s importance because it is a primary need and its simple physical makes for easier verification.
- Website is an important entry point for a public’s trust about a foundation, regardless of popularity.
- Most use crowdfunding because of the easy ATM payment and its verification
- People still trust smaller charity websites as long as there is enough documentation to verify. Pictures and numbers are important.
Middle Fidelity Prototype
Solution
Prototype — user test — iterate (design)
We conducted a user-test to 5 people to walk through the 75% completed prototype to cover not only usability but also content comprehension (text, picture).
User Test Method
The user-test process consists of :
~5 minutes brief background introduction
~10 minutes whole site walkthrough (First impression and credibility)
~30 minutes of feature/section locating 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 to spot and navigate to donate. The former sliding donation tool is scrapped off because dragging is not as convenient and controllable and might confuse if manual insert box is also put together.
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 yearly but also monthly progress. The team profile is elaborate and uses real photos.
They prove to be the first go-to pages when users measure foundation’s accountability.
2.b. Field documentation
Photos spread on the sites to give a clearer idea of the field situation. Selected interviews were displayed.
2 out of 4 mentioned the need for more pictures.
3. Clarity of the foundation
Succinct program elaboration is as important as reading a product label so that users can assess which program suits personal calling.
One experience that annoys users with multiple program pages, is the number of clicks back and forth to check programs. Between the dropdown menu and clickable program overview, I chose the latter. The program title is a little foreign for first time user and drop-down text made users wonder what they are going to click. To not make users click so much I counter that with sub-tabs for every subprogram.
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 donation is still heavily linked with emergency aid rather than a regular need, the impact is not as realized. 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, I made the “Why” button that can be divided into two, why food and why Dapur Berkah, split as each can generate more information later on. Illustration makes dry numbers digestible.
Users tested go to this page when asked to understand better about Dapur Berkah.
Extra and accent
Rp10.000 is equivalent to one free meal distributed. To show that giving is simple and easy, this section shows how menial purchases can translate into amount of meals donated.
The test also shows lists of potentially misleading term, which is very helpful.
Lessons learned
I encountered difficulty on the asset hand-off, as the Adobe XD link gives unmatched asset size. It turned out to be oddly common across the XD users, as shown on the adobe forum. But it could be resolved at the end.
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.
