Optimising a charity’s website using the Lean UX approach (Part One)

Clare Chia
13 min readNov 30, 2020


A school project for a charity’s website.

Food from the Heart is an independent non-profit organisation founded in 2003 that aims to feed the needy through its food distribution programmes. Their mission is to alleviate hunger and brighten the lives of those who are less fortunate. By partnering with corporations, they are able to reduce food wastage by distributing excess food items to the 44,600 beneficiaries in Singapore today.

Estimated figures before the pandemic.
Estimated figures during the pandemic.

During COVID-19, there has been an increase in people seeking help due to food insecurity reasons. Food from the Heart appeals for more cash donations from the public to help with the purchasing of food necessities and operation costs.

This project is an exploration on how one might be able to transform apathy to empathy through their website to drive up donations for Food from the Heart. With this new approach, my goal is to deliver something valuable to the supporters and turning them into advocates for the charity.


Food wastage is detrimental to society. Based on research, food waste is the third biggest emitter of greenhouse gases. It accelerates the impacts of climate change and causes biodiversity loss due to use of wild areas by farmers in search of fertile land. As someone who is passionate about food, it hurts to see people wasting food by over-ordering or restaurants preparing more than enough. Among the food charities in Singapore, Food from the Heart initiatives and values resonated with me the most because of their embrace of new technology to improve the efficiency of food distribution.

My role

As an independent role in this school project with time constraints, I will be using the Lean UX approach to bring you on a journey of creating and validating assumptions, discovering new insights to inform decisions and shaping the website based on the Five Planes of UX.

What are the Five Planes of UX?

The ‘Five Planes of UX’ is a framework for describing how a user experience can be designed in a conceptual method.

Interdependent planes that rely on each other to succeed.

This model breaks down into five interdependent planes resulting from a set of decisions and each plane is dissected into the functionality side and the information side. These decisions then build upon each other and influences all aspects of the user experience.

What about Lean UX?

Using the Five Planes as my model, Lean UX techniques can be applied to give the process a boost in speed and results. Lean UX is the practice of emphasising less on deliverables and having a greater focus on the actual experience being designed. In a fast-paced environment, traditional UX will need a faster way to get out “there” and Lean UX might just fit the job.

The Lean UX Cycle

Unlike traditional UX where user research takes up a huge amount of time to craft a “Gold medal” equivalent persona, Lean UX allows iterations to tweak a “Good enough” persona. This saves time to build a solution and get it tested.

Lean UX principles to remember:

  1. Moving from assumptions to clarity
  2. Outcomes, not output
  3. Removal of things that do not contribute to improved outcomes
  4. Shared understanding among team members
  5. Team collaboration
  6. Failure is acceptable

For this project, the assumptions about the charity and users will be formed based on the information I could gather and these will be validated and inform the decisions in the later planes.

Tools I used: Business Model Canvas, Lean Survey Canvas, Value Proposition Canvas, Card Sorting, and Miro.

UX Techniques: Business Analysis, Survey, Desk Research, Proto-persona, Information Architecture, Interaction Design

First Plane: Strategy

The Strategy plane concerns the five W’s — Who, What, Where, When and notably the Why. This plane is about defining both business and user goals and where they overlap with each other.

Defining the project using the big four assumptions

To begin, there is a need to identify the five W’s (Who, What, Where, When, and Why) of Food from the Heart through desk research on their website and annual report. Using the Business Model Canvas as a base with added definitions from the Charity Model Canvas, I was able to identify the activities they do, their audience segments, how Food from the Heart help and deliver their values to them.

Charity Model Canvas builds a picture of the organisation

Business Goals/Outcomes

Based on the five W’s identified in the canvas above, I filled in the answers to a business assumption exercise below.

1. I believe that my users have a need to
Understand how important their donation/volunteer is to us.

2. This need can be solved with
A redesign of the website with a focus on leading users to donation/volunteer pages

3. My initial users are
Supporters who would like to contribute to the charity

4. The #1 value a user wants to get out of my business/product is
Get more information on how they can contribute to our charity

5. The user can also get these additional benefits
Be part of our committed community who truly cares about our beneficiaries.

6. I will get more donations by
Increasing the number of monthly donors.

7. The primary competition in the market will be
Foodbank.sg, Willing Hearts

8. We differ from them because
We constantly strives to increase the nutritional values of our food packs
We collaborate with NTUC to collect packaging-damaged, near-expiry food items for distribution to reduce food wastage.

9. My biggest product risk is
#1.The potential donor does not perceive that the website provides enough value with the monthly subscription
#2. The potential volunteer does not perceive that the website is currently looking for volunteers

