top of page
cover.png
Overview
Frame 13538.png

INTRODUCTION

Project Overview

Adopt a Rescued Friend, a Houston-based animal shelter that helps abandoned animals find forever homes, needs to modernize its website with a clean aesthetic and user-friendly interface to facilitate the adoption process easier for future pet owners.

MY ROLE
 

Collaborate with 3 UX/UI team members with a contribution to

  • User research

  • Definition-ideation

  • Prototyping

  • User testing

  • Visual design

TOOLS

  • Figma

  • Photoshop

  • Slack

  • Google Suite

  • Canva

TIMELINE

3 Weeks (Part-time)

The solution

​Introducing a new design that streamlines the administrative process and assists both potential pet owners and stakeholders find a perfect match quickly

Design process

desgon prokfdpao.png

EMPATHIZE

Understand the problem

Identifying the problem spaces and analyzing UI and heuristic evaluation regards to its effectiveness, relevance, and usability of the contents

Empathize
Image by Vlad Busuioc

City Problem

  • Many homeless pets in the city of Houston

  • Covid-19

Image by Gabrielle Henderson

Organization Problem

  • Adoption process is too long

  • Negative experiences when adopting

Image by Bermix Studio

User Problem

  • Wants to help the homeless pets but has limited time

  • Don’t know where to start when want to adopt one

Frame 13536.png

Current Website

Research key takeaways

Takeaway 1

User gets lost while browsing the website

Takeaway 4

User cannot filter results to find a specific pet

Takeaway 2

The three navigation and search bars are difficult to use

Takeaway 5

The options to adopt are not clear

Takeaway 3

​User cannot easily find more pictures of the pets

Takeaway 6

The pet images are too small

​

Discover user insights

Gathering insight information from stakeholders and performed five zoom interviews and Instagram surveys, receiving over 280 responses from people ranging in age from 18 to 45

Stakeholders interview findings

  • Trying to get as many animals adopted as possible

  • Process takes way longer than expected because the adoption form is difficult to follow

  • They get a lot of questions from people about how to fill out the form 

  • Don’t have the time or skillset to make the website look better

cynthia-smith-vDs0MCYkfQ4-unsplash.jpg

I'd like to find homes for our dogs as soon as possible, however our adoption form and animal search are both terrible! The adoption search has no filters and is impossible to see the different types of animals easily

Interview and survey takeaways

  • The majority of users are considering about adoption but don’t know where to begin

  • Users prefer to see a pet in person because they want to see how it interact with people

  • Users look for size, breed, and personality

  • Users expect to see pictures, descriptions, stories about animals when they search online

Group 177.png

DEFINITION

Our approach

To enhance the content structure and aesthetic, we took 3R approaches: redesign, reorganize, and reduce
 

  • Redesign website to improve site’s appearance

  • Reorganize site map and contents

  • Reduce the lengthy process of adopting a pet

Definition

User persona

Frame 13540.png

Problem Statement

Samantha Smith, a single and energetic female needs information on an animal's personality and traits on AARF so that she can wisely choose an animal that suits her life

IDEATION

​Building a new structure and visual design

Conducting 8 card sorts to create a new sitemap then plotting out a functional user flow. The design concept is straightforward and easy to apply for adoption as well as presenting the pet personality through videos and photographs to future pet owners in order for them to experience a stronger connection

Ideation

Sitemap

7.png

Userflow

Getting Pre-approved to Adopt Phase

8.png

Storyboard

9.png

Low-fi Wireframe

Wireframe
10.png
User Testing

PROTOTYPE

Prototyping and User Testing

​The low-fidelity wireframe emphasized on structural elements that would make the redesign accessible and functional. Then we developed it into a mid-fidelity wireframe and set usability testing by giving the users three tasks to complete

  • Can the user use search filters?

  • Can the user set an appointment to meet a pet?

  • Can the user fill out the pre-approved adoption form and meet Milloh?

Mid-fi Wireframe and Test Results

12.png

Style Guide

13.png

High-fidelity Wireframe

14.png
15.png

Desktop Prototype

CONCLUSION

Reflection and Future Opportunities

  • Our first time using pictures with no backgrounds and using GIF’s to represent videos

  • Learned a lot about using advance components and variants for prototyping

  • This project challenged us from a visual design perspective, and it made us realize how much we love this process

  • Learned a lot from each other in the design process and how we executed tasks

Next Step

  • Further research to create cat profile pages

  • Set up online meeting feature

  • Create a design for tablet sizing

Prototype
Conclusion
bottom of page