A Pet Adoption Flow

UX Design | Responsive Website
A Pet Adoption Flow

Project Overview

Products Icon

The Product

The lounge is an animal rescue dedicated to saving companion animals' lives and preparing them for their journey to a new, safe, and loving home. The typical users are adults over 21 years old who can commit, afford, and care for their companion animal. Lounge's goal is to make the adoption process fun and hassle-free experience for its users.

Duration Icon

Project Duration

December 2021 to January 2022

Problem Icon

The Problem

The current adoption process is overwhelming, and users don't have the clear, detailed required information upfront before getting emotionally involved.

Goal Icon

The Goal

Design a user-friendly website, especially an adoption flow, by providing all the necessary information upfront and making the adoption process hassle-free and fun for users.

My Role

My Role

UX designer. I led and designed the adoption flow from conception to delivery.

Responsibility Icon

Responsibilities

I conducted interviews, paper and digital wireframing, and low and high-fidelity prototyping. I also conducted usability studies, accounted for accessibility, and iterated on responsive designs.

Understanding The User

User Research Summary

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. Users want to have clear, detailed information and requirements in advance and a well-structured adoption flow. However, many shelters websites are overwhelming and confusing to navigate and find information, which frustrates many target users and causes a pleasurable experience of adopting a pet to become frustrating for users.

User Research Pain Points

Navigation

Shelter's website designs are often busy and visually cluttered, which overwhelms users.

Interaction

Lack of call to action and indicators to guide users where to find information or where to start the process leads to disappointed and lost users.

Experience

Adoption flows are overwhelming and not engaging due to the length and the time users spend completing one, which makes the online adoption process a hassle.

Empathy Map

I created an empathy map for each of the users I interviewed and then made an aggregated empathy map to demonstrate the complete understanding of users.

A Pet Adoption Flow | Aggregated Empathy Map
A Pet Adoption Flow | Aggregated Empathy Map

Persona: Ashley

A Pet Adoption Flow | Persona
A Pet Adoption Flow | Persona

User Story

As a busy registered nurse and a mom, I want to Have quick access to information and a flexible appointment system so that I can arrange my schedule with my partner and work without overlapping or compromising anything.

Problem Statement

Ashley is a busy registered nurse and a mom who needs to have quick access to a clear and detailed information because they want to arrange the schedule with partner without overlapping or compromising anything.

Persona: Mike

A Pet Adoption Flow | Persona
A Pet Adoption Flow | Persona

User Story

As a busy individual and father of two, I want to know all the requirements in advance so that I can be prepared and efficient with my limited time.

Problem Statement

Mike is a busy individual and a father of two children who needs to know all the requirements and information in advance because they want to be prepared and more efficient with their limited time.

User Journey Map

I created a user journey map of Ashley’s and Mike's experience using the website to help identify possible pain points and improvement opportunities.

A Pet Adoption Flow | User Journey Map
A Pet Adoption Flow | User Journey Map
A Pet Adoption Flow | User Journey Map
A Pet Adoption Flow | User Journey Map

Competitive Audit

An audit of a few competitors' websites provided direction on gaps and opportunities to address with the adoption flow.

A Pet Adoption Flow | Competitive Audit
A Pet Adoption Flow | Competitive Audit

Crazy 8s

I used the Crazy 8s method to develop ideas. My focus was on finding a straightforward way to make the experience smooth and easy and address the users' needs and pain points.

A Pet Adoption Flow | Crazy 8s
A Pet Adoption Flow | Crazy 8s

Starting The Design

Information Architecture

The website's navigation is the primary pain point, so I used that knowledge to create a sitemap. First, my goal was to make strategic information architecture decisions to improve the overall website navigation. Next, I structured the design and made sure the flow was similar to existing products in the market, simple, and easy to use.

A Pet Adoption Flow | Information Architecture
A Pet Adoption Flow | Information Architecture

Paper Wireframes

