PAWS Chicago Website Redesign

Uniting Hearts, Homes & Hope

Building No-Kill communities through adoptions, compassion, and volunteer engagement.

A redesign of the PAWS Chicago website which fosters increased community engagement, support, and makes volunteering a more inviting experience.

My Role: UX/UI Designer

Team Members: 4

Time: 3 weeks

Tools Used: Adobe Illustrator, Figma, Google, Trello

PAWS Chicago Website Redesign Image

Problem

The current PAWS Chicago (“PAWS”) website lacks a streamlined design. It hinders potential adopters, donators, and volunteers from seamlessly engaging with PAWS Chicago's website and fulfilling their mission.

Solution

Redesign the website to highlight the PAWS mission

Make Volunteering and Adoption a focal point of the website

Enhance color scheme to make the website accessible to all while maintaining consistency

Design Process

Design Process

Qualitative Research

As user researchers, our goal was to comprehend the specific information users seek when navigating the PAWS Chicago website, ensuring the provision of clear and relevant content for a pleasant user experience.
In this research project, we planned and conducted 9 interviews with a stakeholder and potential users that were animal lovers or had behaviors/characteristics matching our proto-persona in the Chicago area.

8

1-1 Interviews

1

Stakeholder Interview

Key Learnings

Too many complex levels to the navigation menu

Uninviting and outdated

Stakeholder mentioned that they have a of lack volunteers

Heuristic Evaluation

PAWS Chicago Heuristic Evaluation

Competitive Analysis

PAWS Chicago Competitive Analysis

PAWS Chicago Original Color Analysis

The PAWS Chicago Website currently has an analogous color scheme that does not meet most accessibility standards.

Recommendation:Adjust the colors to allow for better readability for all viewers including the visually impaired. These changes include providing more contrast and possibly adding an additional secondary color palette to add shade and tone variety.

PAWS Chicago Website Original Color Palette

User Persona

African american woman wearing yellow sweater holding puppies - Image by wayhomestudio on Freepik
Age: 36
Location: Chicago
Industry: Psychology
Income: $95k

Julia Vincent

“I love being with animals; they bring a smile to your face no matter what's going on”

Interests

Animals

Giving Back

Social Events

Charities

Outdoor Activities

Pain Points

Overwhelming adoption process

Career can be demanding at times

Needs & Goals

Easily accessible info on pet adoption

Connect with other animal lovers

Companionship

Emotional Support

Solutions

Find a great organization to adopt a dog

Continue a relationship with the organization by volunteering

Journey Map

User Scenario

Julia wants to adopt a dog but she doesn't think that's enough. While looking on the PAWS website, she sees that she can volunteer so after she applies to adopt a dog, she also applies to become a volunteer.

Goals

Adopt a dog

Find a way to do more for the PAWS organization

Enhance the wellbeing of animals

Experience

PAWS Chicago Journey Map Experience PAWS Chicago Journey Map Emotions

Opportunities

Highlight volunteering opportunities and volunteering on the site. Create ads for PAWS on various platforms.

User Path Based on Stakeholder Input

PAWS Chicago User Path

Information Architecture

After performing card sorting and conducting usability testing, we found that there are too many sublevels to the website. We decided that it is better for users if we simplify and streamline the navigation to only have one primary level.

PAWS Chicago Sitemap

Brand Style Guide

PAWS Chicago UI Style Guide

Wireframes

PAWS Chicago Wireframe Home

Usability Testing

Version 1 & 2 Testing

As user researchers, our goal was to comprehend the specific information users seek when navigating the PAWS Chicago website, ensuring the provision of clear and relevant content for a pleasant user experience.
In this research project, we planned and conducted 9 interviews with a stakeholder and potential users that were animal lovers or had behaviors/characteristics matching our proto-persona in the Chicago area.

6

1-1 Usability Tests
Draft 1

5

1-1 Usability Tests
Draft 2

Key Learnings - Draft 1

Hero Banner is inconsistent with the rest of the site

Font is too small

Key Learnings - Draft 2

Centered Typography looks awkward and is hard to read

Buttons, Sizing & Padding are inconsistent

Banners shouldnt cover images & pictures are pixelated

Homepage Version 1

PAWS Chicago Home Screen Version 1

Version 3 Testing

PAWS Chicago Home Screen Version 3

Key Learnings

Carousel card transition needs to be smoother

Navigation was easy to discern

User would prefer the buttons to be above the fold on Ways to Help page

Provide addresses for the volunteer locations

Form alignment and length deters users from proceeding

Large picture on the homepage makes the page look off balance

The volunteer page is wordy

Condense mobile footer

Images in the hero banner appear to be cut off

Content and pictures might benefit from more spacing

Footer looks cluttered

Header and navigation bar are too thick

"It looks really clean and easy to navigate!"

10

1-1 Usability Tests

10

A/B Tests

A/B Testing

Option A Pros: Engaging, Adds a personal touch to the locations, gives a brief description and has the address.

“I think the descriptions are just adding words that are not necessary”

Option B Pros: Takes up less space, allows user to go directly to page to get the information if they want it.

Hi-Fi Desktop Prototype Pages

PAWS Chicago Hi-Fi

Desktop Prototype

Mobile Prototype

As a group we are proud of our site, it looks approachable and easy to navigate. We appreciated the continuous stream of feedback as it only made our design better each time.

Our team made a case study to show the full design process and share more information about some of the challenges we overcame.