OVERVIEW:
Miami Animal Alliance is a non-profit, foster-only animal adoption organization that needed a redesign of their original website. While the website was easy to use, it didn't look professional or trustworthy and lacked crucial information.
Tools used: Figma, Google Slides, Trello, and Canva.
ROLE:
Product Designer (Team of 3)
-
User Research
-
Building Empathy & User Personas
-
Information Architecture
-
Visual Design & Branding/Logo Creation
-
Wireframing & Prototyping
-
Usability Testing
The Problem
After performing a heuristic evaluation on the original website, we identified key weaknesses we wished to optimize:
-
Lacked a clear, simple design-- the original design was outdated and busy
-
Inconsistent design
-
Difficult to scan
-
Not responsive
User Observations
We performed user evaluations on MAA's website and gathered insightful feedback from five user interviews that helped us to develop our new design. Then we compiled them into an affinity diagram.
Cluttered
"The homepage is too cluttered... too much text and visuals aren't aligned."
Dull
"It needs to be a brighter color other than black."
Not intuitive
"The 'By the Numbers' page isn't very intuitive. Does it belong somewhere else?"
Disorganized
"Walls of text, different fonts, and incredibly disorganized."
Competitive Research
We reviewed the websites of direct and indirect competitors to identify the look and feel that is common in the industry.
We came across several findings:
- Organized footer structure
- A colorful and playful look
- Success Metrics section on the homepage
Meet our User Persona: Hannah Pawson
Behavioral Demographics:
-
30 years old
-
Works from home
-
Single, wants a fluffy companion
Goals & Needs:
-
Wants to see past adoption success stories
-
Believes in adopting, not shopping
Pain Points:
-
A lot of rescue websites don't clarify how to adopt an animal
-
Finding it difficult to find a rescue that she can trust
Empathy Map
As we were creating our Empathy Map, a few things stood out:
- Our user person appreciates an aesthetic and clear design
- Our user takes the adoption process (and animal welfare) very seriously and wants to be able to trust the organization
- Appreciates reading success stories of past adoptions
Does
Likes to look at past success stories of adopted dogs.
Says
"I would rather adopt not shop."
Feels
Needs the process to go as smoothly as possible in order to feel comfortable.
Thinks
Animals > People
Problem Statement
Miami Animal Alliance's website was designed to help people adopt animals in need. We have observed that the site is out-of-date and not meeting the necessary UX/UI standards, which is causing the rescue to come across as unreliable and trustworthy. How might we improve the website so that our customers are successful based on an increase in adoption rates?
User Scenario & Storyboard
Hannah is looking to adopt a dog and is trying to find a non-profit adoption organization that she can trust. When searching adoption centers in her area, she finds Miami Animal Alliance, and decides to go on their “About” page to learn more about their values and past success stories. After looking over the page, she finds the non-profit to be trustworthy, and looks to fill out an application for her future pup!
Site Map
To create our site map, we began by card sorting the current website's main pages. We then created four categories for our site map to reorganize the information clearly and concisely. Each of these categories created our main navigation: About Us, Adoption, How to Help, and Contact Us.
Style Tile
Next, we created our UI Style guide. We wanted our website to come across as playful but also still reliable. Based on our persona wanting a trustworthy rescue, we added real photos of adoptable animals and testimonials of past adoptions.
Given my background in branding, I immediately knew I had to change the logo to match the new website layout. I did this part on my own with the final approval of my teammates.
Prototypes
For our low-fidelity prototype, we worked together to organize our homepage. Some sections that we wanted to highlight were how to adopt a pet, the reliability of our rescue, adoption fees, and testimonials. We kept this structure as we moved to the high-fidelity prototype.
Prototype Testing
Through prototype testing, we found 3 areas of improvement:
Final Prototype
Please press "play" for a video walk-through of the final prototype.