Redesigning the Road of Hope website
Restructuring the website to make it more intuitive and informative.
Time
Role
Tools
Aug. 2023 – Dez. 2024
UX designer
Resercher
Developer
Figma
Miro
WordPress
Context
Road of Hope is a non-profit organization based in Amsterdam, dedicated to supporting refugees on their journey to integration. They aim to become better known and increase the number of volunteers and donations through their website.
The goal is to become more well-known and increase funding, volunteers and donations through its website. This will help to increase the work and the number of people it helps.
Problem Statement/Challenge
How can we increase the visibility of the organisation and its work through the information provided on the Road of Hope website?
Impact
The website redesign project had several important impacts on the organization, such as:
It increased the organization’s visibility through a more organized and updated website;
It enabled new funding and invitations to events, due to the more accessible user flow and current information;
It expanded the organization’s reach, increasing the number of clicks and impressions that went beyond the Netherlands, to countries such as the United States, Japan, India, Belgium and others.
Final Result
The main solution revolved around improving the user flow within the website. Flows that facilitate usability and access to all information. The layout was worked on to be more intentional, appealing and to demonstrate the organization’s work more efficiently. In addition, the information was updated and we used a language focused on storytelling. Another important focus was the change in the how can I help section, improving the payment method through the PayPal button in the donations tab and the insertion of a registration form in the volunteers tab.
Hypothesis x Results
To better understand what we were trying to improve on the website, we mapped hypotheses related to heuristic analysis. Here we compared the previous version with the final version, showing the solutions implemented based on what we saw in the heuristic analysis and also after interviews with users.
Visibility of system status
The main menu or header worked by pressing the button and being sent to a submenu on another page, which made it difficult to see the available tabs and themes.
The solution to this problem was to reorganize the main menu and make the submenu open right below it, indicating all the subtitles easily. This made it easier to view the site’s content.
The previous contact tab only had the contact email, which did not facilitate user interaction with the organization. To solve this problem, the new version has all the NGO’s contact details, address, map and even a form in case the user wants to leave a message.
Flexibility and efficiency of use
To present the organization’s projects, the old version had explanatory blocks, but they did not work as buttons, and the information was out of date. The solution incorporated all of Road of Hope’s projects, a brief explanation, and all of the logos are clickable and work, leading to the projects and more advanced information.
User control and freedom
The donation tab is limited to the organization’s bank details. This makes it difficult for users to make donations on the spot. In the final version, we added more details about donations and, in addition to the IBAN, we added a PayPal button so that donations can be made on the platform, right away. Another point is that the donation button was placed in several parts of the website, to remind users.
The volunteer registration tab, despite having information, only has the phrase contact us and nothing else. It is in a different color, it looks like a link but it is not, greatly limiting the user’s action. As a solution, a form was created for volunteer registration, where it is possible to enter personal information, choose the preferred project, attach a resume and leave a message if necessary.
The footer contains information that is already on another page of the website. The logo and icons are not clickable, making it difficult to access this information. After analysis, all icons were left clickable, which redirects to the home page. To increase access to the newsletter, the subscription option was placed in the footer.
UX Research
As previously mentioned, the discovery process began with Heuristic Analysis. Points were identified and validated through user interviews.
Recruitment was based on the profile of people the organization would like to reach. This profile consisted of people interested in humanitarian causes who may or may not be familiar with the organization.
Qualitative interviews were conducted with seven people. A usability test was also conducted on the existing website at the time to validate the points listed in the heuristic analysis. Some of the results are presented below:
Were users able to complete all the tasks provided during the usability test?
What negative points came up the most in the interviews?
After the interviews, the data was compiled. Urgent demands for change were selected, such as: grammatical errors in the texts and links that were not working. They were fixed as quickly as possible.
Other points identified that needed changes, but were classified as non-urgent: unintuitive menu, difficult user flows, lack of storytelling, long texts, difficult payment method, lack of forms and outdated information, and very old photos. These points were an important part of the ideation and will validate the previous hypotheses.
Competitive Analysis
To analyze the contenders, we selected 4 organizations that most closely resembled the work of Road of Hope. I realized that most of them lacked data on their projects and the results they had achieved. By comparing the 4 websites with our NGO’s website, we identified 3 important points and opportunities for improvement.
Strengths of existing platforms: Engaging photo, Impactful language, News and varied and easy donation methods.
Weaknesses identified: lack of data, very large and confusing text and too much information on the same page.
Opportunities for differentiation: Develop an intuitive user flow, where information can be found easily. Combine appealing language with photos that create engagement and the presentation of data that materialises the results of the projects in numbers.
We concluded that the new Road of Hope website has a more intuitive user flow, making the experience easier. We are looking for a more appealing and engaging textual language that makes people feel part of the community.
Ideation
By analysing competitors, it was possible to discover possible solutions for improving each page of the website. These were the points analysed for improvement:
Layout (striking photo, brief explanation of who we are + read more, projects, statistics, news, headline: prioritised sequence of topics (our work, news, about us, …)
Language (Telling stories about the organisation, more appealing language ‘our people, our story, our work,…)
Result
The final project resulted in an organized, intuitive website, with easy access to information and quick contact with the organization.
We sought to improve the flows within the website and facilitate operations, such as having a donation button, where donations are made directly via PayPal, as well as registration forms for volunteers and for obtaining more information. This made it easier for users to contact the organization.
The projects offered by the organization were organized and presented, with text, explanatory video and photos.
To humanize the institution, we introduced the team, included more photos that told stories and changed the language to include the user.
Since the NGO is already known for its colors and logo, the organization’s visual identity was maintained, what was done was a reconstruction of the existing layout for a cleaner look and with a focus on usability.
We thought of solutions from macro to micro. From organizing passwords and institutionalizing access to social media by employees, to restructuring all the pages and accesses on the website. A long and in-depth work, which still requires maintenance and care. In addition to the design aspects, there is a whole legal and bureaucratic aspect that must be followed, as the institution depends on government funding.
The final result can be viewed on the organization’s official website:
Key Learnings & Challenges
Since it was a solo project, I learned a lot about time and task management. Structuring the entire website on WordPress and hosting was also a major challenge.
In addition to the website, I ended up developing institutional emails for each collaborator, which brought more organization and made it easier for users to contact the coordinator of each project. In this sense, I learned that work often goes beyond the website. It is important to have a holistic approach and pay attention to details.
I learned how to store files on more devices and avoid rework. In the middle of the investigation, my computer was stolen and I ended up losing part of my work.
I learned the importance of knowing how to share information that is attractive both visually and in written form. Simple grammatical errors can undermine the foundation’s work.
The challenge has been keeping the website updated in accordance with the NGO’s demands. In addition, since it is an organization that receives government funding, there are rules to be followed, many of which I learned during the process, through trial and error.
© 2025 Ana UX Design — Made with ♥ and tea