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

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

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.

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
  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

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.

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.

  • 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

User Needs, Goals, and Opportunities

First persona: Generous George, our donor
Second persona: Helpful hanna, our volunteer
  • 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?
  • How might we create solution(s) that help attract and engage new volunteers like Hanna to increase the impact of our initiatives?
A Lean UX Canvas to guide my survey questions and keep me focused on the topic.
  • 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?
Survey results
  • 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.
Updated persona of George from survey results.
Updated persona of Hanna from survey results.
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.

George’s Value Proposition Canvas
Hanna’s Value Proposition Canvas
Effect/Impact Scale
  • 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.

Dos:

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

Don’ts:

Buttons that are important are not clearly highlighted

  • 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

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.
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
Current sitemap
Closed card sorting
New information architecture to flow like a story

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store