Handi-Dogs

Website Redesign • 10 minutes

Problem Statement

Case Study Objective

For this project, my team and I picked a non-profit organization's website to redesign. We decided to redesign the layout of the website for the organization Handi-Dogs. Handi-Dogs is a Service Dog Training Center in Tucson, Arizona. They provide ways to adopt service dogs, classes for training service dogs, as well as opportunities for an individual or organization to sponsor a service dog's training. As a team, we wanted to redesign the outdated and confusing layout of the Handi-Dogs website that easily navigates users through the website so they can find what they are looking for.

Together, my team and I created a new website layout and mobile design for Handi-Dogs with the user in mind.

Duration
September 20th - November 10th, 2021
Team:
Hayden Araza
Kevin Myles
Dustin Mark Bolin
Ai M.
Category
Website and Mobile Redesign
Problem Statement

People with disabilities need local resources to find service dogs that meet their unique needs. They need to be able to easily find information on service dog assistance programs and the application process.

Objective

Redesign website for HANDI-DOGS, a non-profit service dog organization, help disabled people to connect with service dogs and find people to train service dogs, and provide ways to increase donations.

Research

User Research

In order to best understand the purpose of Handi-Dogs and what the service is most commonly used for, we needed to first determine who our users were.

  • User Persona
  • User Insight
  • User Survey
  • Competitor Analysis
Competitor Analysis & Survey

In addition, we created a survey of multiple questions related to how people aquire or search for a service dog.

We also did a competitor analysis in this stage to see what features other service dog websites offer in comparison to Handi-Dogs and how someone may use Handi-Dogs differently than a different website.

User Persona & User Insight

We decided to reach out to the Handi-Dogs organization ourselves and talk with them about how their organization helps people.

Based on their response, we crafted a User Persona and User Insight of someone who would be likely to use Handi-Dogs.

Definition

Defining Our Goals

Once we had collected sufficient data from our survey and from speaking more with a representative from Handi-Dogs, we found the key problems users had when engaging with the Handi-Dogs site, and prioritized ideal solutions.

  • Experiments → Facts → Insights → Opportunities
  • User Journey Map
  • Feature Prioritization Matrix
Opportunities → Goals

Based on our research, we identified key goals for our redesign:

• Blend fundraising into every page
• Clearer Navigation for users (Applicants, Donors, and Volunteers)
• A redesigned forms section
• Updated color pallet
• Message board to update donors

User Journey Map & Feature Prioritization Matrix

With information gathered from our survey responses, we crafted what a typical user journey using Handi-Dogs would look like.

In addition to this, we gathered all the information from the survey responses and Handi-Dogs representative and organized our desired goals into a priority matrix so that we could focus on the most important tasks first.

Ideation

Ideation Process

After identifying the key ways users want to use the Handi-Dogs site, we evaluated what we needed change on the original website to meet those goals. We started creating ideas for the site's appearance such as design style, categorization, and paths.

  • Orgininal Website Heuristic Evaluation
  • UI Design System Guide
  • Home Site Tree Mapping
Original Website & Mobile Site Evaluation

My team and I analyzed the orignal website for key usability problems and formatting issues and found things that were ok (Green) things that needed work (Yellow) and things that definitely needed to be changed (Red).

Design System Guide & Site Map

After observing the original website's colors, we decided to keep most of the core colors the same, but adjusted for contrast visibility. We also categorized what our design elements would look like consistently throughout the website.

Before we started wireframing, we developed a user site map that would be the basic bone structure of the website's home page.

Wireframing

Wireframing the Web/Mobile Site

Our next step was to create our wireframes. We decided to create a wireframe for the Home page and the Service Dog Adoption page for both the web design and mobile design.

  • Website Wireframes
  • Mobile Wireframes
Website Wireframes

We designed the wireframes of our redesign to be very similar to the Handi-Dogs original website, with just some key changes.

Mobile Wireframes

As for the mobile site, due to its original lack of functionality, we had to get more creative and implement a new design layout for the information to be displayed consistently, clearly, and accurately.

Testing

Testing Our New Design

We filled in our wireframes with real content to test out our designs with the user testing platform Maze. We sent our website out to multiple people in order to gain feedback and integrate our designs.

  • Maze Testing and Results
Maze Objectives

• Pretend you are in need of adopting a service dog. Search the website to find information about funding.
• Read stories about real people and their service dogs.

Maze Results and Iterations

Our feedback response was overwhelmingly positive. We made small iterations, but mostly left the larger components as they were.

Try It Out

Test For Yourself!

Feel free to click through our redesign of the Handi-Dogs website. Please keep in mind, there is not full functionality and some things that may appear clickable will only be for demonstration purposes.

Other Projects

Next project