Redesigning a charity’s website using the Lean UX approach (Part Two)

Interdependent planes that rely on each other to succeed.

Fourth Plane: Skeleton

The skeleton plane refers to the arrangement of elements for maximum effect and efficiency.

  • Do less yet create more value
  • Consistent yet bold
  • Be transparent when it comes to content
  • Accessible to different user groups
Userflow Diagram
  • if the charity’s values are aligned to theirs by showing prominently on the homepage.
  • if the forms can be simplified with lesser steps to keep them motivated to take action.
Menu examples from charity websites
  • Carousel
    Based on my research on the usability of carousels, there is a high click rate on the first item and users were quickly brought to the clicked page without having to read the homepage. This could potentially change the perception of the charity the user had in their mind. What I would suggest is either a Hero image or a video and the later is a better option as Food from the Heart produces video content frequently.
Evaluation on Homepage
  • Donation section
    It quickly stood out to me that Food from the Heart lacks a section that allow users to make quick donations with pre-determined amounts like many charity websites do. I would suggest to include this section onto the homepage as it creates an impression on the user without clicking on “Donate”. This can be easily implemented as Food from the Heart uses Stripe to manage payment processing.
  • About us
    Even though Food from the Heart attempts to describe their charity as much as possible, and they covered many important information, users only have a few seconds to glance through and one could imagine how much scrolling one has to do on their mobile. I would suggest to only show their mission and values, while other sections can describe in detail.
Evaluation on Donation page
  • Donation
    It was a poor choice to utilise yellow on white background. Using a Web Accessibility Contrast Checker showed that it received a “Failed” score of 1.45:1 when the required ratio for WCAG 2.0 level AA is at least 4.5:1 for normal text. It was a huge difference! I suggest to refrain from using yellow as a font colour unless it’s a dark background.
  • Progress
    The main concern of this page is the use of a progress element when it’s really a menu of roles. This could be optimised by introducing an accordion of job roles without user thinking they are on a different page.
Wireframe

Fifth Plane: Sensory

The sensory plane refers to the visual appearance of content and controls, which gives a clue of what user can do with them.

Creating colours with good contrast
Creating font sizes

Design

Leading users to understand the charity better

In order to immediately catch the attention of the donors and volunteers, I placed a video hero with the mission as the first thing they would see. Followed by the video is a short paragraph about the values and impact of the charity. Users will then be presented with the descriptions of how the programmes helped achieve the numbers. It would make it easier for donors and volunteers to understand the charity— bridging both the charity and user needs.

Homepage design
Donation page — first step
Donation page — second step
Donation page — third step
Volunteer Sign Up Information
Volunteer Sign up Popup Form

Reflection

With that, we have come to the end of my first lean UX case study of redesigning a charity website. The next steps for this project is to test with different user groups to validate my assumptions!

--

--

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