Optimising a charity’s website using the Lean UX approach (Part One)
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.
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.
Inspiration
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.
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.
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:
- Moving from assumptions to clarity
- Outcomes, not output
- Removal of things that do not contribute to improved outcomes
- Shared understanding among team members
- Team collaboration
- 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.
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.
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
Proto-Personas
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.
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.
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.
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.
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.
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.
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.
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.
Dos:
Relevant Imagery and Content. Doesn’t feel cluttered and easy scrolling.
Menu is compact and understandable.
Don’ts:
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)
Structure
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.
- 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.
- 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?
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.
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.
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.
That concludes the part one of my journey to optimise a charity’s website.
Learnings
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.