A Lean UX Case Study: Redesigning a Charity’s Website (Part 1 of 2)

16 min readNov 30, 2020

This article documents (Part 1 of 2) the journey Janet Lim and I undertook to improve a charity’s website, Free Food For All. We have framed this using Jesse Garrett’s 5 Planes of Content Strategy which we used to address the design challenges presented by their website (ie product in question) and processes that led us to some proposed designs and features.

01 | About “Free Food For All”

Free Food For All (FFFA) aims to alleviate hunger and help those in distress. While helping the disadvantaged, FFFA also aims to minimise food waste through its various initiatives, empower its beneficiaries, practice community building and manufacture healthier meals. Find out how it started from the words of the founder, Mr Nizar Shariff.

Free food for the community, by the community (Video by OurBetterWorld.Org)

…Every day I am given the gift of waking up I feel that there must be something that I can do to serve humanity.
— Nizar Shariff, FFFA Founder

02 | The Design Challenge & Approach

It is essential to create a user experience that differentiates the company from its competitors, and it is user experience that determines whether your customer will ever come back.
– The Elements of User Experience by Jesse James Garrett

The challenge was to redesign the website for Free Food for Singapore (FFFA) and our aim at the end of this process was to establish Product-Market Fit. We articulated how we applied the first three planes of content strategy focusing on:

Strategy (Defining the business & user goals and where they overlap is UX)
Scope (Focus on content requirements like the content that lives inside products)
Structure (Defines the patterns and sequences in which experience are presented to users)

Applying a Lean UX Approach — (1) Through tabletop research, we understand the business better, the users and use these to form assumptions to create our hypotheses. (2) We test these assumptions with real users and then (3) ideate/solution and prioritising what we needs to be done starting with solutions that will significantly shift the delta.

We wanted to validate these assumptions and reached out to Mr Nizar Shariff (the founder) to confirm our findings but our calls were unanswered so we relied on what we could find online such as articles, annual reports etc — looking our for past approaches, current attempts and some inkling of future directives which the charity may be moving towards.

03 | Applying Plane #1 — The Strategy (ie The Why)

The Strategy Plane is where most of the critical thinking takes place. On this plane, the way to create a user experience experience the website is through two areas:

Product Objectives — We used the Business Model Canvas as a backdrop to understand the value proposition of the website
Establishing User Needs — We approached this by developing a proto-persona first and then validating our assumptions by sending out a survey.

FFFA’s Business Model Canvas

The Alex Osterwalder’s Business Model Canvas (BMC) is a business tool used to visualise building blocks critical to sustaining and/or starting a business, including customers, route to market, value proposition and finance. This was applying in our research for FFFA below as captured below.

Click here to view the expanded version on our Miro Board

We were cognisant to note that within each block, there were further segmentations and it was critical to look at this through the lens of a business owner and dig deeper to understand that even blocks like customers does not necessarily refer to the end users.

In summary here were our findings under the 3 sections of its BMC:

(1) Desirability

Customer Segments — There were three groups of customers. The first two segments the types of beneficiaries. (1) The systemically vulnerable (eg the poor, seniors with no support, the aged and differently-abled) (2) These are those who need temporary support and are not on the scheme for long (eg: the jobless and injured migrant workers). And this large segment are considered customers as their positive experience in working with the organisation would also mean ‘more revenues’ for FFFA in the future.
Value Propositions — FFFA’s value proposition offers (1) Value for its clients through hope, dignity and assured access to food (2) Solving the pain point for those in need to secure meals for their families sustainably and (3) Bundled products and services such as food deliveries, breakfast for children, dinner for families and reinforcing community efforts.
Channels— (1) For Above-The-Line Channels, we noted that charity do conduct their appeal via mainstream media like radio and newspaper features. (2) For Below-The-Line Channels, FFFA has actively engaged communities through events, engagements with the mosque which was the founder’s main access and (3) targeted EDM to spread the word of the organisation.
Customer Relationships — They mainly engage (1) their primary customers who are their beneficiaries of the association and create a protective space of trust and respect through continued support. (2) For their secondary consumers, the relationship is based on mutual trust and reliability.

(2) Feasibility

Key Resources — In terms of (1) physical resources — they rely on space for storage and packaging, corporate kitchens for NEA-approved cooking if any, manpower through volunteers and financial support. The other was (2) legal resources which operating charities and reporting funds in alignment to the Charities Act.
Key Activities— FFFA was mainly involved in (1) coordinating food deliveries, (2) managing volunteers& donations, and (3) canvassing and onboarding sponsors and partners.
Key Partners— There were main three groups of partners (1) Food distributors which were organisations that contribute (halal) food for distribution or kitchen services. (2) There Social Organisations which FFFA tied up with to have access to the databases of those who need their help and (3) Sponsors whose donations in-kind or monies have sustained the organisation.

