Creating an App for Dog Owners in the Bay Area
Photo by Kyle Smith
Client: Bay Woof
Duration: 3 weeks
Tools: Figma, Zoom, Google Drive
Team: Connie Chung, Mariana Gomez
Role: UX/UI Designer
Bay Woof is a community supported e-magazine and non-profit for dog lovers in the San Francisco Bay Area. They offer news and education to promote responsible dog ownership and advocacy.
Our Design Prompt
Bay Woof wanted to create an app to help people find dog parks in the Bay Area. The current website had a map spotlighting the numerous off-leash dogs areas, but it was clunky with no way to filter the results or view them in a list format. Bay Woof wanted the map to be sleeker.
We Talked to Dog Lovers
We wanted to tailor the experience to dog owners and dog walkers, and design something useful and delightful they could actually use. So we talked to six dog owners to find out how they chose places to take their dogs, and what features are important to them in a dog park.
We learned a lot from talking to dog lovers:
They trust other dog lovers, relying a lot on recommendations from friends where to take their dogs.
Each dog has different needs and every dog lover was searching for a place that fit these specific needs.
Terrain is very important when deciding on a park.
But mostly we learned that dog owners love their dogs and love talking about them!
Jordan Became Our Muse
Then we created Jordan. Jordan is a representation of all our research.
Jordan kept us focused on the needs of dog owners and was always a reminder that we weren’t designing for ourselves.
With this problem in mind,
“Jordan needs a way to compare dog parks based on community input, to find a park that fits the occasion and their dog’s needs, because Jordan's dog is one of a kind, and they trust other dog owners to give reliable recommendations.”
we followed Jordan through the journey of choosing a park:
Illustrations by Pablo Stanley
We learned that by providing Jordan with the specific information they need about each dog park, we will help them make a better informed decision and to feel confident when choosing a park to go to.
We Started Brainstorming
With Jordan’s tasks in mind, it was time to brainstorm. We call this process “design studio.” We do it to loosen up, and get the ideas flowing. We throw out outlandish ideas to solve the problem. The most expensive idea, the cheapest idea, the silliest idea, the most futuristic idea–it helps us keep our minds open to new ideas and solutions and to think outside the box. And it helps us improve and refine our ideas.
So we thought about problems and tasks facing Jordan, and put our minds together to find the solutions.
Problem: Dog with Specialized Needs
First, we wanted to save Jordan time in their search for a park. They run into problems because they have a dog that has specialized needs, and Jordan wants a park that fulfills all of these needs.
I came up with the idea of a dog personality quiz. The dogs take a test and based on the results we could assign the right park for them. I imagined a dog sitting down taking the Myers Briggs test, holding a pencil, filling in the bubbles. But we thought about it, and decided, let's actually do this! The user inputs their dog’s needs, like their preferred terrain and size of park, and the app only shows parks that match the dog’s needs. This saves Jordan from having to weed through pages of results that aren’t relevant to their search.
Dog Personality Test Page
Problem: Extreme Reviews
We also wanted to ensure that Jordan got the most useful reviews possible because they trust the word of other dog owners. We thought for a long time about how we could encourage users to leave reviews that were accurate and less emotional. We knew from our user interviews that most people only wrote reviews after an exceptional experience or a terrible one. We wanted to provide Jordan reviews that were nuanced and accurate.
I took inspiration from past art classes where we learned how to give constructive critique and feedback. I thought, what if after users left the park, they were asked to explain something they liked about the park and something that could use improvement.
Knowing that we couldn’t expect every user to write a detailed thoughtful account, we hypothesized that if users were prompted to rate with stars, certain aspects of the park–aspects important to Jordan–like the maintenance of the park, the quality of the terrain, and whether it felt safe, users might be able to leave more informative information for the next visitors, while also making the process as easy and fun as possible.
The app solicits a general rating of the park.
Once a rating is left, the app asks if the user wants to leave a review.
Part of leaving a review involves rating certain aspects of the park.
But then we wondered, how would these ratings be displayed on each park page? This is how we came up with the idea of “Top Three Amenities,” the idea that after visitors of the park rate each aspect with a star rating, the top three highest rated amenities would be visible on each park listing as a badge of honor.
We hypothesized that by seeing their reviews had benefit, users would be more willing to leave ratings and reviews.
In this example, Alameda's top three amenities are "Well Maintained," "Drinking Water," and "Safe."
Park Details Page
Problem: Bad Park Pictures
Another problem facing Jordan was the lack of useful photographs of dog parks. From our user interviews we knew that dog walkers often look at photos of the park before going to get a better sense of what to expect of the terrain and amenities. But a lot of times, listings have very few photos, and the ones they do are often blurry or unrelated.
We hypothesized that if we provided a place for people to add photographs to their reviews, visitors could take their own pictures in the park and post it in their review for the next visitors. We hoped this would result in more photos, and since they would be taken by dog owners, more helpful photos.
Bottom of Review Page
Visualizing a Physical App
After brainstorming, we knew what we needed to include in the design: a personality test to narrow down the search results to only ones relevant to Jordan, and nuanced ratings and reviews with pictures, so that Jordan feels prepared and knows what to expect before they get there.
To refine these ideas even further, we started sketching screens, trying to figure out what each step of the user journey might look like.
We started with the basics. What would the functionality of the app look like? With each stage of usability testing we increased the detail, until the last stage where we added color, pictures, and fonts.
Here is the same page of the app shown in three different stages. Stage one where we tested the functionality, stage two where we tested the language and terminology, and stage three where we tested people's responses to the visual elements like color and font.
Stage 1 Park Details Page
Stage 2 Park Details Page
Stage 3 Park Details Page
Adding Visual Design
I drew inspiration from the Bay Woof website when I started adding the visual design to the wireframes.
I used the body font Omnes as the font for the app. It helped us stay consistent with the existing brand, but I liked that it also had a softness and playfulness–the tone we were trying to achieve throughout the app. The rounded letters felt more welcoming than the gothic font that was used in headings on the website.
I turned to the Bay Woof website again when I picked the color scheme for the app. I selected a denim blue from the website’s footer, and added different shades to add depth and variety. I used the orange that appears on some of the buttons as an accent color. The blue and orange together gave it a real pop which made it feel energetic.
Bay Woof Website
Testing the Design
For our initial usability tests, we were curious whether certain design choices we had made, like bones for star ratings, and the word “fetching” instead of “loading,” would make sense to users, or if we’d be better off using more traditional symbols and terminology.
Dog Symbols and Terminology
Traditional Symbols and Terminology
We didn’t run into problems using this dog flair. People understood it right away and many thought it was cute and clever.
We discovered a lot from testing our design on users. Many found the personality quiz a great idea, but limited, and suggested many categories for us to consider, many repeated several times. After referencing back to our user interviews, we decided a few questions would be beneficial to add:
A question concerning the busyness of the park, because many people with anxious dogs prefer a quieter experience.
A question about whether the user prefers an enclosed space or an open one, because many had concerns, especially with an off-leash park, that their dog would run into the street.
A question about whether the user wanted a beach.
And a question about parking, this came up over and over as a concern for many dog walkers, “will I be able to find a place to park my car?”
Four questions added to the personality test after usability testing.
As we concluded our usability testing, and our three week deadline approached, there were still changes we wanted to make but didn't have time to implement and test.
From testing the app on users, we learned that while they expected to be given the option to enable location services, they also expected the option to enter a zip code instead. Because the app only has the GPS option, we would like to implement a solution for users who prefer not to share their location with the app.
Enable Location Page
We also learned that while users appreciated an option to donate to the Bay Woof Foundation, many wished there were quick dollar amount options they could select, like $1, $5, and $10. They reasoned they would be more likely to donate if they didn't have to think as much.
Review Confirmation and Donation Page
We also learned that while users found the list view of the park results helpful, they wanted a way to sort their results, with categories like parks nearest to their location and highest rated.
Park Results List Page