Menu

Paws (Concept App)

Adopt the pet that best fits your lifestyle.

Company:
Anonymous
My Role:
Interaction Designer
Timeframe:
~16 hours
Category:
Design Interview
The Challenge

Millions of animals are currently in shelters and foster homes awaiting adoption. Design an experience that will help connect people looking for a new pet with the right companion for them. Help an adopter find a pet which matches their lifestyle, considering factors including breed, gender, age, temperament, and health status. Provide a high-level flow and supporting wire frames.

Defining the Problem, Research, and Basic Assumptions

The first stage of design is to “unpack” what we know and to define the problem. This is usually done through some sort of research, including user & stakeholder interviews to identify opportunities, frustrations, and pain points. Due to limited time, I did a very basic amount of research and instead designed around some assumptions.

A few assumptions I made were that users of this app would be between the ages 25-40, either parents looking for a new addition to the family for their children, or an adult looking for a companion. Second, the majority of pet adoptions are either dogs or cats. Lastly, users are looking to adopt pets in their area, and would rather not look for pets more than 50 miles away. I also focused on iOS.

A Persona

Personas help prevent "self-referential design", where the designer may unconsciously project their own mental models on the design, which is often very different from what the target user needs. In order to guide the design process and stay user-oriented, I crafted a persona named Kate Russell.

Feature Image
Source: assets.entrepreneurs.com

Kate is a 32 year-old freelance editor. She spends the majority of her time working in her 1 bedroom apartment in South SF. Kate is very driven in her work, and though she’s in a committed relationship, she feels a bit lonely at home and is looking for a friendly companion to fill that void. She always wanted a dog but wasn’t sure if she was able to handle it. Kate always concerned herself with questions like “how will I have time to walk a dog everyday?” or “what do I do if I’m unable to train a dog?” Kate desires a way to easily find a small, cute dog to take with her everywhere she goes that is already well-trained and highly affectionate.

Interaction Design

With a persona created, I hypothesized scenarios where Kate would use this app. This led to creating a minimum viable feature set, which included searching for a pet based on her specifications, listing the possible matches, and viewing details for each pet including their location. Along the way, this search should be incredibly seamless and allow her to quickly run through the details of each pet. It should also show flexibility in search specifications and be quicker than traveling from shelter to shelter to find the right pet.

With a core set of features tailored to Kate’s needs, I proceeded to sketch user flows, interactions, and a basic interface.

I began on paper where I drafted many ideas and workflows freely. Once I had a basic idea of where I was headed, I continued to digital wireframes.

Wireframes

Wireframes are useful in showing the full flow of the app without dedicating too much time to aesthetics. It allowed me to explore the search workflow and reason through every case where a person would be looking for a pet to adopt. Some users have specific keywords in mind and would like to use that to find all possible pets. Others have very detailed specifications (i.e. small, Chihuahua, high energy) of what they are looking for, but do not necessarily need to complete every given specification. And other users don't know what they are looking for at all.

Feature Image

Full workflow / wireframes Click for full size

Visual Design

In this stage, I explored the aesthetic design and visual choices for the app. This includes color, type, imagery, balance, and more. The designs were made using Sketch and adhered to Material Design colors.

Next Steps: High-Fidelity Prototype, Usability Testing, Iterating, & Shipping

Though the visual designs brought a nicer look to the app, they are still limited because they don't express animation, microinteractions, and touch. With mobile, how the app "feels" is incredibly important, and static mocks cannot always express the qualities of the app.

Due to these limitations, I made a few animations using Principle to demonstrate the interactivity with the visuals.

Swipe right and left to view pets.

Use the search bar to make a keyword search.

Tap detailed search to address more specifications.

Tap each card to view the pet's details.

Tap the heart to add the pet to your favorites.

Tap the menu symbol to view the menu.

The Result

I began with some basic assumptions and some minor research. Based on a persona, I created a base feature set, and then began sketching, wireframing, and figuring out the interaction details. This was translated into a lo-fidelity prototype and then polished with visual design. The visual designs were then given animations.

If time permitted, I would work to prototype the app completely so that it could be tested in the hands of users. Based on that feedback, we can then iterate on the product further, and then work with developers to produce version 1 of the product.