Donors visiting The Animal Pad's website need a donation site that is more engaging and intuitive to help them find and discover the donation method that best fits their needs.
My Contribution
My teammates and I worked collaboratively throughout all stages of the design process, including user research, prototyping, and usability testing.
During the research stage, I was specifically responsible for generating relevant survey questions, creating user interview/testing protocols, and conducting user interviews. In the ideation stage, I was in charge of sketching wireframes and creating low to mid-fidelity prototypes of the donation button and "Shop For A Cause" page. As for the final design, I was responsible for the visual design and creation of hi-fidelity prototypes for the website footer, donation button, and "Shop For a Cause" page.
Getting to Know Our Users
.png)
116 Survey Responses
.png)
16 Stakeholder Interviews
What We Learned
Transparency
Gathering insights from our initial survey, we found that people are more willing to donate to organizations that are transparent about what they are using their donations for.
Discoverability
From our interviews, we found that our interviewees had difficulty finding other methods of donation. As highlighted on the snapshot of the original webpage to the right, other donation methods are only accessible to the user through the "Donation" page.
Shop For A Cause
Upon landing on the page, it is not immediately clear what "Shop For A Cause" meant. Our interviewees also disliked the long descriptions and lack of images on the page, making it overwhelming and difficult to navigate.
Initial Ideation (Lo-Fi)
After exploring the problem space, we identified the areas that needed the most improvement were the donation page and the "Shop For A Cause" page. The key points we wanted to focus on with our redesign included increasing discoverability of other methods of donation and reorganizing the information on the "Shop For A Cause".
Solution #1 — The Dropdown Menu
In an effort to make other donation methods more visible, we swapped the donation button on the navbar to a dropdown menu.
Objective ➝ Help users find other methods of donation on any webpage
Solution #2 — Other Ways to Donate
To further increase discoverability of other methods of donation, I suggested a gallery view of the other donation methods at the bottom of each page. Each container would showcase an image and a description of the given donation method.
Objective ➝ Provide users another place to access and discover other methods of donation
Solution #3 — Reorganizing "Shop For A Cause"
We included a short description of what "Shop For A Cause" means. We then reorganized the information into a grid layout, which showcases images instead of text. Text descriptions become visible upon hover.
Objective ➝ Define "Shop For A Cause" and show users more images instead of text
Testing Our Ideas
Using our lo-fi prototype, we conducted 12 task-focused interviews with our stakeholders. We first tested the user flow from the Home page to the Donation page, observing the user's ease of navigation. We then asked users to find the "Shop For A Cause" page, where they were also asked to find more information about each cause. Here are some of our key findings:
Decluttering the Navbar
Users found the navbar to be crowded with too much information, therefore making it hard to quickly scan
Using Familiar Logos
Users mentioned wanting to see familiar logos, in order to build a sense of credibility
Presenting Information
Users had different layout preferences- some prefer to see all the information at once, while others prefer to see webpages with less words
Making Changes
In order to declutter the navbar,
we moved some menu options to the website footer, which includes The Animal Pad’s social media links, their mailing list subscription form, and the other methods of donation.
We used familiar logos
on the "Shop For A Cause" page to make the images more recognizable to users and convey information more effectively.
A/B Testing on the "Shop For A Cause" page
Upon reviewing user testing feedback, we found that users have conflicting preferences on how information is presented on a webpage. We decided to generate two versions of the "Shop For A Cause" page:
vs.
✓ Layout is visually appealing
✓ Less wordy → less overwhelming
✗ Text is too small
✗ No categories → less organized
✓ Categorized well
✓ Important information in descriptions
✗ Still wordy and lots of scrolling
✗ “Back to Top” should always be visible
Final Design
Improving Discoverability
In an effort to make “Shop For A Cause” and the other donation methods more visible, we introduced a dropdown menu on the donation button. This ensures that all the methods of donation will be accessible to the user even when they are on another page of the website.
Shop For A Cause
Upon reviewing user feedback from our A/B testing, we created the final version of "Shop For A Cause". Some changes we implemented include:
1) "Back to Top" button always visible
2) Promo code better highlighted in description
3) Filter bar to sort through categories and minimize scrolling
Repurposing the Website Footer
To declutter the navbar, we relocated some menu options to the website footer. We also decided to list out all the donation methods in this section in an effort to make it easier for users to find on other webpages, thereby increasing discoverability.
Reflection
1) Having multiple ways to reach the same destination offers users more flexibility when navigating a website
2) Color can be used as an organizational tool to display order and hierarchy of information, making a large body of text more digestible and less overwhelming to look at
3) Thank you to my team members for their hard work and to Corina Asher for cooperating with us, connecting us with people within The Animal Pad, and giving us valuable feedback!
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
%20(1).gif)
.gif)
.png)
.png)
