Helping Paws - Website UI Redesign

UX / UI Design Project Case Study

PHASE 1: Research & Analysis

Heuristic Evaluation

Doing a complete analysis of the site helped us break down the pages into their individual components and get a better idea of the thought process behind the design. This analysis would provide a guide for our research.

1. Top bar navigation with arrows indicating a dropdown menu.

2. Donate text doesn’t contrast with the button’s background.

3. Social media iconography in an odd spot / not stylized to match the rest of the website.

4. Could have a CTA button.

5. Cards could use subheadings to provide more descriptions of what they link to.

6. Text is within an image. Should be HTML text.

7. Affiliated organization images are not links.

Competitor Analysis

We looked at three different websites with similar goals including the parent organization of Helping Paws.

Interviews

We created a research plan to identify what people would need in a service dog website. We conducted interviews with six different people with varying levels of experience with service dogs.

Sample Questions

What features would you prefer to see right away on the website?

What are some things you might find on a site that would make you question its trustworthiness?

For what reasons would you not be able to navigate a website?

Key Insight

More than anything, this quote from one of our interviews really helped inform the next steps of our device project:

“My dad, who has a severe disability because of a stroke...he would need really large and obvious type. He would need really obvious buttons and an email thing maybe that, like, pops up because I don't know if he would have the cognitive ability to type an email. Maybe just even like a phone number. ‘I'm interested call me. My name is Jack.’ Okay. That's what he could do.”

Affinity Diagram

We took our insights from the interviews and sorted them with similar insights to determine which areas required the most focus.

Persona

We created a persona to help us empathize and establish specific needs that we can focus on addressing. Sarah Schoeder is the type of person who wants to be independent and could benefit from a service dog, but doesn’t really know where to begin looking for one.

PHASE 2: Definition

User Insight

Sarah needs a company/website that gives her easier accessibility to navigate quality information in regards to adopting a support animal, so that she can adopt a dog further her independence and quality of living.

Problem Statement

We believe improving the accessibility components, navigation, and content on the helping paws website for people with physical disabilities and PTSD will achieve more independence and higher quality of life, while simultaneously generating new clients for the helping paws company.

UX Hypothesis

We believe Helping Paws will receive more donations and have an increase in the number of people seeking their services if users with disabilities and PTSD have an improved experience when using their website and are able to quickly find what they need. We intend to improve the user's experience when using Helping Paws through the implementation of a more sleek design to inspire trust in addition to options that will make the site more accessible to those with vision impairments.

PHASE 3: Ideation

Feature Prioritization Matrix

We used Miro to facilitate brainstorming and ideation. We used the “I Like, I Wish, What If” method to attempt to generate some ideas. Once we had those ideas together we looked at how difficult each idea would be to implement.

Features to focus on for this project

• Accessibility pop-up with text enlargement option

• Voice command

• Improved visibility

• Button enlargement

• Improved navigation/visuals

• Make the site easier to navigate

• Connect external links to accreditation images

• Make sure all buttons have proper contrast

Future opportunities

• Voice search

• Survey to access user’s needs

• Augmented reality to see how large a dog would be

Storyboard

To better tell Sarah’s story and how the new Helping Paws website would help her we created a storyboard showing her journey.

PHASE 4: Prototyping

Navigation Redesign

To redesign the navigation, we had four main goals:

• Remove Duplicate Pages

• Make the design more consistent

• Add responsive feedback to navigation items

• Make the site look more aesthetically pleasing and professional

Sitemap

We went through two iterations of the site map. The first version had three tiers to the navigation. For some reason, we thought it would be a good idea to have the only third-tier menus located in the ‘Our Programs’ tab while the rest of the sub-menus only had secondary pages. After we received some feedback on this decision, we decided to make ‘Service Dogs’ and ‘Breeding & Training’ main tabs and promote the tertiary pages to secondary pages. If all of this is confusing, you can just look at the images below to see the difference between our first and second versions.

We also changed ‘Breeding & Training’ to ‘Development & Training’ because we felt listing ‘breeding’ in the sub nav underneath a tab that already says ‘breeding’ would be confusing.

Sketches

Some of our initial ideas for how the site should look.

Lo Fi Wireframes

Desktop

Mobile

Mid Fidelity Desktop Wireframes

UI Style Guide

Accessibility Toggle

The Accessibility Toggle button allows the user to enlarge the text, change the whole site to black and white, and also turn on tooltips captions to better explain images. These images can be turned on in any combination.

Demonstration

Here’s a .gif version of the site’s accessibility navigation button being used. I would have liked to make this gif larger, but file size restrictions limited how large it could be.

Figma Prototype

Here is the full prototype version that you can try out for yourself.

PHASE 6: Conclusion + Future Opportunities

We accomplished a lot with this project. I’m really happy with how the UI looks. It would be possible to make something more modern and cutting-edge, but I think that over-designing an interface for aesthetic reasons and not for accessibility would only detract from the purpose of the site. By focusing on legibility, accessibility, and enabling the user to control their experience I believe we added a great deal of value to the site.

We got a lot of positive feedback on this project, however, we did have some valid criticism regarding our persona. Based on who we interviewed, we should have based on goals less on a user with disabilities and perhaps more on someone providing assistance to a person interested in the services of Helping Paws. This was a key learning moment for me that I would consider on future projects.

Next Steps

Some iterations we feel like we could make moving forward

• Make accessibility feature more noticeable

• Voice functionality

• User tests on actual Helping Paws clients

• Feedback from the Helping Paws organization

Thank You for Reading

More Case Studies