(3) Viability

Revenue Streams — (1) Donations in-kind through provision of services and facilities access (2) Donation of time through volunteerism (3) Monetary donations through ‘Give.Asia’ or ‘Deeda Care’ or purchase of food vouchers for ‘rough sleepers’
Cost Structure — There are (1) Sunk costs such as rental and electrical bulls, (2) Recurring costs such as vehicle maintenance (used for vehicle deliveries) and auditors (3) Costs when needed such as additional food supplies and payment of sub-contractors.

In its immediate operating environment, we found that FFFA’s operating model showed that:

It operates on a model of “for the community, by the community” model which uses complementing charities and social organisations to support its work.
It does not aim to compete with organisations for a ‘slice of the pie’ on the “Food Distribution” group of charities. Rather it has a tight collaborative model with other charities.
Within this group of charities, its unique selling point is the ‘community fridge’ under blocks.
Its competition comes from organisations that have a different target group with different beneficiaries who also seek the donors’ monies.

Evaluation of FFFA’s Perceived Operating Model

There’s a gap for FFFA to fill

FFFA has had received much attention in the past year in its efforts to help those in need including rough sleepers in the time of the Circuit Breaker. The charity has been delivering food to almost 1,000 household which was about five times the usual pre-covid.

Their programmes and missions are heartfelt. It is clear that its challenge is attracting donors, explore programmes meaningfully and duly contribute via the many suggested streams.

In a 2018 paper on food insecurity, researchers from the Lien Centre for Social Innovation found that more than half of the 44 severely food-insecure households interviewed had infrequent or no food support at all — which suggests inefficiencies in the charitable food support eco-system.

There was also a market gap which FFFA could fill especially for those — validating their continued purpose. The website is their only platform to attract and channel donors to contribute and share through their personal mediums to increase awareness of its mission and convert those footfall into participating donors.

Our Assumptions about FFFA’s Website

Through the Business Model Canvas, we formed some assumption about the business and subsequently these helped us developed our Proto Persona and gave a backdrop in developing our survey to validate the findings between assumed Product — Market Fit.

Here were our assumptions:

We believed that donors have a need to help others which can be solved with providing donors an accessible platform to assess the charity and donate conveniently.
Donors are usually ‘stable individuals’ who can contributes and they seek self-actualisation through volunteering time or providing monetary support.
The charity will meet its objectives if it can engage these individuals amidst the primary market of growing charity organisations in Singapore.
The primary competition in the market will be other charities who have a different cause that does not have a complementary cause.
We will stand out (in the market) by engaging donors in their own community.
The biggest risk to FFFA is bad publicity & economy downturns.
We will solve this through active canvassing of funds through digital engagements.

Defining User Needs

We began by forming our assumption of who the target users would generally be. We noted that the founder often collaborated with local communities, reaching out to many working adults — hence the profile of our persona.

(1) Establishing assumptions about Users (using a ‘Proto-Persona’)

(2) Validating assumptions

To validate our assumptions, we pushed out a survey using SurveyMonkey.

Approach: Lean Canvas Survey
Medium: Randomised Survey
Purpose: (1) Uncover behaviours and motivations behind act of donation (2) Gain some feedback on FFFA’s website and approach from donor’s perspective
Questions: We asked a total of 10 questions such as (1) What matters to you when choosing a charity to donate to? (2) How do you prefer to learn more about the charities and their cause(s)? (3) Based on your initial thoughts of FFFA, please rank the areas for improvement.(4) How would you like to indicate your interest in donating to a charity?

From the survey ran, we received 39 responses and here was what we uncovered.

From the results, sense-making was done and the following were the prevalent points.

(3) Revised Persona & Reframing Challenges into Opportunities

From these findings, we reviewed and revised our persona and considered the pain points/challenges raised which were reframed as opportunities.

Establishing objectives of FFFA’s website

The primary business goals was to use their website to:

Increase of awareness of FFFA so donations can come in.
Show that the business is well-known and legitimate with links to press.
Attract donors and volunteers — the former being most important.

It was clear that the charity chose the website as a medium to attract traffic from interested donors (be it from their Instagram or Facebook) by increasing public awareness and increase donor conversion rates.

My main takeaway from this plane is the incisive need to document everything so we find validations in our findings as information gathered at this stage will create the start state from which we begin drafting business plans and serve as checks against our subsequent proposed redesigns.

