project showcase

Utah Animal Rescue

Role

User Experience Designer

User research, wireframing and prototyping

Project type

Conceptual Project

Project duration

Oct 7-15 2021

Project summary

This is a conceptual project in which I designed a responsive website to make adoptions run more smoothly and try to remove common headaches people face when trying to adopt their new best friend.

see it here→

Some details about this project:

After the client, Supermassic, found my portfolio by chance, I was sent an email to join the Supermassiv team as a freelance designer. I was happy to work on their interesting project! The client wishes to make music NFTs accessible to people who know all about NFTs , those who have no experience with them (like myself), and anyone in between.

I was given the task to design a "drop page" which is where music artists would share a link to their followers to follow and purchase their music NFT. I was given a list of goals and objectives, as well as their prior style guide which they wanted to simplify. I made several screens for the drop page which included a: screen with a launch countdown, purchase page, page to view current collectors and responsive versions of these screens for tablet and mobile.

After my designs were approved, a developer worked on the coding using my designs on Figma. I coordinated with the client and developer on any changes needed during the development process and refined my designs based on any coding issues that were brought up. My second task with Supermassiv was to create their landing page. I sent over wireframes based on their requirements and worked on final designs when those were approved. I sourced and edited illustrations on Adobe Illustrator and was able to transform their previous style into a cleaner, simpler aesthetic that they requested.

I will continue to add more details about this project soon.

Live Link TBD: The link to the live site will be added when the product is launched.

THE PROBLEM

Why an Animal Shelter Website?

2020 saw a spike in pet adoptions. As more people worked from home, many of them seeked companionship from animals. I’ve designed a web flow to easily meet and adopt a pet from an animal shelter. Users set up their profile and background information ahead of time for the shelter to approve. Users are able to view extensive information about the dog or cat’s behavior, personality and health and are even shown a video prior to scheduling a visit. The goal is to match humans to their new best friends.

The research

I conducted user research through a small sample survey to discover demographics of pet adopters and their experience in adopting an animal.

  • When asked “What did you like or dislike about the adoption experience?” some respondents mentioned that they enjoyed meeting the animals first and appreciated that animals were vaccinated and spayed/neutered, however the website advertised more animals than were actually available to adopt, the application process took longer than expected, and vague adoption profiles often left out key information about an animal of interest.
  • When asked “What factors helped you decide on which animal to adopt”, several respondents mentioned meeting the animal and seeing their compatibility, a detailed profile on the animal that helped match them, and recommendations from the shelter.
  • When asked “If you were to begin the adoption process on a website first, what features would help the process?”, several respondents mentioned pictures of the animals, descriptions of their age, known history, and whatever is known of their personalities would be helpful, as well as information about the shelter and adoption fees.
“We were able to go into the kitten room and play with the kittens before picking one. However, they didn’t have quite as many kittens as expected. There were lots more advertised on their website that had been already adopted by the time we visited.”

Problem Statement

Potential animal adopters of a local animal shelter need a way to learn as much as possible about an animal and have a profile approved ahead of time in order to adopt a companion animal that is compatible with them.


Who is using this website?

I created a user persona based on the findings above, encompassing the demographics, frustrations, and goals of the survey respondents I believe this persona could help me focus on who to design for. Having a persona is useful to tie decisions on a real person one can empathize with instead of just creating a website.

The User

Iris Silva

Age

28

Education

Bachelors degree

Hometown

Salt Lake City, UT

Family

Lives with boyfriend

Occupation

Librarian

“I can’t wait to adopt another cat. I’d love for Nigel to have company while we’re at work”

Bio

Iris loves animals, growing up she always had a pet of some breed so when she moved out she obviously got a pet of her own. She believes in adoption instead of purchasing from a breeder. She adopted her furbaby Nigel when he was a kitten from a local animal shelter. The process was not as great as she would have liked. Although she loves Nigel, it would have been great to know about his anxiety beforehand so she can prepare for it. Now she and her boyfriend Steve are ready for another cat, Nigel needs a friend after all! She hopes the process is better this time.

Personality

Friendly, Loves books, Introvert

Frustrations

A lot of the animals the pet adoption website showed were already adopted. Fees and process were not disclosed ahead of time. Behavior issues were not disclosed.

Goals

Adopt a second friendly cat that will get along with her current cat, Nigel. Be able to interact with the cat before adopting them. Be able to easily search size, age, and temperament of the cat.

The Design Process

The Site Map

I created a sitemap to create a full overview of usability. It helped to brainstorm which pages led to which, and how these pages would connect to complete the user goal: to adopt an animal they will love.


Paper and digital wireframing

Through user research, creating a persona, and creating a site map, I conducted a 15 minute sketching session to quickly produce design ideas which I then translated to Adobe XD as a digital wireframe.

  • The home page has a hero image of a shelter pet to quickly grab the user’s attention.
  • On the hero image is a headline and two buttons, one to adopt and another to donate, with the assumption that visitors to the website will likely have one of these tasks in mind. Below the hero image is a story of a successful adoption, again to capture the user’s attention and portray hope in the adoption process with an example of a great outcome. Below this will be some featured articles on pet care, and adoption advice.
  • On the adoption page is a filter to choose the type of pet and the criteria the user wants to select. Each pet has a heart button so users can browse and go back to the list at a later time to select the animal they would like to adopt. Each animal has their name, gender, age and some top traits users may find important to them, such as special needs or activity level.
  • Each pet listing opens up to the pet’s profile, here is where users can see a more detailed description of the pet, including background, personality and additional photos/video. The side bar has pet listings with similar criteria.
  • When a user chooses to meet the animal, a pop up appears allowing them to schedule a visit. The headline reminds them to complete their profile and background information and includes a link to their profile. When the user confirms all information, they click confirm, they will then receive an email confirmation that they will need to show during the appointment.

