Bunny World Foundation

Navigational tools, hierarchy and an emphasis on a human-centric design

The Bunny World Foundation offers third-party adoption services and a database regarding animal care and maintenance. However, this non-profit is desperately needing an overhaul on its core designs- from inaccessible palettes to overwhelming navigational elements. The goal is to redirect users into a human-centric redesigned site that allows improves the flow of information, helping patrons find their desired outcomes effectively. We conducted heuristic evaluations to elaborate a user-friendly flow, focusing on features we prioritized based on the probability of usage.

Role
UX/UI Designer
Timeframe
3 Weeks
Tools
Figma
Team
Paul Batin
Annie Lee
Rachel Miller

Background

The current design of the website detracts users from navigating properly and lacks core design principles. The status of the site harms organization credibility...

Solution

How do we bring forth a strong branding presence while prioritizing user experience?
By discovering pain points in the interface: a redesign of the navigational elements, consolidation of pages and improved color accessibility could improve the organizations presence.

Research

Three paths of discovery leading research

Learning about the current webspace is crucial in understanding why the site isn't working and what other competitors offer.

02 Empathy
Empathy
Learn user preferences in navigation and how to help pet owners and foster parents reach the information they need.
Pain Points
Discover what difficulties and points of ease pet owners and foster parents have when trying to find information on care and maintenance of their animals.
Current Trends
Understand what site features pet owners and foster parents currently use and seek to help them efficiently adopt and care for their animals.

Usability Tests

Before interviews we had to prepare usability tests on users navigating the site. We discovered that the website is overall challenging to navigate and not visually pleasing to viewers, which diverges attention. We could eliminate this issue if we redesigned the website navigational tools, such as the header and navigation bars, based off hierarchy, as well as consolidate any information that is not necessary by reducing the amount of pages.

Following this process we worked on developing interview questions. We asked individuals a multitude of questions to build our qualitative data such as online resources or platforms they currently use to learn about animal care or what features they would desire to have on the website.

Below is the website we had to redesign. Through heuristic evaluation we targeted aspects that could effect navigation, functionality, content and aesthetics.

Original website BWF

Insightful information

Through testing we encountered issues we hypothesized earlier about our initial evaluations. Users running through the tests provided us with feedback:

Website hierarchy
Testing proved that the website design lacks hierarchy with design systems and the layout of site features.
Accessible information
Because of the multitude of elements on a page, users found it difficult to reach information they were looking for. Users also desire a search function that prioritizes key info.
Resources
These days anything can be found on search engines, however an organization needs to provide credible tips and animal care.

Who we are designing for

Our persona was formed based off an individual motivated to make a difference in the world with a goal to spread awareness on social injustice and animal cruelty.

bwf user persona

Definition & Ideation

Key features to improve human interaction

When creating an experience intended connect with others we had to implement ways to build these relationships. Here are a few of the ideas we came up with:

001

Revamped news and implementation of a newsletter sign up
To increase the probability of users return back to the site we believed a newsletter would benefit the majority of users. The main portion of the site is designed to be news posts and we worked on iterating a less convoluted alternative.

002

On site adoption services
The organization has links towards a third-party adoption marketed as their own. Incorporating an adoption feature brings forth an increase in services the organization could provide, ultimately increasing patronage.

003

Consolidated information
Previously there would be individual webpages for different information, we combined them onto one page with navigational tiles that bring users to their designated destinations.

User Flow

We designed our user flow with the vital part of the interactions aligned with the organization's mission statement. Because of this, we directed our work towards internal processing of adoption rather than external. We had an idea of creating a forum for users who create an account but given the time frame, we had to prioritize the other flow and did not create the forum.

bwf user flow

Prototyping

Developing the interface

Building the experience

We ventured to create an innocent and playful aesthetic, embodying the energy often associated with bunnies. I took precise care in building assets we could potentially use in the final prototype.

The wireframes we created followed the adoption process and we wanted to display our navigation elements as cards, information centered. Adoption systems were improved into a three step system and then all bunny care information was consolidated onto one page.

Design systems
Design systems 2
Low fidelity frames
Carevan user flow

Testing for usability

In order to determine the pain points of the website we conducted tests with tasks to discover obstacles. Our results indicated that users had issues finding information on site meaning that consolidating information would bring value to the redesign. The tasks include:

Task 1
Reaching the information on bunny grooming.
Task 2
Find information on the diet of an adult bunny
Task 3
Navigate the site, to utilize the adoption feature from the top navigation.

Opportunity for improvements

Using the same tasks for the current website and our redesign we were able to compare the results of both. Key findings show:

Validations
Graphics were widely appreciated
Cute branding reinforced support for credibility
Users were able to navigate openly and efficiently
Obstacles
Accessibility of colors and typography choices
Slider replaced with pagination

High-Fidelity Prototype

The final prototype resulted in a fleshed out page that considered all possible outcomes other than the forum. Through testing of the mid-fidelity we changed fonts, increased contrast, fixed inconsistent paddings and improved the desired graphics on the pages.

Bunny World Foundation Prototype

Summary

Final thoughts and future iterations

The redesign of the website improves the overall experience one might expect from a non-profit organization. Through heuristic evaluations, interviews and initial testing we were able to interpret the key features needed to be implemented and what obstacles user's face. The value of creating a human-centric design could promote increased volume on site and potential revenue to the non-profit. By paying close attention to principles of design we determined the result as the best output considering the time frame of the project.

previous project
All 
PROJECTS