AHeinz57 Pet Rescue

A mobile and responsive website design of a pet adoption flow for an animal shelter.
Role: Product Manager, UX Researcher & Designer
Duration: June ‘23 through Aug. ‘23

Background

When choosing an animal shelter, Sue wanted to use something familiar and a business that could use a little help with re-branding as well. AHeinz57 is a shelter located in DeSoto, IA. They’re out there doing some of the most selfless work, they rehabilitate animals, take down puppy mills and hoarding emergencies, the works. Sue’s goal was to modernize their website & content, and make their pet adoption flow more streamlined and neat.

Problem

When navigating their current mobile and desktop site, its congested with a lot of information and content. Users are not completing the task they had in mind because they’re overwhelmed with the information that is being presented to them.

Goals

My major goal is to streamline the adoption flow for their users and a minor goal i’m keeping in mind as well is cleaning up their website design and proposing a full re-brand. With cleaning up the design, I am hoping it will lead to a more catered experience for those using the product to find their future addition to their family.

Research

User Research

The start of my design process starts with me understanding who I’m designing for. That’s where User Research comes into play.
I conducted interviews on 6 participants and from those participants I will compile common themes and place them onto an Empathy Map. The interviews and Empathy Map will really start giving me a good idea of who my Ideal User would be. From the concept of my Ideal User, I will then create a Persona to personify and base the rest of my designing off of.

To access the interview questions and participants’ answers, click here.

Empathy Mapping

The next step in personifying my ideal user is Empathy Mapping. I took their answers, which are color coordinated by person and placed them on the map. As you can see, Participant C’s (gray) answers are the most representative of the participants’ answers. I will be basing alot of my persona off of someone with the same demographics and characteristics of Participant C.

In conclusion of the User Research, I’ve came up with a couple lists to make envisioning my persona even easier.

Target Audience

  • Anyone from the ages of 16+ with internet access

  • Someone wanting to adopt a pet

  • Working class or higher

  • Someone who is looking into the process of adopting a pet

  • Pet owners

Wants and Needs

  • Browse adoptable pets

  • Browse for pets by categories

  • Be paired with options due to specifics of the adopter

  • A simple process to submit interest

  • Contact information for the shelter

  • Policies, requirements, guidelines all laid out

Persona

When stepping into the User’s shoes, to be able to design for the User, the next step is creating a persona profile for an “Ideal User”. A persona in a sense is personifying the data collected into a profile of someone that  would find the product useful. Below is the persona profile for Stephanie. The basis of the product is now based around what Stephanie needs and wants.

Persona: Stephanie M.

Background
Stephanie works from home and is starting to get lonely living on her own. She is thinking that she wants to adopt a pet, she’s open for a cat or dog. Just something that wants to keep her company. Right now when she is doing research the first thing that catches her attention are the pictures of the animals, if she’s being honest.

Demographic
Age: 25 years old
Education: Bachelor’s in Business
Hometown: Vail, CO
Family: Single young professional
Occupation: Entrpreneur

Goal
Get a form submitted so she can start the process of adopting a companion.

Frustration
Right now she’s pretty frustrated with the adoption sites she has seen so far. Theyre an overload of information. Being presented with so much information at once is making her overwhelmed and she doesn’t know where to start.

Competitive Analysis

After I’ve formed an idea of who my user is but before I can start designing, I complete a competitive analysis on the existing market. I do an analysis to see what the competition is offering or not offering. Things that are working and things that aren’t working. The process of getting the anaylsis done for my own research also helps me determine elements and features that I want to take inspiration from and, also things that i want to steer clear of. An analysis helps me in so many more ways than just comparing the competition.

To access the full competitive analysis, click here

Ideation

Now that I have a clear picture of who my User is, I enter the ideation phase of my designing. In this phase I start brainstorming how my product looks and I also start planning the various pages, functions and laying out the a basic idea of the user flow.

Crazy 8 Exercise

