Project 2

Animal Shelter App

Discovering someone new who completes your family.

Back
Desktop
Tablet

Project overview

The product:

The Mission Animal Shelter site was designed to make things easier for the user by implementing a more efficient way of locating the right addition for a family, whether it be for a large family or just looking for a friend. This site was made for all who enjoy the company of a good friend or share the values for an unconditional love.

Project duration:

Time Spent on the Mission Animal Shelter (M.A.S.) site and app, 5 months.

The problem:

One of the problems that i saw in most apps or websites was the lack of options one has when picking a pet. The other problem that came about in my research, was once you located the right pet for the family you weren't able to place a hold on it.

The goal:

The goal of this app is to ensure that a user not only has a great user experience will using the app locating the perfect pet for the family but that they are satisfied with the final product which is the unconditional love they will receive from their choice.

My role:

My role for this project consisted from Lead UX designer to UX researcher, and anything in between, at times it was challenging but in the end i feel the site became a place to find a true friend.

Responsibilities:

In the beginning my role as research lead to interviewing several people about their concerns in the process of locating and adopting the right pet through the app/website, which lead to me designing the wireframe, mock-up, and finally the prototype.

Understanding The User

Through the 5 months conducting the research and test trials for the site/app, i've went from not knowing the importance of finding the right companion for a family to seeing first hand the instant love between an animal and human, being from a dog, cat or hamster. When conducting my research i come across the same problem from each participant, and that was, when going through the website to adopt a pet they didn't find what they were looking for. From that point I designed the site/app based on giving the users the tools and info to pinpoint the right pet for them.

Navigation

In the beginning of my research with the wireframes, i found that the participants were confused from the point of locating a pet to adopting, so i had to add more info and pages to the process.

Images

I found in my previous research that images matter, so when designing this site/app i made the pictures large and bold, so users have a better understanding of what kind of pet they are choosing.

Wording

I’ve research that heavy text in a site/app is very distracting for users, so when designing this the site/app i made the text simple and large for easy navigation.

Confusion

During my research i found that user were unaware of the statues of their progress, so for this app the user was made mindful of the position of their adoption.

Persona: Kenneth Richardson

Problem statement:

Kenneth Richardson is a Family with kids who wants the perfect pet to enhance the lives of his children .

User journey map

The goal for the Mission Animal Shelter site is to ensure easy access to information needed for the user to make wise decisions when choosing to add a new family member. My thought process was to make the site simplistic enough for anyone to use but elegant enough to keep the users attention.

Starting The Design

Sitemap

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create this site map.My Goal here was to make Strategic Information architecture decision that would improve overall website navigation. The structure I used was to make navigation simple and easy.

Paper wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user’s pain points about, browsing, navigation and the adoption procedures in mind.I highlighted the sections in yellow diamonds, that better suited the needs of the users based on my studies.

Paper wireframe screen size variation(s)

Because Mission Animal Shelter patrons will have different ways to access the site, such as mobile and tablet, I started to work on designs for additional screen sizes to make sure the device would be fully responsive.

Digital wireframes

Moving from paper to digital wireframe made it clear that the design would help address user’s pain points and improve the user experience.Prioritizing useful button locations and visual element placements on the home page was a key part of my strategy.

Digital wireframe screen size variation(s)

The goal was to implement different variations of the site to optimize the amount of traffic for users, who use different devices to access information of a family member they wish to adopt.

Low-fidelity prototype

To create a low fidelity prototype, I connected all the screens involved in the primary user flow of locating the right pet and guide the user through the adoption process.At this point, I had received feedback on my designs from the user studies I conducted early on. The findings included placement of buttons, page organization and visuals. I made sure to listen to their feedback, and implemented many of their suggestions.

Usability study: parameters

Study type:

Unmoderated usability study

Location:

United States, remote

Participants:

4 participants

Length:

20-30 minutes

Usability study: findings

Type of Pet

Every family or Individual have a certain criteria for the right pet, such as, large or small, dog or cat

Location

Most users wish to find the right pet locally and dredd a large journey only to find an animal they didn't want

Adoption

Users were very intimidated of the adoption process for the difficulty and lengthy process

Refining The Design

Mockups

Based on the insights from the usability study, I made changes to improve the sites finding a friend process. One of the changes I made was adding a button that changes color once the patron used all three drop down. This allowed users to interact with the site in their effort in location the right pet, giving the user a sense of achievement.

Mockups

To make the find a friend process even easier for users, I added a larger button and a descriptor that allowed users to have a better idea about the animal and how to select.

Mockups: Original screen size

Mockups: Screen size variations

I included consideration for additional screen sizes in my mockups based on my earlier wireframes. Because users now in days have different devices they use in their daily lives, i felt it was important to optimize the adoption experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible when selecting a new member of their family.

High-fidelityprototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, along with the pain points discovered by the user.

Accessibility considerations

1

I used headings with different sized text for clear visual hierarchy

2

I used landmarks to help users navigate the site, including images and icons

3

I designed the site with alt ways to adopt to make the process easy to access

Going Forward

Takeaways

Impact:

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

What I learned:

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

Next steps

1

Conduct follow-up usability testing on the new website

2

Identify any additional areas of need and ideate on new features

3

Finally i would, introduce more assistant technology to the site to incorporate more user participation