Redesigning a charity’s website using the Lean UX approach (Part Two)
This is part two of my school project for a charity’s website.
You can read Part one here.
To recap, the ‘Five Planes of UX’ is a framework for describing how a user experience can be designed in a conceptual method.
In this article, I will be focusing on visualising my findings in the skeleton and surface planes.
Fourth Plane: Skeleton
The skeleton plane refers to the arrangement of elements for maximum effect and efficiency.
Before I start working on this plane, I wanted to give myself a set of principles to guide through the design process. This can help me to focus on what’s important to the charity right now.
Clare’s Four Principles for Food from the Heart
- Do less yet create more value
- Consistent yet bold
- Be transparent when it comes to content
- Accessible to different user groups
With that in mind, I crafted a userflow to imagine how users would navigate around the website. It took awhile to utilise a resource that allows you to create userflows without restrictions. I chose Miro in the end as it gives users the full control over their artboard sizes and layout.
While drawing up boxes and linking with arrows, I learnt that the direction is important. The flow should also maintain a direction and never head back. People in the team should be able to understand the flow just by looking at the diagram.
Previously I discovered that our personas, George and Hanna, would be more inclined to take action:
- 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.
With these in mind, I will be designing the two touch-points that George and Hanna will go through: (1) Landing Page (2) Donate Page (3) Volunteering Page.
To begin designing, I started looking at common design patterns among charity websites for elements that I could apply onto my own. As it’s a lean approach, I want to reduce the time needed to invent new things and also to keep the sense of familiarity users used to.
Navigation Design
Something I noticed on frequently updated charity websites was the order of menu items. In the past, “About us” was always the first on the list because of its importance. This thinking has since been shifted and a little background research on this resulted in the psychology term, “Serial-position effect” where users perceive the first and last item on any list as the most effective. This might be why many websites now place the important aspect they want their users to know as the first and last item on the menu.
When the sitemap was first crafted, the menu was sorted according to what I knew back then. It followed the common practice of Who > What > Why > When. There was nothing wrong with this pattern as users were familiar with this order. But since my goal is to optimise the website, it would be useful to understand how users perceive Food from the Heart if I were to place an emphasis on their impact to the society. A way to measure the efficiency of this change is to track user retention and how they navigate around the site using the new order. My proposed menu will now be:
Impact > Fundraising > Partners > News & Blog > About us > Get Involved
Based on the navigation design, I was able to move on to designing the information structure of these three pages.
Information Design
I took a full page screenshot of the three pages using my handy Fireshot chrome extension and laid out my evaluation by the side.
- 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.
- 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.
Next, I looked at their Donation page and listed out the issues and suggestions, keeping in mind my principles.
- 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.
Lastly, I looked at their volunteer sign up page to identify places of improvements.
- 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.
After analysing the three pages, It clearly shows that there is a need to create a style guide to prevent accessibility issues that may arise from bad practices.
Interface Design
Before creating a style guide, I needed to determine the feel that Food from the Heart exude. One place to understand the company better is through their annual report where it’s updated yearly. It tells the user or potential partners where the company is currently standing and how much of an impact they have made. The colours and tone of language inspired me with these:
Warm, Attractive, Impactful
With these three words, I expanded them using a thesaurus to give me more ideas on the direction I will be heading.
Warm (Sunny, Glowing, Friendly, Fresh, Lively, Loving)
Attractive (Beautiful, Engaging, Interesting, Inviting, Agreeable)
Impactful (Impressing, Effective, Affecting, Motivating, Emotional)
Creating the Wireframes
With the information that I have gathered, I sketched on papers to get an overall grasp of the length of page.
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 the Style Guide
Using Figma, I listed out all the colours from Food from the Heart’s website and annual report. I then tested the colours against black and white font colours to determine which ones are not a good pair and will cause accessibility issues. I also added functional colours for system messages as there are forms involved.
Once the colours are settled, I move on to selecting a good font face for Food from the Heart. Among a few san-serif options, I chose Open Sans for it’s legibility and rounded strokes that gave me the warm, attractive, and impactful feeling. The font sizes are then listed down based on best practices online for web and mobile sizing. By creating the font styles in Figma, I will be able to apply the styles easily to the content later.
For the visual elements, I compiled a board showing the basic ones that I will be using for the design. Yellow is consistently used as main and secondary visual elements to emphasise on the warm and attractive aspects.
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.
Once donors clicked on the Donate button, they will be brought to the donation page. I wanted to make the money donation process simpler for users that might not have a lot of time to get involved, but still want to contribute. I included suggested amounts George could donate. Additionally, I provided a the impact his donation would have. This will thus build clarity and trust between the charity and him.
Step One — How much would you like to donate today?
Step Two —Fill in your details
Enter address easily
Instead of typing the full address, users will only need to enter their postcode and the system will auto populate the fields. Users will only need to enter their unit number and confirm. This would greatly reduce misspelling entries and eradicate the need to remembering their full address.
Step Three — Your credit card details
Volunteering opportunities at a glance
Instead of having multiple pages to describe the roles and responsibilities of the positions, Hanna, my volunteer, will be able to find out the number of available roles instantly. If Hanna is hesistant, she can read on testimonials by previous volunteers below the page. This will motivate her to try it out and experience the same feeling as past participants.
A compact form for volunteering
Instead of filling up optional fields, Hanna will only need to provide basic contact information and available timing. This popup form will not be closed unless Hanna were to click on cancel or close. This will ensure her progress will not be erased on accident.
Mobile Responsive
Using the 4 column layout grid, I shifted the layout to fit nicely on mobile for users who are on-the-go. Instead of using a video background which requires data to download, I chose a simple yellow background to highlight their mission and donate button. I also made sure form fields are big enough to tap onto.
Try the desktop version here: https://qrgo.page.link/Dp4kC
Try the mobile version here: https://qrgo.page.link/zDjBC
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!
The greatest learning for me in this project is how assumptions are ok to utilise, we can always validate it and iterate. This shortens the time needed as compared to a traditional UX approach. This would probably be a better approach for companies that regularly pushes new updates.
Overall, I am glad I got to experience this whole process by myself as it allowed me to figure my way out given the strict timeline. I look forward to using this approach in a group setting where more ideas will be generated!