Before I get to designing, I have to come up with ideas for the layout for the most important page of my product, the Adoptables page. Usually I start with how my homepage looks, but since this design prompt is centered around the adoption flow, the adoptable which is the page where the adoption flow starts, is the most important.

So the Ideation phase, starts with the Crazy 8 exercise put to use in real-time. I used this as a brainstorming tool to come up with ideas quickly without bias. I tried to keep the designs unique or at least major differences between any similar ideas.

Sitemap

This is another tool that I like to use to help me plan. Using a sitemap is super beneficial to me since it helps me visualize how the pages are going to look without too much time being spent getting into details.

A visual of the clickthrough flow for users

Design

After the ideation phase, this is really where I start the bulk of my designing. I begine with hand drawn wireframes so that I can get ideas down quickly and edit as I go. Nothing is permanent and I can mark things up freely without too much time being taken or too much thought into it.

Wireframes

After deciding on a layout from the Ideation phase, I start my designing. With designing I like to start with hand drawn wireframes. Since I used the Progressive Enhancement method, my wireframing started with the mobile size. I do like starting with drawn wireframes cause it's easier to just translate onto paper what Im picturing in my head. These are just a very basic idea of what I’m thinking compared to the end product.

Digital Wireframes

When it came time to digitizing my wireframes, I wanted my vision for the product to really start shaping at this point. So instead of leaving it bare bones, I did add some elements that would help others start visualizing. To me the most important feature of my product is the map showing the nearest resources depending on the user’s location. This is not an innovative feature by any means, but for a community resource product, I am not seeing this feature being used. Wanting my product to be one-of-a-kind and useful, the map feature achieves those two goals with one feature.

UI Kit

The UI Kit is made up of elements used throughout the mobile and website design of my product. It is also a resource for designers to reference for any future design and collaboration efforts. It is an active document and will be updated when there is an iteration to the design. The Kit can be accessed here

Prototype & Testing

Mid-Fidelity Prototype

You may be wondering where my low-fidelity prototype is. Although the more traditional design route is designing the low-fidelity prototype, making changes and then designing the high-fidelity prototype. In my process, I consider the wireframes as my low-fidelity design step and then I design a mid-fidelity prototype.

I find when holding a usability test, mid-fi designs render more impactful feedback. Since participants are getting a better image of what I want my final product to look like compared to seeing only placeholder elements. Designing this way, I can get feedback on colors, information hierarchy, layout, and typography before the designs have made it to the high-fidelity prototype stage.

Looped video showing the mid-fidelity prototype being used in real-time

Usability Testing

With my product, I wanted to make sure to do a usability test after the mid-fidelity prototype so that I could catch any flaws in my design before I designed and executed my high-fidelity prototype, and to also uncover any opportunities for change or innovation. With the usability testing, I had the same 6 participants from the User Research interviews be my participants for this testing. Participants B & C were the unmoderated, off-site participants. Participants A, D, E & F were all moderated, on-site participants. While they were using the prototype, I did encourage them to think out loud. For the unmoderated participants I encouraged them to take notes and write down any and all questions that they had while they were using my product.

I conducted a usability study and used the System Usability Scale (SUS) survey after the study. The study took place over the span of a week to give all participants and myself enough time to finish the study. There were 2 unmoderated & 4 moderated studies, all timed from beginning to task completion. The participants’ ages ranged from 19 to 33 years old. Participants were either already pet owners, are thinking about getting a pet or have thought about getting a pet, and they all have navigated pet adoption websites before. 

For the moderated studies, I provided a list of prompts, a laptop for usage & we met at a neutral location like the library or a Starbucks. I advised all participants to ask questions out loud, think out loud so that I could hear & gather data while they were using the prototype. For the unmoderated participants, I sent them a PDF which included links to the prototype and survey, the list of prompts and advised them to time themself & also write down any questions or feedback along the way. 

Access the document with prompts here & access the System Usability Survey (SUS) questions and participants’ answers here

