Project Overview
Project Overview
About
Role:
UX Designer (Group Project, team of 3)
Timeline:
May 2022 (2 weeks)
Tools:
Figma, Miro, Trello
The Problem
Centralization of adoption process
-
Involving third-party websites
-
Longer adoption process
The Solution
Goal: Increase dog adoptions and adoption flow by
-
Improving cards
-
Improving dog descriptions
-
Adding a filter system
User Interviews
For our research, we conducted user research interviews on zoom and through surveys to obtain qualitative and quantitative information.
Goals
Target Demographic: Users that have adopted and or are interested in adopting a dog
Understand:
-
How do users determine if a dog would be compatible to their lifestyle?
-
What are important traits to know about a dog?
-
How do users prefer to contact a rescue?
Takeaways
Users want to:
-
Get an idea of a dog’s personality and qualities
-
Age? Breed? Activity level? etc.
-
-
See quality and up to-date images
-
Directly call the rescue
Research
Emphasizing the users’ needs to create the best experience
User Persona
With the data collected from the interview, we created the actual persona for the target users. Meet Rosa - the introverted athlete.
The Problem
We have observed that “Halfway to Home” is not centralizing their adoption process directly on their website by making their users use a third party website to see more information about adoptable dogs, which prolongs the adoption process.
Define
Defining the problem through user research
User Insights
Based on problem statement, our user interviews, and assumptions we had, we decided to focus on how to increase rescue adoptions through:
Up to Date Photos
Personality Descriptions
Accurate Descriptions
Adoption Status
Based on problem statement, our user interviews, and assumptions we had, we decided to focus on how to increase rescue adoptions. We decided to do this by
-
Creating an adoption webpage with available dogs into the same webpage
-
Adding a filtering system on the webpage itself to allow users to let users identify which dog is right for them
User Likes, Wishes, and What Ifs
From the user interviews, we collected their input on what aspects users want from an adoption site. This helped us understand what was important to the user and how we can better shape their experience.
Value Proposition
After consolidating our ideas from the user insights, we used a value proposition matrix to narrow down a common ground for both the users of the rescue website and Halfway to Home Dog Rescue. For instance, we were able to figure out more in detail about what specific pains that users feel, such as users having to go back and forth between the websites and being tired of finding the dog users’ might want.
Competitor Analysis
We conducted a SWOT analysis to compare Halfway to Home to other local animal rescue shelters in the Los Angeles County.
Since users make their first impression of the shelter through its site in 0.05 seconds, it crucial to understand what causes a user to choose a competitor.
Ideate
Brainstorming solutions
Information Architecture
We wanted to understand users’ mental model to optimize + simplify site navigation
Sitemap
The original site currently has numerous pages in the navigation which can make the user experience overwhelming and cluttered. The sitemap was created to organize the basic structure of the site pages.
User Flow
The goal is to search for an adoptable dog. Along the process, the user has the option to use filters, view dog profiles, and contact the rescue.
User Storyboard
A storyboard was created to see how the user interacts with the product, Halfway to Home's website.
The Solution
Our solution to increase dog adoptions and quicken adoption flow is to:
-
Improve the dog cards on the adoption page
-
Improve the description of the dogs
-
Adding a Filtering Feature
Inspiration Mood Board
Using InVision, we curated a mood board to gather ideas for the site's features, style, and more.
Sketches
From there, we took ideas to paper by sketching out possible designs. We incorporated elements for the navigation, catalogue, and filters. As a team, we discussed what styles would be most effective for the browsing experience.
Prototyping
Creating intuitive models
Design Decisions
The UI style guide provides a detailed framework of Halfway to Home’s brand personality and tone.
We kept in mind color psychology - therefore, choosing blue and orange to represent trustworthiness and enthusiasm.
Since the non-profit is located in the Mojave desert, we included elements to personalize the design.
Wireframing
We created with responsive design in mind for both web and mobile devices using the 12pt grid technique. From there, we were able to convert it to a lofi prototype. We wanted to make sure it was functional design for real users.
Testing
Conducting tests to validate solutions
Usability Testing
Our target users are people who are interested in adopting a dog.
Objectives
-
Are users able to find a dog that matches their interests?
-
What are some things that may or may not be missing from their decision making process?
-
Once they are ready to adopt, are users able to easily able to contact the shelter?
Tasks
Insights
-
Improve consistency for headings
-
Various pathways of completing tasks
-
Iconography was helpful
-
Filter system might put senior dogs at a disadvantage
Iterations
-
Contact information
-
Adding business hours
-
Alternate methods (footer)
-
Bolding contact number
-
-
Increasing font size of navigation menu
A/B Testing
For AB testing, we wanted to focus on the filtering system to see which style provided the best experience.
Version A offered the filters directly on the site whereas Version B offered a pop-up experience signified by the filter icon.
Results
Version B was favored more by users because:
-
Visibility
-
Simplicity
-
Less cluttered
-
Straightforward
-
Loading Response
Original Website Design
From the empathize stage, we’re able to recognize our user’s needs to analyze how the site can be improved. 90% of users will leave a site solely due to bad design which in this scenario would discourage dog adoption from Halfway to Home. It takes 0.05 to make an impression for a website.
After all of our research and evaluations, we came up with our new responsive, intuitive design which addresses the original site's usability issues.
Our new design has an improved information architecture, easier to absorb information, therefore optimizing the dog adoption process and decreasing bounce rates.
Prototyping
Next Steps
This project was presented during our Netflix Demo Day where we received valuable feedback and insight from professionals in the industry. It is important when designing to think about the bigger picture such as tech or business limitations.
For instance, during this project we originally planned to add a form for users to directly contact the shelter. After discussion, we realized we should not try to change this rescue’s adoption process; instead, focus on trying to make it easier for users to find compatible dogs to adopt directly on the site. For this section, we included the shelter's number and business hours since (1) users prefer calling and (2) quicker response time.
-
Adding more filters
-
Consistent images
-
Feature senior dogs
-
Adhere more to WCAG standards
Reflection