Next, I sketched out paper wireframes for each screen for my website, keeping the user pain points about navigation and browsing, especially for adoption flow in mind.

A Pet Adoption Flow | Paper Wireframe Sketches
A Pet Adoption Flow | Paper Wireframe Sketches
A Pet Adoption Flow | Paper Wireframe Sketches
A Pet Adoption Flow | Paper Wireframe Sketches

Because Lounge users access the site on various devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive. The wireframes variations focus on optimizing the navigation experience for users.

A Pet Adoption Flow | Paper Wireframe Screen Variations
A Pet Adoption Flow | Paper Wireframe Screen Variations

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing proper button locations, indicators, and visual element placement on the pages was crucial for my strategy.

A Pet Adoption Flow | Digital Wireframe
A Pet Adoption Flow | Digital Wireframe

Digital wireframe screen variations

A Pet Adoption Flow | Digital Wireframe Screen Variations
A Pet Adoption Flow | Digital Wireframe Screen Variations

Low-Fidelity Prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow. After receiving feedback about the adoption flow's overall experience, placement of elements, and page layout, I made sure to listen to the input. So, I implemented several suggestions in places that addressed user pain points.

A Pet Adoption Flow | Low-Fidelity Prototype
A Pet Adoption Flow | Low-Fidelity Prototype

Usability Study Parameters

Study Type

Unmoderated usability study

Location

United States, remote

Participants

5 participants

Length

20-30 minutes

Usability Study Findings

- Connections

Some pages were not properly connected, users were not able to go to the main page or one step back.

- Structure and layout

Users were frustrated with the number of steps completing the main task.

- Content

Some information were repetitive and also occupied the digital real estate.

A Pet Adoption Flow | Before After Usability Study
A Pet Adoption Flow | Before & After Usability Study

To bring the user's focus to one task at a time, I rearranged the elements and removed all the unnecessary visual clutters to achieve a minimal and straightforward page design.

A Pet Adoption Flow | Before After Usability Study
A Pet Adoption Flow | Before & After Usability Study

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Refining The Design

Mockups

Based on the insights from the usability study, I made changes to improve the adoption flow. One of the changes I made was removing the repetitive content that occupied digital real estate. This allowed users to focus on the main task and gave the overall page more negative/white space.

A Pet Adoption Flow | Mockups
A Pet Adoption Flow | Mockups

High-Fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype. In addition, it included the design changes made after the usability study and several changes suggested by members of my team.

View A Pet Adoption Flow High-Fidelity Prototype for; Desktop | Tablet | Mobile

A Pet Adoption Flow | High-Fidelity Prototype
A Pet Adoption Flow | High-Fidelity Prototype
A Pet Adoption Flow | Product Mockup
A Pet Adoption Flow | Product Mockup

Accessibility Considerations

1. I used headings with different-sized text for a clear visual hierarchy.

2. I used landmarks to help users navigate the site, including users who rely on assistive technologies.

3. I designed the site with alt text on each page for smooth screen reader access.

4. I ensured that all the colors and contrasts aligned with accessibility guidelines.

Responsive Design

A Pet Adoption Flow | Product Mockup
A Pet Adoption Flow | Product Mockup

Going Forward

Takeaways

Impact

Our users shared that the design was intuitive, engaging with all the visual elements and indicators, and demonstrated a clear visual hierarchy.

What I Learned

Slight design change can have a significant impact on the overall user experience. The most important takeaway for me is to always focus on the user's actual needs when designing ideas and solutions.

Next Steps

1. After launch, conduct a follow-up usability testing on the adoption flow and new responsive website.

2. Identify any additional areas that need attention and iterate on the design.

3. Ideate on new beneficial features for users.

Sticker Sheet

No items found.

Other Projects

Hello,  Let’s Talk!

Fill in the form to contact me or send an email to shana.safarzadeh@gmail.com

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Understanding The Users
Starting The Desing
Refining The Design
Responsive Design
Going Forward