While conducting the Usability testing & SUS survey, I had 3 KPIs I was actively gathering data for:

  1. Time to complete task to determine if my user flow was as intuitive as I had planned. I put time parameters on what is satisfactory & what isn’t. For a mid-fidelity prototype anywhere from 1 minute to 1.5 minutes is satisfactory. Anything longer is viewed as too long to complete the task and have to address to see where the hold up occurred. 50% of participants fell under the satisfactory category, which led me to wonder where there could be opportunity for change. Is it in the user flow itself? Or was there something wrong with my design that made the user flow not as intuitive? When observing the participants, I noticed that my original idea of having profiles highlight when the mouse is hovering over it, was not executing correctly on the prototype. Although that is a nice aesthetic feature, its not something that is important for the user so I did end up taking out that idea for the high-fidelity prototype.

  2. Along with time to complete task, to determine if my product is usable, I’m also asking the question, is the task getting completed? From the usability test, 83% of participants were able to complete the task of “Submit a pre-approval form for Harley the cat”. The other 17% pf participants were not able to submit a form, and I definitely had to get to the bottom of why? When observing Participant F, I noticed that he kept all settings of the prototype as it was presented, in this instance not zooming out. So each time he went to hover over Harley’s profile, it would highlight but then the page would also do this weird jumping back and forth of the scroll resetting to the top of the page. He wasn’t able to get past that hurdle and hence why he was not able to complete the task. With getting rid of the highlight feature, this should also alleviate the issue of the page’s scroll resetting while hovering over profiles. 

  3. Last but not least, in the process of testing to find opportunities for change or innovation, I had all participants answer a SUS survey to test the usability of my mid-fi prototype. For the SUS survey, it is an industry used survey consisting of 10 questions that participants will answer on a scale of 1 to 5. 1 being strongly disagree and 5 being strongly agree, After participants are done taking the survey, I compile their answers and do some manual calculations to find their SUS score. A SUS score of >68 is above average aka prototype usable and a score of <68 is below average aka prototype not usable. 50% of participants had a SUS score of above 68 and 50% of participants had a score of below 68. When evaluating the answers to the questionnaire, I’m seeing a theme that the website could be simpler, which I'm translating that to meaning that the design could be simpler which would lead users to to be able to finish the task and do it quicker.

    Access the document showing the SUS questionnaire answers & the scores calculated out here

From gathering data for my KPIs, I was able to determine that there were indeed opportunities to make my product better for users. I took away the highlight feature when hovering over photos, and I added names to all the profiles on the Adoptables page, with those 2 changes it should improve the Time to Complete Task to all favorable times and also change Task Completed to 100%. I also saw an opportunity to enhance the users experience by adding a sorting menu so that users could further cater their experience to the pet they are trying to adopt.

High-Fidelity Prototype

After the usability testing and while the final iterations were being made, I really felt the design coming together and was feeling happy with it. To view the final high-fidelity prototype, click here

Flow 1: Desktop version
Flow 2: Mobile version

Final Thoughts + Next Steps

Final Thoughts

To walk away with some final thoughts for this project.. Next time I told myself I would NOT design from the Graceful Degradation approach. I don’t think I will ever design from desktop size to mobile again. I definitely learned that, for me, it is much easier adding to the design rather than sizing it down. Kudos to the designers that can design from big to small. I also learned that although even with usability testing throughout, you have to think outside the box sometimes and read between the lines of what users are saying. That sometimes you have to interpret what they’re not saying into meaningful feedback.

Next Steps

Realistically the next step for me would be taking my designs, prototypes and case study to AHeinz57 and seeing if they would be interested in a total overhaul of their website and a full re-branding of their company. If I were still living in Iowa, I may have seriously considered taking this to Amy Heinz of AHeinz, at my day job I work with some people who do personally know her. I could totally pitch this to her. If she were to be interested after that I would just need to hire on a web developer, show them my designs and we’d discuss what is possible, what isn’t, make modifications and then really show Amy the final product.