04| Applying Plane #2 — The Scope (ie The What)

Strategy becomes Scope when the user needs and business objectives are translated into a set of requirements for functionality and content. Here we ask “What do we need to build?” to meet the objectives set out in the strategy.

Value Proposition Canvas (Market-Product Fit)

We know that once we have comprehended FFFA’s business goals and the needs of the users they are targeting, we should frame our thoughts on what will achieve the Product (ie FFFA’s website)- Market Fit. This was essential before jumping into any form of ‘solutioning’.

We used the Value Proposition Canvas to establish the fit and gaps in the market-product fit. From this we uncovered that:

Follow-up via the website was important and required by the donor — establish the feel good factor that the donor sought.
There was a need to highlight the charity’s mission and easily find out about the causes with attached call to actions as this was something the user can’t uncover easily.

Our Hypothesis Statements (Lean UX approach)

With the fit made clearer, here are our hypotheses — each relating back to the established objectives above.

Objective 1: Increasing awareness so donations can come in

We believe FFFA can increase awareness if Johan can feel confident in contributing if he knows how beneficiaries have been positively impacted by the help of others who have contributed through FFFA.
We believe FFFA can increase awareness if Johan is able to view which causes need his attention and assistance.
We believe FFFA can increase awareness if Johan is able to conveniently share selected campaign with similar users in his social circle.

Objective 2: Show that the business is well-known and is legitimate in its cause

We believe FFFA can prove its legitimacy by providing Johan clear access to find its IPC number within the website.
We believe FFFA can prove its legitimacy by showing Johan its latest press coverage (so he will know how recent they were covered and not have Johan scroll through several pages).
We believe FFFA can be prove that its cause is part of a larger movement in Singapore (eg: Kindness Movement etc).

Objective 3: To attract donors and volunteers — the former being most important

We believe FFFA can attract donors if stories of beneficiaries who have benefited can be featured prominently (changing where possible) so the cause is made personal/ real and Johan can be intrinsically motivated to donate.
We believe FFFA can attract donors if Johan is aware of how his donations can positive impact the cause.
We believe FFFA can attract (repeated) donors and motivate Johan to continue supporting if he receives a follow up on where and how his donations have been channelled.
We believe FFFA can attract donors like Johan if their mission is revised to reflect how the call-to-action can benefit society.

Prioritising Features using a MoSCow Matrix

We then considered our desired features and translated the importance of our desired features into user stories, ranking them according to the MoSCoW’s four buckets of priorities.

My main takeaway from this plane is to ensure that our all stakeholders are singing to the same tune — product owners, developers etc. This process has helped us define exactly what is functionality and content is required for FFFA. It also served as a check-and-balance when we are revising the site subsequently.

05| Applying Plane #3 — The Structure (ie The How)

The Scope is given Structure when we define how the website responds to users’ interactions. On this plane, there are two areas of interests — Information Architecture and Interaction Design.

Information Architecture

I suggest starting with Information Architecture as this is how the website user moves from one step to another and this advises how the Interaction Design can be applied.

(1) Content Inventory & Content Audit

We visited every page, sub-pages and every link and we concluded that:

Depth & Breadth of Content — The organisation had attempted to embed every bit of information and press clippings they had. It was definitely very length and probably not archived though organised based on their current headers/sub-headers.
Quality of Content — Each page however had a myriad of information that would have otherwise targeted different groups of people. This is important because quality content will attract the right users, engage them and provide a clear call to action.
Other Areas — Language was kept plain and colours did not have significance — applied when convenient. There were also many subpages of content.

You can view content inventory for FFFA’s website here. We used this to evaluate what we can keep, update or remove.

(2) Content Framing

We focused on the homepage since that was the first thing that users see and if attracting users was key, the importance was placed on the homepage.

(3) Card Sorting & NEW Information Architecture

Using OptimalSort online, Janet Lim facilitated an open card sorting remotely using keywords and headers. Following are the results.

With this, we reviewed the results and some of the changes we considered to make were:

The Homepage could be succinct and more impactful in communicating their intent.
Much information under “About Us” can be grouped and ordered meaningfully.
Archiving is needed for the ‘News’ page and categorisation according to year of publication.
The eventual website ‘breadcrumbs’ can be improved.

We also looked at how we can improve the content architecture and proposed the following.

Interaction Design

This is how the user moves from one content element to the next. Here we conducted a website audit according to the five principles of interaction design and the following to consider when redesigning FFFA’s website