Lo-Fidelity Prototype

While creating the lo-fidelity prototype I made several design decisions based on how I felt a user would interact with the desktop or mobile website. A user would presumably start at the homepage and have a specific goal in mind, likely to either adopt an animal or help with animals. This flow focuses on adopting.

After clicking the adopt link they are brought to a page of animal listings they can filter based on type of animal, size, gender, etc. They are able to favorite listings that interest them. When clicking on a pet listing they can view information pertaining to the animal’s behavior, adoption fees, vaccinations and more. From here they can schedule a meet with the animal to see if they are a match.

No items found.

Usability Study

Findings

I conducted unmoderated usability studies with five participants. Two men and three women between the ages of 26-40. I gave them several tasks to complete and vocalize any thoughts and frustrations they may have.

Follow-up questions

  • Is there any place where users are getting stuck?
  • Does the user feel motivated to adopt an animal through this website?
  • Is there a feature users would desire to make the experience better for them?
  • How quickly can users get through the tasks?
  • Is the website accessible?

The tasks

  • Prompt 1: View listings of animals and filter to only see cats.
  • Prompt 2: Favorite a cat’s profile.
  • Prompt 3: View a cat’s profile
  • Prompt 4: How would you set up a meeting to meet a cat?
  • Prompt 5: How did you feel about this adoption website overall? What did you like and dislike about it?


the outcome

Refining the design with mockups

I added a hero image that would capture the user’s attention and emotion. The adopt and donate buttons are front and center but are also located on the menu. The home page includes a featured success story, articles with tips, and a footer with contact information, their address and hours, a newsletter signup, and social links.

I also created a sticker sheet to easily reference my design choices and themes all in one organized space.

High-Fidelity prototype

The high fidelity prototype includes a search filter, favorite button. and leads the user through the process of scheduling a meet with the pet. The hope is that the user would have a profile prefilled and approved by the shelter so when a user sees an animal available on the website and schedules to meet with them, application delays would not be the cause the animal to be adopted by another family, which was a common frustration during user research.

User avatar clicks to profile

Search bar for users who know what they want

Categories for users who have some idea of the type of item they want or want to browse.

Popular items featured for users who have no prior preference for items

Bottom bar contains home, browse, favorites and cart buttons.

Scroll bar with menu categories fixed to the top

Filter button for more
specific needs

Item card with name, image, price, and a short description

Favorite button

Item description with
more detailed information.

Large add to cart button with price

Allergen information with illustrated icons

Toggle between pickup or delivery

Shortened item summary with option to add quantities

Tip option has set amounts with an additional option to remove tip or input a custom amount

Recent payment option is saved with an arrow to toggle options to change payment method

Order status changes based on stage of preparation

Timer with estimated
time order will be ready

A QR code makes it quick and easy for bakery staff to locate a customer’s order

Button to notify bakery of customer’s arrival

Points for rewards would encourage customers to order again in the future

Address with a button to link
to phone’s default map app

User avatar clicks to profile

Search bar for users
looking for a specific book

Easy-to-find toggle between dark and light modes

Recommended books
based on previous loans

Bottom bar contains frequently used pages such as: Home, Search, Loans, Favorites and Profile

Current loans front and center

Share button to send book link to others and a bookmark to read the book later

Book cover image with title and author

Tabs with book description and reviews

Buttons to borrow or preview book

Number of available loans

Tags with book categories and genre

Loan expiration timer with oldest loans at the top

Renew button to start process of extending the loan time

Return button to end loan early

Navigation bar with relevant pages

Hero image to set the tone of the overall website experience.

Large buttons with the top CTA buttons users are assumed to use.

Articles for users browsing the website.

Featured story to show adopters how
successful the shelter has been at matching
humans to animals.

Bottom bar contains home, browse,
favorites and cart buttons.

Filter buttons with typical pet finding characteristics

Pet listings have an image and major characteristics such as age, size, breed and activity level.

Personality traits, key information, breed details.

Detailed information with pet's
background and history

Adoption process and pricing

Similar matches

Conclusion

Takeaways

Creating a survey on animal adoption opinions and demographics was useful to know problems I would not have thought of on my own. As for the website itself, I have three adopted animals and animal shelters are quite amazing, it’s a place for people to find a new member of their family, and a place for animals to get a second chance at a happy and healthy home life. Were I to continue to work on this case study I would conduct more rigorous user testing and develop the user flow with more detail, including filtering animals by more specific parameters, seeing if users get stuck, and possibly create a user flow of what happens when a user has met the animal and wants to continue with the adoption.

see it here→
Images sourced from unsplash.com and pexels.com. Pet descriptions and text sourced from petfinder.com