Project 2: Create a responsive website in Adobe XD

The Product:

Create a responsive website in Adobe XD: A regional Animal Adoption website called "More Than People" (MTP)

The Scope, Goal & Challenge:

Create an adoption website for a regional Shelter organization that prospective pet parents can use when looking to adopt an animal. With animal not limited to dog and cat, but including specialty, barn and equine: keeping it simple was the biggest challenge

My Roles:

UX Designer

UX Researcher

UX Writer

Duration:

September 2021 - December 2021

(4 months)

Responsibilities:

Primary & Secondary research (competitive audit & interviews)
Personas, Empathy maps, Storyboards, Wireframing (paper and digital)
Lo-Fi & HiFi prototypes - including iterations
Conducting Usability studies
Copy & Content

Understanding the User

User Research

Personas

Site Mapping

User Research

User research was conducted in 3 parts:

Secondary Research commenced with overall data & statistical research on US pet ownership since 2015.
Secondary research: across 4 national and regional adoption sites
Primary research consisted of tailored individual interviews with intent to adopt.

Personas

Garrett 56 years old and lives with his wife, Tori in Ann Arbor, MI with their 2 dogs. They both work full-time, demanding jobs and schedules. They are weekend warriors: weather permitting hiking or kayaking with their dogs, meal prepping, taking time for their own hobbies. If they travel - which they do, they get a pet sitter for their dogs to stay home at times. They have kids but just became empty-nesters with their 2nd child going to college.

Sonya is a 34 year old full-time teacher, and lives with her wife Kristen, their 2 children Jayden and Rosie, their dog Simon in Naperville, IL. Both have full time jobs with flexible schedules. Someone is always in the house to be able to be with the animals. All family members have routines but are flexible in them. They do like to take each weekend without plans, but if they do make plans - they try to bring their dog along. The cat rules the home.

Site Mapping

Creating the site structure establishes the blueprint and initial flow to start the design process.

Design Initiation & Testing

Starting with Paper wireframes again as this will be the first project for a website.

Low-Fi Prototyping & User Testing

2 rounds of usability testing:

Round 1 Findings

Home page layout & navigation menu at the top were usable.
The quick-preview page information was overwhelming and needed to be simplified.
Users were easily able to navigate within the homepage and adopt page each – however navigation between pages was not intuitive.

It was not obvious for users that the ‘Adopt’ page is where they go to search for pets.
There was opportunity to make the log in process/ account page easier.
Changing quick preview to full pages allowed user to have improved experience with content they were searching for.

Round 2 Findings

Low-Fi Proto Connection Points

Low-Fi Proto Video

Refine the Design

Mock-Ups Before & After

Usability testing resulted in iterated mock-ups and site flow...

Hi Fi Proto Usability Testing Findings

All users ranked the site’s overall layout, navigation & content. Easy to follow & easy to use.
Half of the participants provided contextual feedback that the website seemed too steril, and did not have the emotional pull they would expect from an adoption website.
Half of the users noted that it was difficult to read some of the information as the font was too small.
All participants noted that the success stories expanded pages felt too busy & did not provide additional information to what the smaller thumbnal preview already stated.

Home Page Mock-Up Before & After

Hi-Fi Proto Connection Points

Hi-Fi Proto Final Product Video Tour