10. We will solve this through
Redesigning the web pages with compelling stories that leads up to the donation/volunteer process.

11. What assumptions does my business/product hold, that if proven wrong, could cause the business/product to fail?
#1. Potential donors will prefer to donate on the official site than on giving.sg
#2. One-time donors will transform into monthly donors if they are made aware of how the money will help beneficiaries.
#3. Volunteers are constantly finding for opportunities to contribute

Based on the model canvas and the assumption exercise, Food from the Heart primarily provide food packs to the beneficiaries, which requires cash and food donations. In order to sort the large number of food packs, they require help from volunteers. So these my first assumptions on their business goals are:

  • Increase monetary and food donations to fund Food from the Heart’s food distribution programmes.
  • Increase volunteer sign-ups through awareness of food insecurity in Singapore.
Now we have the business goals

Before diving into the user assumptions, there needs to be a concise description of the issues that need to be addressed. This would help me to understand the problem way before defining a potential solution. In the Lean UX book published by O’Reilly, there is a structured format to express a problem.

Problem Statement

[Our service/product] was designed to achieve [these goals]. We have observed that the product/service isn’t meeting [these goals], which is causing [this adverse effect] to our business[charity]. How might we improve [service/product] so that our customers are more successful based on [these measurable criteria]?

As this was hypothetical, I constructed the problem statement to guide me along the way:

With COVID-19 impacting the livelihood of many Singaporeans, there is an increase in people seeking help due to food insecurity. More donations and volunteers are now needed as the pandemic has greatly affected charities like Food from the Heart, which rely on donations and volunteers to operate smoothly. Food from the Heart website is an informational site to create awareness about the charity but it is not optimised to attract donors or volunteers.

Without adapting to the situation, this increases their risk of losing potential donors, volunteers and advocates. How might we create more compelling offerings on the website so that more supporters will transform apathy to empathy and contribute their means?

With a clear problem statement, it is time to identify the users that I will be focusing on.

User Needs, Goals, and Opportunities


In traditional UX practice, personas are backed by extensive user research. But in Lean UX, assumption first, validation next. Proto-personas can be created in a few hours based on best guesses of who is using the product and why.

Based on what I have so far, donors and volunteers are the two important groups of user who help Food from the Heart achieve what they have today.

First persona: Generous George, our donor
Second persona: Helpful hanna, our volunteer

Using the information, I then identified areas of opportunities that I believe will help achieve user and business goals.

Opportunities for Donors:

  • How might we transform one-time donors like George into regular or monthly donors to increase the monetary donations?
  • How might we create solution(s) to make George feel like his donation is deeply valued in our charity?

Opportunities for Volunteers:

  • How might we create solution(s) that help attract and engage new volunteers like Hanna to increase the impact of our initiatives?

With both personas assumed, I will need to validate them with real donors and volunteers by using a Lean UX Canvas. I invited 10 donors and 10 Volunteers to fill out a survey so that I can understand their motivation, needs, and pain points.

A Lean UX Canvas to guide my survey questions and keep me focused on the topic.

Here are some important questions:

  • Why do you choose to donate to or volunteer at a charity? Think about the last time you donated/volunteered.
  • How much of an impact do you feel your donation/volunteering has?
  • What might stop you from donating or volunteering again?
  • With COVID-19 restrictions going on, what are your thoughts on giving monthly?
  • What do you look out for on a charity’s website before deciding if you want to donate or volunteer?
  • How easy/difficult was the process of donating/signing up as a volunteer to your charity? What are some of the features you like/dislike?

The survey results were then collected and grouped on a Affinity Map for me to gain a better sense of the answers.

Survey results

Here are the insights that I’ve gathered:

  • Importance of transparency for donors
    By being transparent, charities are able to gain the trust of donors and are responsible with donations, thus encouraging donor loyalty.
  • Stories of beneficiaries gain empathy
    Testimonials from donors and volunteers, videos of beneficiaries, are great ways to gain empathy and trust that your charity will make an impact.
  • Supporters(Donors and Volunteers) are motivated by past experience with the charity
    Long term volunteers and donor-turned-volunteers are motivated to continue the support because of the positive experience they had with that charity. Being kind to a stranger has a positive effect- it makes you do it again.
  • Charity sites lack of sufficient information
    Supporters often find it hard to decide how they want to show their support as the information they needed were insufficient or difficult to locate.
  • Filling forms are painful
    Donors and volunteers felt frustrated with the length of forms sometimes.

Proto-personas are fluid artefacts. They take shape through constantly validating assumptions. With the insights that I gathered from the survey, I updated my proto-personas.

Updated persona of George from survey results.
Updated persona of Hanna from survey results.

With that, I moved on to the scope plane where I will have to identify the features based on the opportunities that I crafted in my personas.