#1 WORDS + #2 VISUAL REPRESENTATION — In the ‘News’ page which featured all the press coverage over the years were not clearly labelled — not indicating the type of media (ie video or article). There should also be some indication on the language used so any user need not click into links or articles they may not understand without translation. Copy should be kept simple with mentions of “simple act”, “instant gratification”, “help these samaritans/professionals”, and “YOU make the difference”.

#2 VISUAL REPRESENTATION—(1) There was no clear hierarchy on use of colours with random colours picked from the main logo. (2) The colour scheme also suggests a more ‘upbeat’ tone with light-hearted content. (3) There was also a severe lack of the powerful images that many charities put up to paint the plight of those in need and pusher for a faster call to action on the part of donors.

#3 PHYSICAL OBJECTS/ SPACES — There was a clear optimisation issue for viewing on some laptops.

This is what my team mate sees on her Safari (viewed from laptop)

#4 TIME — This was more of about finding the right time to target a certain group of users. The founder established strong connections to the Muslim community through his work with the mosque. He noted that more then 80% of those who reach out for help are Muslims (based on Suria’s News in Oct below) and in Islam there is an obligation during fasting month which is “Zakat Fidyah” — intended to help the poor through food or cash (PERFECT FOR FFFA!). Therefore we thought could use this website to attract Muslims to FFFA’s site to fulfil their obligatory ‘Zakat’ donations then. This however was not evident in FFFA’s website presently.

#5 BEHAVIOUR — Selected instagram posts were located at the bottom of the Home Page and this was unusual and not a common habit of users to scroll to the bottom to intuitively know the display was for instagram. Most organisations would provide a logo and a link out to their social media page.

My main takeaway from this plane is to reduce cognitive load where possible because if there is too much going on then our donors (ie main end users) will see stumbling blocks in their navigation through the FFFA website.

06 | Next Steps

You can check back in end Feb 2021 for Part 2 of the case study where we will cover the following. In the meantime here is a sneak peak of what we have prepared.

Explore Application of Plane #4: The Skeleton Plane

Forms the blueprint of the improved FFFA experience right before it takes final form.
This is made up of three parts, (1) interface design, (2) navigation design and (3) information design.

I pulled together some some references of sites that exemplified the features we wished to incorporate.

References of Charity Websites that have very good appeal

Janet Lim had done the mock-ups shown below as a sampler to some of the references pulled. You may visit her medium to find out more about her thought processes and intent.

Mock-ups designed by Janet as we explored some ideas

Explore Application Plane #5: The Surface Plane

This is where the content meets users’ senses — from copy to colour schemes and prompts.
This forms the finished product (ie website).

07 | References

CaliphFeed(2020). Nizar Shariff: Joy of giving, Shipping world & Empowering communities. Retrieved 20 Nov 2020 from https://caliphfeed.com/podcast/nizarshariff/

Enterprising Oxford (2020) Business Canvas Model. Retrieved 15 Nov 2020 from https://eship.ox.ac.uk/business-model-canvas-explained/

Free Food For All (2020). Main Page. Retrieved 9 Nov 2020 from https://www.freefood.org.sg/

Goh, C.T., Yip, C. & Tiah, C. (2020, Feb 23) Pulling together in creative ways, to better feed food insecure Singaporeans. Retrieved 10 Nov 2020 from https://www.channelnewsasia.com/news/cnainsider/food-insecurity-hunger-singapore-charity-donations-taskforce-12460350

Goh, T., Ang,P. & Menon, M. (2020, Aug 10). Retrieved 13 Nov 2020 from https://www.straitstimes.com/singapore/ndp-2020-no-sing-along-allowed-at-evening-show-but-singapore-spirit-still-soars

Hammid, W.R. (2020, Oct 16). Pengasas FFFA Nizar Shariff dinobat penerima Anugerah Sukarelawan & Kedermawanan Presiden. Retrieved 29 Nov 2020 from https://berita.mediacorp.sg/mobilem/singapura/pengasas-fffa-nizar-shariff-dinobat-penerima-anugerah/4523224.html

Kavanagh, M.(2020). Increase Charitable Donations with these 5 Words. Retrieved 28 Nov 2020 from https://www.classy.org/blog/increasing-charitable-donations-with-these-5-words/

Oz (2020). The 5 Planes of Content Strategy. Retrieved 24 Nov 2020 from https://ozchen.com/5-planes-content-strategy/

WCIC (2020) Create a User Experience that works with the 5ss. Retrieved 19 Nov 2020 from https://wcic.tech/create-a-user-experience-that-works-with-the-5ss/

Contributor:

Janet Lim(LinkedIn) (Medium Page)