Redesign the website of a non-profit organization in New Zealand. What can be done to make the website more interactive and easier to navigate?
Interaction design Project​
​
Six weeks
​
Figma, Miro
​
User Research, Prototyping, User Flow, Visual Design​
Scope:​
​
Duration:
​
Tools:
​
Role:
​
Amnesty International
New Zealand
The Challenge
To re-design a website of a New Zealand non-profit organisation based on user research.​
How Might We
How might we make the website of Amnesty International more engaging and easy to navigate for the user?
Design Process
User Research
1. Online Survey
We conducted 6 interviews and 24 surveys to learn about what people think about the current Amnesty International website. We focused on aesthetic and layout, how easy it is to navigate and the information on the site.
Result
From the results of the survey it can be seen that most people have not used the Amnesty International website before, they can navigate the site and their purpose would be to find out more information. Users also do not completely happy with the appearance of the site, and only 8 find the content clear.
Analysis
We grouped the results into 3 sections: aesthetic, engagement and user’s intention.
Analysing the results help identifying the main issues and feedback from the users. It prioritises the issues we have to solve.
Hence, we created the user flow of the site
Based on the analysis of the survey, our top priority is to promote the message behind Amnesty International and design an easy user flow to call out their action.
Hence, we decided to focus on four main pages, home, get involved, take action and donate.
Here are some mid-fi wireframes to show layouts and explore more details of what will appear on pages of the site
Design Systems
Low-fi Wire-frames
We have decided to make the website interface more visual, without an overwhelming amount of text on the home page, however there will be a link to "read more" so users can explore further.
Design Principle
Throughout the project we highlighted the principles of hierarchy, contrast and proximity. To encourage users on taking action when they browse the Amnesty International website, we decided to use a full-screen sized image along with short but powerful quotes to trigger the sympathises.
We prioritise the need of the website and the feedback from our survey. Hence, we have “take action” in the first section, follow up with “who we are” and their petition in the home page. User can easily access to all important information in the same page. Moreover, the small animations in the site increase user interactions and engagement.
By adding images and icons, we were able to break up the large amount of text and make the site easy for users to navigate.
Typography
Roboto
Heading 1
Heading 2
Heading 3
Body Text 1
Body Text 2
Body Text 3
Body Text 4
60pt
50pt
40pt
30pt
25pt
25p
20pt
Bold
Medium
Medium
Regular
Regular
Light
Regular
Colour
Pure White
#FFFFFF
Primary Yellow
#FFF510
Dark Haze
#262626
Pure Black
#000000
Icon
Development & Usability Test
To make the first prototype less bulky and overwhelming, we rearranged the page and shortened the text, but the content was still too long and did not improve engagement.
Then we developed the second and third prototypes, in which we tried to create a parallax effect in the third section, but the content was incompatible with the parallelogram.
Who Are We
Amnesty's core values and history were chosen as a focus. This would allow users to understand the motivation behind the creation of this site in the shortest amount of time.
To increase engagement, we added a "join us" button at the bottom to capture user attention and recall their intent.
Petition Information
In order to increase hierarchy, different colours and sections were used on the page. More images were also added to draw user attention and provide a deeper understanding of each campaign.
Donation Page
The updated image depicts the happiness and the unity of the organisation and its people. By using a simplified form design, users can simply fill in the donation information without having to scroll up and down.
Conclusions
This project was to design a responsive website using an existing New Zealand NGO website. To accomplish this, we have decided to take the double diamond framework approach with this project. The project was an enjoyable challenge to me because it is formatted in a way where user research and user experience are the guiding principles.
​
Additionally, this project has been personally rewarding for me, from the user research to the analysis to the design. This project has been a turning point in my understanding of user-focused development from the beginning to the end. I intend to continue designing to meet the needs of users.
​
A change I would make is not to test this project through a screen because the project was done throughout lockdown. However, I learned more efficient methods of managing and working with countless software programs, such as Trello, Miro, and of course Zoom, during lockdown.
​
I will be taking all these learnings to the next project regardless of unprecedented times.