Project Overview

Product Design Portfolio Covers-0002.png

Halfway to Home

Redesigning a local non-profit’s website to increase adoption rates

We conducted a SWOT analysis to compare Netflix's Nonmember Home Page to other popular streaming platform’s.

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

Screen Shot 2022-07-13 at 12.45.44 AM.png

User Persona

With the data collected from the interview, we created the actual persona for the target users. Meet Rosa - the introverted athlete.

Screen Shot 2022-07-21 at 2.26.00 PM.png

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:

Screen Shot 2022-07-13 at 12.50.43 AM.png

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

  1.  Creating an adoption webpage with available dogs into the same webpage

  2.  Adding a filtering system on the webpage itself to allow users to let users identify which dog is right for them

Screen Shot 2022-07-13 at 12.45.44 AM.png

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.

Screen Shot 2022-07-05 at 4.32.56 PM.png

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.

Screen Shot 2022-07-25 at 2.50.40 PM.png

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.

Designerds.jpeg

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.

Screen Shot 2022-07-25 at 3.08.18 PM.png

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. 

h-1.png
Screen Shot 2022-07-13 at 12.45.44 AM.png

User Storyboard

A  storyboard was created to see how the user interacts with the product, Halfway to Home's website.

Screen Shot 2022-07-05 at 4.02.18 PM.png

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

Screen Shot 2022-07-21 at 4.39.00 PM.png

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. 

Screen Shot 2022-07-21 at 3.03.36 PM.png

Prototyping

Creating intuitive models

Screen Shot 2022-07-13 at 12.45.44 AM.png

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.

Product Design Portfolio-09.png

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.

Screen Shot 2022-07-05 at 4.18.52 PM.png

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

Screen Shot 2022-07-13 at 12.57.49 AM.png
Screen Shot 2022-07-13 at 12.57.49 AM.png

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

Screen Shot 2022-07-13 at 12.45.44 AM.png

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. 

Screen Shot 2022-07-21 at 3.24.34 PM.png

Results

Version B was favored more by users because:

  • Visibility

  • Simplicity

  • Less cluttered

  • Straightforward

  • Loading Response

Original Website Design

Screen Shot 2022-07-21 at 4.19.02 PM.png

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

Screen Shot 2022-07-14 at 5.07.23 PM.png

More Projects