UX Researcher
UI/UX Designer
Figma
FigJam
Google Forms
Maze
3 weeks
This website redesign project is based on a design challenge by Joelle Phua.
Neighborhood Resource Center (NRC) is a non-profit educational and cultural center in Richmond, Virginia. They foster personal growth and community change in Greater Fulton and east Henrico County, an impoverished community in Richmond's east end. Their mission is to build relationships, share resources, and develop skills to enhance the lives of community members through their programs and partnerships.
Visitors of NRC's website have issues with understanding what the organisation does and how they can get involved. This means that visitors have difficulties finding appropriate information.
The website needs to appeal to potential donors and volunteers while ensuring ease of navigation for program participants that are less familiar with technology.
SUCCES METRICS
The redesign is limited to the home page due to time constraints.
If this was a real project, the success of this project would be tracked by monitoring:
- if the number of donors increases
- if the number of volunteers increases
However, as this is a case study, and these metrics cannot be measured, the following success metrics are being considered:
- clear articulation of organisation's mission, goals, and offer
- a home page that is easy to understand for both potential donors and volunteers
🔍 Primary Research 🔎
To get an overview of the current state, I first conducted an analysis of the existing home page based on the 10 Usability Heuristics (UH). To avoid personal bias, I additionally conducted a survey to gather feedback on the home page from other users.
🔑 Key Insight 01
Poor visual hierarchy & layout
It seems like the design does not follow many conventional standards which makes it difficult for users to navigate and scan information on the website (UH #4 Consistency and Standards). The overall design of the website is also very outdated and visually overwhelming (UH #8 Aesthetic and Minimalist Design). The responses of the survey also show that users are overwhelmed with the amount of text and the way information is presented. It is hard to grasp what certain sections should be about. Moreover, the structure of some pages are confusing, e.g. forms are placed before the information on what the form is about.
🔑 Key Insight 02
Unclear CTA & missing information
There are two buttons on the home page that say "donate now". However, they are not visibly styled and recognisable as clickable buttons. Therefore, it is hard for the user to spot where to take action (UH #6 Recognition rather than Recall). Furthermore, some of the button copies on are poorly worded so that they are misleading users, e.g. "Donate now" leads users to an information page only with no input form to actually donate, which is what users expected.
Moreover, there is no information on how to participate in programs and events. Even though there is a calculation for operating costs on the "About us" page, there is no information on the impact of a donation on the home page.
🔑 Key Insight 03
Pictures help users understand
The survey results show that pictures help users understand better what the organisation does. Especially, pictures of people from real events of the organisation are perceived very positively among users. Respondents state that such pictures convey the feeling of community and joint support. Moreover, pictures help illustrate what the programs are about.
🔍 Secondary Research 🔎
To gain an understanding of what a non-profit or charity website must contain, I conducted a competitor analysis of the websites of 3 major non-profit organisations in Austria: Caritas Austria, WWF Austria, and Flüchtlingsprojekt Ute Bock. I looked at their overall page structure, how they present their mission and purpose, and what they all have in common.
🔑 Key Insight 01
2 categories: how to support & who is supported
All of the three websites clearly have 2 main categories of information: First, how to support the organisation, which is aimed at potential donors and volunteers. Second, who is supported by our work. This type of information is aimed at either people who are in need of the provided services, if the organisation is targeted towards people that are seeking help. Or it is aimed at potential donors and contributors to give them more information on the impact of the organisation, such as in the case of WWF.
🔑 Key Insight 02
Multiple clear CTA buttons
All of the websites show multiple clear CTA buttons throughout their home pages. Especially, buttons at the very top and bottom of the pages are common among the different websites. All of the buttons are clearly recognisable as such, and have clear wording. To target potential donors as well as people who actively seek support, they have buttons with different wordings that speak to the target group.
🔑 Key Insight 03
Numbers on impact
To show the impact of their work, all of the organisations present some kind of numbers and facts on their home page, e.g. number of projects affected, hours of consultations. To show potential donors what impact their donation has, they illustrate what could be done with the amount of money donated. WWF does this by listing several ways in which a donation can support different actions. Caritas makes it even more concrete by showing what they could buy with what amount of money donated.
How might we make the website more intuitive and clear?
🗺️ User Journey Map 🗺️
I summarised the insights from the research phase and created a user journey map (depicted below) to illustrate the experience of a user when interacting with the current website.
It is clear from research that the current website lacks in clarity and a consistent design structure. This results in major pain points for users when visiting the website. Initially interested users get frustrated and loose interest very quick when encountering content that is hard to scan. This can be linked to the decreasing attention span that is correlated with the increasing volume of media consumption (Attention spans, Microsoft Canada, 2015). In addition, missing or unclear information confuses the user. Subsequently, this overall experience leave the user unmotivated to visit the website again. This is detrimental for website traffic and, therefore, potential donors and volunteers.
However, in the pain points also lie the opportunities. To decrease the confusion and lack of clarity, the redesign should focus on presenting the right information at the right time. Improving information architecture and applying consistent design standards (10 Usability Heuristics) will help users to feel less overwhelmed and frustrated.
💭 Recommendations for design 💭
After synthesising the insights from the survey, competitor analysis, and user journey map, I summarised them in a list of recommendations to follow in the redesign process. The items are roughly grouped by their theme.
1. Navigation bar & footer
- Summarise navigation bar items
- Add search bar on top
- Add more information to footer
2. Layout & structure
- Improve layout of home page
- Put long text into lists
- Add clear CTA buttons throughout the page
3. Additional information & communication
- Add more information about programs
- Add impact of donation/volunteer work in numbers
- Use pictures more to communicate the work of organisation
🎨 Color & font style 🎨
As a non-profit organisation with focus on collecting donations to improve the lives of many community members, the design of the website should primarily feel trustworthy. Users must trust the organisation and their work to even consider donating to the cause. The color blue is often associated with trust and honesty. Therefore, I chose a dark blue color to complement the red color from the logo. Apart from being the brand color, red is also a good choice as it is associated with excitement, passion, and urgency, all adjectives that describe a community driven organisation as NRC.
For the font style, I chose Poppins, a modern and clean sans-serif font for legibility and trustworthiness.
👓 Structure & accessibility 👓
The redesign follows a similar structure to other non-profit organisation websites. It starts with an establishing hero shot that should excite and catch user’s attention. There are also CTA buttons in the hero shot already, for visitors that want to jump right into donating/volunteering. The hero shot is followed by sections that introduce the organisation, its work, and its impact. An important section is the one that shows the impact of a donation. This one shows visitors how their donation can help the cause and should convince them to make a donation. I also added a floating “Donate now” button at the right side of the page, that follows users wherever they scroll.
Floating accessibility settings at the left side of the home page allow users to adapt the home page to their needs. There are three different font size options to choose from, an option to have the website read out loud, and an option to have the website turned into greyscale. These options should support users to better navigate the website.
Changing pictures convey a feeling of dynamic progress while also supporting the communication of the organisation's work and impact.
This is the improved website structure as also depicted in the image below:
- Hero Shot with tagline that excites, CTA buttons
- Introduction to the organisation and its work
- Description of their offer
- Impact of work
- Impact of donation
- CTA to join as a volunteer
- CTA section to pick up any visitor
- Latest news
- Footer
I set up the user test in the online tool Maze. The test consisted of 3 questions and 4 tasks that the users had to complete. I received 9 responses, however, only 5 of them fully completed the test. There seemed to be an issue with the prototype functionality and browser compatibility. As the questions were not related, I still considered the unfinished tests in my analysis.
🔑 Key Insight 01
Users get a good impression of what NRC is about right from the start.
The first task was a 5-seconds test where users had to remember as much as possible from the hero section of the website. The following question asked the users to recall what the website is about. The vast majority of the respondents (6/8 respondents) associated their first impression of NRC with community, donating to an organisation, and volunteering. One of the respondents answered with the term "careers" which is not entirely wrong. Only one respondent answered with a word that was too far off.
🔑 Key Insight 02
Users have no issues navigating the website.
Overall, the users did not have any difficulties navigating the websites and and finding information. They perceived the interaction with the website as easy and straightforward.
🔑 Key Insight 03
Users struggle with the donation slider.
The biggest difficulty that the user tests uncovered is the interaction with the donation slider. Most of the users had issues with completing the task of donating $25 that required them to drag the slider to the desired position. Therefore, I changed the slider to buttons to facilitate the interaction with the donation section.
[Note: This issue could also be due to the issues with the prototype functionality and browser compatibility. However, given the results, I still decided to change the slider.]
The biggest issue that users face when visiting the current website is understanding what NRC actually does and how they can get involved.
The redesign solves these issues by adding clear introduction sections to the home page that present the organisation, its work, and how visitors can contribute. CTA buttons throughout the home page ensure to pick users up that are ready to move to the next step.
A dedicated section that shows the impact of a donation animates users to make a donation or contribute otherwise.
The overall improvement of the visual hierarchy and website structure creates more order and legibility of website content.
The end result is a redesigned home page for Neighborhood Resource Center that clearly communicates what the organisation does, what their mission is, and how people can get involved.
To view the interactive prototype click the link below:
👍 What went well? 👍
The overall problem definition process and user research preparation went well as the issue and goal of the organisation was clearly articulated. This is, however, not always the case in real practice. Therefore, this is something to particularly look out for in future projects. Also, the design part felt fairly easy as there was a lot of room for improvement on the current website.
👎 What didn't go well? 👎
Recruiting users that would fill out my surveys and participate in my user tests did not go that well. I reached out in a forum of fellow UX designers to participate but I did not end up with a lot of responses. I then asked family and friends to participate which worked out okay. But this is not something I could do all the time in the future as they might not always fall into the target group (and because it will probably become annoying to them at some point). For future projects I will have to find another way of recruiting participants, maybe with some kind of incentives if the budget allows it.
The online user tests with the Figma prototype connected to Maze did also not go as planned. There seemed to be an issue with browser compatibility and some prototype interactions. I was told that in Google Chrome it worked well, but not in other browsers. This is, unfortunately, something I did not consider in advance but will do so from now on. Also, there was an issue with the slider in the connected live prototype in Maze which did not occur in Figma. This is something I will pay attention to avoid in future projects as well.
💪 Action items for future projects 💪
- Clearly define problem and goals of project
- Recruit users with incentives or from user research websites (if budget allows it)
- Check browser compatibility before tests
- Double check prototype functionality/compatibility if connected to another tool