Friends for Life

DESIGN FOR RESPONSIVE WEB

To the Moon app shown on iPhone and iPad

OVERVIEW

Friends for Life is a conceptual animal shelter that also provides fostering services and resources for pet owners. Pet adopters can range from 19-50 years old, consisting of mostly working adults.

MY ROLE

Responsible for research, conceptualization, design, and user testing.

TIMELINE

2 weeks

The Problem Space

Many current online pet adoption platforms are not updated and or organized. Many adults feel overwhelmed with the adoption process.

The Solution

The FFL Animal Shelter website aims to help users find the pet that best suits their needs and ease the adoption process.

Understanding the User

USER RESEARCH

Through several interviews conducted, it appears that there is a strong desire among working adults to adopt pets, but the adoption process can be challenging.

One challenge that arose was difficulty in finding accurate and up-to-date information about the pets that are available for adoption. Users reported that many animal shelter websites are not regularly updated, which makes it hard to know which animals are currently available for adoption.

Another challenge that emerged from the interviews was that current adoption sites can be difficult to navigate and or cluttered, which can be a frustrating user experience. Users reported giving up browsing on the website altogether.

Finally, some users reported that the adoption process is time-consuming, which can pose a barrier to adoption. In addition to the lack of information about the adoption process, as well as paperwork, it can be a lengthy process.

KEY PAIN POINTS

Information Architecture

Structure and sitemap makes it hard for users to find the information they need.

Difficult Navigation

Some websites are cluttered or difficult to navigate, which can be a frustrating user experience.

Time-consuming

Working adults may find the adoption process lengthy and time-consuming.

PERSONAS

Using the data compiled from the initial interviews, I created two user personas to help represent the needs of larger groups of users.

User persona, Benji, for Friends for Life.

User persona, Silly Sally, for the Friends for Life Project.

COMPETITIVE AUDIT

A competitive audit of a few competitor’s products provided direction on gaps and opportunities to address the Friends for Life’s responsive website. A notable insight was that a majority of websites do not allow for users to create an account in order to save their preferences. Oftentimes, search filters are either limited or not included.

Crazy 8 activity that forms 8 different ideas or features to include in the mobile app.

IDEATION

Using the Crazy 8’s ideation activity, I came up with a few ideas I had for key features and elements I wanted to include in the application. The paper wireframes helped to visualize key elements that would end up in the digital wireframes to better address user pain points. The home page allows users to easily search the specific animal they’re looking for or browse by categories.

Starting the Design

DIGITAL WIREFRAMES

User feedback and findings from usability studies helped to guide the key features and screen designs within the digital wireframes. Users are presented with a prominent search bar so they are able to find the type of pet they have in mind. To address the users' pain point of difficult navigation, the homepage offers a clean and intuitive design making it easy for users to find what they are looking for.

Low-fidelity prototype of To The Moon app, displaying the homepage.

Including search filters for breed, age, gender, and size can provide users with the ability to refine their search and discover pets that align with their specific preferences. By incorporating these filters, users can more easily find pets that meet their needs, which can ultimately lead to a more positive and fulfilling pet adoption experience.

Bear House Sushi app low fidelity gif of user flow from home screen to checkout page

LOW-FIDELITY PROTOTYPES

Users begin on the homepage and can search up a breed of their liking or browse by categories. They can click into each animal’s profile to learn more and submit an application.

Friends for Life, low-fidelity prototype

Mockups

Friends for Life, high fidelity mockup of homepage

Friends for Life, high fidelity mockup of Dogs page

SCREEN SIZE VARIATIONS

I incorporated considerations for various screen sizes, recognizing that users may browse for pets on a variety of devices. It was crucial to optimize the browsing experience across different screen sizes, particularly for mobile devices, to provide users with the most seamless experience possible.

Friends for Life high fidelity mobile responsive website mockups

HIGH-FIDELITY PROTOTYPE

The final high-fidelity prototype followed the same user flow as the low-fidelity prototype, and included the design changes made after the usability study.

View Prototype

ACCESSIBILITY CONSIDERATIONS

Icons

Icons were included in several screens in the app to ease navigation for users.

Alt Text

Alt text was added to key images so users who are vision impaired and use screen readers are able to access the app.

Going Forward

IMPACT
Users shared that the website made pet adoption seem less intimidating and something they feel comfortable using when adopting a pet. Users were excited about the features and are willing to use the application in the future.

One quote from peer feedback,
"The website was really easy to use and I loved the overall aesthetic. The application process wasn't too long and I would feel comfortable using a website such as FFL to adopt my pet!"

REFLECTION
I learned that diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.

For example, in considering the needs of users who primarily access the website on the mobile devices, I focused on creating a user-friendly interface with clear and concise information. This includes using easy-to-read typography, and a clean layout with intuitive navigation.

NEXT STEPS

Maintain and Iterate

Continuously monitor the product or service and make updates and improvements as needed based on user feedback and changing needs.

Add Live Chat

Add live chat/support to the website.