Let’s find the middle ground between business goals and user needs.

Second Plane: Strategy

Scope Plane defines whether the functions and features are matched with the purpose of site.

Functional Specifications

Now that I have the business goals and identified the user needs and opportunities, I could come up with features on the site that could address them. To make sure they aligned with each other and achieve a Product-Market Fit, I placed the feature ideas on two Value Proposition Canvas.

A value proposition canvas felt like an extension to the business model canvas but I will be focusing on aligning the user needs and values delivered by business.

George’s Value Proposition Canvas
Hanna’s Value Proposition Canvas

Prioritising features is an important step when building any product. When comparing features with each other, one should consider not just the business-user benefits but also the cost of delivering that feature. Using the Effort/Impact Scale, I plotted the features against a vertical axis for impact (for both users and business), and horizontal axis for the cost of delivery. By doing this, I was able to prioritise the features based on the impact and the amount of effort required.

Effect/Impact Scale

In order to have proper hypothesis statements, I put all four assumptions together into sentences that will guide me through the rest of the project.

  • I believe Food from the Heart can gain more donations if George is able to know if the charity’s values are aligned to theirs by displaying it prominently on the homepage.
  • I believe Food from the Heart can gain more donations if George is made aware of the impact his donation can give to the beneficiaries regardless of sum.
  • I believe Food from the Heart can gain more donations if George can easily donate with a simplified form that motivates him in every step.
  • I believe Food from the Heart can gain more volunteers if Hanna is able to know if the charity’s values are aligned to theirs by displaying it prominently on the homepage.
  • I believe Food from the Heart can gain more volunteers if Hanna is made aware of the impact her participation can give to the beneficiaries.
  • I believe Food from the Heart can gain more volunteers if Hanna can easily sign-up with a simplified form that motivates her in every step.

Competitor Landscape

As a way to understand how competitors were doing with their website, some examples of dos and don’ts were selected. Competitive analysis helps me to understand and explore opportunities and gaps in the market.


Relevant Imagery and Content. Doesn’t feel cluttered and easy scrolling.

Menu is compact and understandable.


Buttons that are important are not clearly highlighted

Images that do not look like buttons

Content Requirements

Once I have the features that I want to build, it’s time for me to

look at what I will be working with by creating a content inventory. In my spreadsheet, I decide if I want to keep, update, or remove the content based on these four categories:

  • Functionality (If it is working or displaying properly)
  • Readability (The amount of white space and the aesthetics)
  • Usability (Structure and mobile-friendliness)
  • Relativity (If the content is engaging, relevant, and up-to-date)
Content inventory/audit


Moving on to the Structure plane, here we look at the interaction design and information architecture. Based on the Four Dimension of Interaction Design created by Gillian Crampton Smith and the Fifth Dimension by Kevin Silver, I highlighted what’s missing from their current site like:

  • Words that could persuade users to donate
    Words are powerful and greatly influences decisions. When comparing the tone of language between two sites, I would donate to the charity in the second frame.
Words that are able to influence, are missing.
  • Visuals that repeated on different pages
    Food from the Heart does it pretty well with imagery. However, some images were constantly repeated throughout the site and it might confuse users while navigating.
Repeated visuals
  • Hovering effects that does not work on mobile devices
    This has always been a known issue while designing for responsive websites. If an image changes while the mouse hovers, how will it react if there’s no hovering on mobile devices?
Hovering effect does not work on mobile devices

All these interaction audits reminds me of what I should or shouldn’t do in the new website. In order to set the stage for the next plane, which is the skeleton plane, I took a look at their current navigation and listed out all the pages.

Current sitemap

They looked cluttered, requires scrolling to see more menu items, which affects the interaction between the website and the user. Users might not be able to choose from the wide selection and causing them to not choose at all. In order to make it simple, I conducted a closed card sorting with 5 users.

Instead of open or hybrid card sorting where users can create categories, I wanted the users to rank and prioritise items from important to unimportant instead of creating new categories.

Closed card sorting

I gave them new categories and headers to move the links around. 3 out of 5 users moved similarly to what I had in mind so I will be testing the new menu for the Skeleton plane.

New information architecture to flow like a story

That concludes the part one of my journey to optimise a charity’s website.


Compared to the traditional Design Thinking which is time and cost consuming, using a Lean UX approach to test on product features can generate a lot of user feedback in a short time. This is my third attempt at creating survey questions so far and I really liked the idea of using a lean survey canvas to guide you in the right direction. It forces you to ask relevant questions that will be able to validate your assumptions. I look forward to part two of this project as I get to start optimising the content and design.

Part Two can be read here.



Clare Chia