Redesign of a nonprofit organization website

A redesign of a nonprofit organization website to by improving chun-risk and transparency.

Deliverables

Redesign a nonprofit website by identifying problems and solutions to improve the website for the organization.

Role

Product Designer, UI Designer
Team: Linda Gomez, Jessica Won

Timeline

3 Weeks

Tools

Figma, Google Forms, Illustrator, Photoshop, Zoom

The Animal Alliance website was redesigned to help reduce churn risk which is the rate the users leave the site. Users didn’t want to engage with the website and felt like the website wasn't being transparent enough to feel trustworthy. From the research, the User interface as redesigned to feel more approachable by introducing more of the organization on the homepage.
Research started by contacting the stakeholder to get an understanding of what their goal was for the website as well as their target audience. They wanted to make sure it was accessible to everyone as well as easy to navigate regardless of what task they wish to do on the website.

Meanwhile, a heuristic evaluation of the website was done to check potential elements that require changes. From there, 5 second tests were done to get quantitative data of user’s first impressions of the website. 1 on 1 interviews were also done to get qualitative data on how the users feel and navigate through the website. After the interviews, a card sort was also done to evaluate the information architecture. Although some users felt the navigation was straightforward, we wanted to ensure every button was necessary as some users were a bit confused by the home button.

01

User Research
5 second test results on first impressions
5 second test results on how trustworthy the organization seemed based on the landing page
5 second test results on first impressions
5 second test results on how trustworthy the organization seemed based on the landing page

02

Definition & Synthesis
Following the research, common problems that users mentioned were that the website didn’t seem transparent enough and the hero image seemed off putting to some. The focus from the research was to create a more engaging homepage with more transparency and consistency. Key elements that worked in the user interviews were that it was fairly straightforward to navigate and maintained a simple design to allow the users to understand the flow easily.
“ It’s not really compelling me… it doesn't really compel me to look further into the website”
“ It feels kind of aggressive” ( in regards to the hero photo)
“My first impression.... I don’t want to be here..I don’t want to stay here” (Of the website based on the landing page.)
Various thoughts users said during the tests.
After defining the problems from the research, an empathy map and value proposition from the user interviews was made to understand the users. From that a brainstorm session was done with the I like, I wish, I want method to sorted out ideas based on the interviewer thoughts and behaviours. Features where then selected with a feature matrix to determine which are the most suitable for the user and stakeholder. A storyboard was also made to understand the flow of the user's initial experience with the website.

03

Ideation
Empathy Map based of user interviews done.
Value Proposition based off empathy map and user persona made.
Empathy Map
Value Proposition
Storyboard made based on an ideal new visitor of the website.
Storyboard made based on an ideal new visitor of the website.

04

Prototyping
After brainstorming, a style guide was also created based on the current website to keep brand consistency. However, some elements like the green and fonts had to change slightly be readable under the AA standards. This was also to ensure the website was more accessible to all users as the stakeholder wanted. Meanwhile, low fidelity prototypes were created to gather ideas from each team member. From that we took the best parts of each wireframe we thought would work well to engage the user as well as tell the story of the organization to be more transparent.
Style guide developed and restyled to be AA compliant
User testings were done on the prototype to get an understanding if the problem of churn risk was solved. We also tested if a scroll indicator would help with this as well however, the sample size was not large enough to reach a statistically significant result.

During many revisions of the prototype the user interface kept changing based such as consistency of the buttons and more context for the team members section on the homepage to show more transparency and to avoid confusion. After the final revision, a 5 second test was done once more to re-evaluate user's first impressions of the redesign.

05

User Testing + Outcomes
Prototypes of the redesign done to ensure the website is responsive.

06

Conclusion + Future Opportunities
Based off the final 5 second test, we were able to increase the trustworthiness of the site. Users found the website more trustworthy and had a more positive outlook of the organization in comparison to the original test we did on the website. Also the percentage of dislikes comments surveyed of the homepage decreased from 67% to only 5%.

Future opportunities would be to iterate on the other pages such as the donation or a volunteer page so that the user becomes more engaged with helping causes the organization find important. We would also improve on some copy on header to make the content more understandable/friendly to users that aren't as familiar with animal cruelty to see if it would increase user's trust and improve transparency.
Looking for more of my work?
Previous
Next