Six mockup screens of Spot's Spot app.

Spot’s Spot Travel App

Project Overview
Are you a dog owner? Do you enjoy being out and about with your furry companion?

If so, you've probably been in the situation where you didn't know if you could bring your dog with you; or maybe you just want to know what accommodations an establishment has for Fido before you make the trek all the way there.

Enter Spot's Spot.
My Role
As the sole UX/UI designer and researcher on the team, my role was to build the product from the ground up, listening and understanding users' pain points and making iterations based on feedback and data.

My client for this project was Sara Walker. Sara has a corgi named Biscuits that she treats as her child. She brings her dog everywhere she can.

The problem that Sara has identified is that she finds it difficult and time consuming to research and locate bars, restaurants, and places that are dog friendly.

The best app that does this is Yelp or Google, but both apps are unreliable and not always accurate or updated. Currently, she has to call the location to ask if her dog is allowed before she leaves.

Sara came to me to design an app where she can access this information quickly and easily all in one place that she can trust.

Target Audience Analysis

While discussing the goal of this app with my client Sara, we sat down and discussed our target audience and the best ways we can reach them. We identified these key demographics below:

Key demographics
Age range: 21-45
Gender: N/A
Common job titles: Student, Nursing, Hospitality, Tech

Key psychographics
Values: Empathetic, Loyal, Responsible, Friendly, Outgoing
Likes to: Explore, try new things, meet new people, dine and drink
Wants to: Meet new friends and socialize with their dog
Doesn’t know what places are dog friendly or how to go about meeting other dogs and attending dog related events and meetups

Preferred channels
Email, phone, etc.: email or text
Browses social media platforms like: Instagram, Twitter, Facebook, Tik Tok

Preferred content types
Mainly mobile, also watches streaming services like Hulu and Netflix

Spot’s Spot allows dog owners to view bars, restaurants, parks, and other dog friendly places and events, while saving time sifting through other apps and eliminating the stress of wondering how accurate the information is.

Within the app, every spot is verified by the business and up to date with the necessary information.

With location access on, the app will automatically give suggested places and events closest to you.

Let’s find Spot his new favorite spot!

Six screens of the final prototype.
Click the prototype above to interact with it
Survey Data & Findings

To start off the discovery phase of the project, I wanted to learn more about who our users are and how we can better fulfill their desires while using our app.

Because if we're not building our products for the user, why are we building them?

I conducted a survey using Google Forms to gather demographic information and ask a few questions about how they spend their time in the digital and real world.

Below I have compiled the key insights I have found, which will dictate the hows and whys of my next steps in building this product:

Survey data and findings.Survey data and findings.Survey data and findings.
User Persona

From the survey data that I acquired, I composed this user persona of our target user.

Meet Jessica.

She is a 27-year-old receptionist living in Portland, OR. She is an extrovert with a heart of gold and lust for adventure.

An image of the user persona.
how might we...

To better understand the parameters of this project and how we can reach our goals, I brainstormed how we might be able to delight our users and eliminate any gray areas or misinformation with the client.

Keeping our user Jessica in mind, I started jotting down any and all ways our app can help our users accomplish their goals and eliminate any frustrations they might have.

"How might we" original grouping, based off similarities.
Original grouping, based off similarities
Deciding which "how might we" will be our most high-priority use cases.
Deciding which will be our most high-priority use cases
Arranging the use cases by high to low priority, based on what is most important at this time.
Arranging the use cases by high to low priority, based on what is most important at this time
journey map

From there I created a journey map to show what steps Jessica will take-- from downloading our app to sitting down at the restaurant table.

The journey map I created for the users.
empathy map

This empathy map helps to better understand what motivates Jessica, using all four senses. We can also better understand what her current pains are with finding a dog friendly location and what she will gain by using our app.

An image of the empathy map.
user flows

Now that we have a better understanding of who our target audience is, we can move on to creating our information architecture.

My first user flow sketch.
Rough sketch of our multiple users' flow (dog owner, restaurant, and event host)
A sketch of the user flow.
User flow sketch
An image of the high fidelity user flow.
Hi-fidelity user flow of how Jessica will use our app - from onboarding, finding a dog friendly establishment, and finding a dog friendly event
crazy 8s

This exercise was done to make quick iterations of how the UI of the app will look and perform. I set a timer for 8 minutes and once the timer went off, I moved onto the next rectangle to create a new rough design.

A photo of the pencil and paper crazy eights exercise.
solution sketch

This exercise was done to make quick iterations of how the UI of the app will look and perform. I set a timer for 8 minutes and once the timer went off, I moved onto the next rectangle to create a new rough design.

The solution sketch of the restaurant details page.

Similar to the Journey Map, this Storyboard shows how Jessica will use our app and the processes she will take to complete a set of tasks and arrive at her desired location.

A photo of the pencil and paper storyboard I drew.
paper prototype

Gathering the ideas I came up with for the Crazy 8s and Solution Sketch, I created this life-size paper prototype, without any styling or color.

This method allowed me to quickly iterate and not get hung up on any details since it is only pen and paper.

Four images of the paper prototype screens.
paper prototype user testing

And now to put our designs to the test!

I tested my paper prototype with four participants. The prototype was able to scroll up and down and when a user clicked on an area, I would swap it out for the next screen.

An image of a person testing the usability of my paper prototype.
Key Findings

“I didn’t notice the dining button at the top because the squares with x’s were so prominent and in the center.”
Adrian M. — Home Screen

“This screen makes sense. I like the scrolling restaurants at the bottom, but I’m not sure where it is on the map.”
Jenny H. — Map View

“This screen has all the information that I’d like to know right off the bat, without having to click on each one.”
Tony G. — List View

“This seems like a lot of good information. I like that there are reviews but I’m not sure how I would write one.”
Alex W. — Restaurant Details
High Fidelity prototype

Taking the feedback I received from my paper prototype into account, I moved on to creating my first high fidelity prototype for Spot's Spot.

To keep everything clean and accessible, I stuck to mainly black and dark blue elements with white and gray backgrounds and shadows.

Four screens that show the first high fidelity prototype.
usability testing on wireframes

Once I ironed out all the kinks and had my prototype in a place that I was happy with, I moved on to user testing.

For this phase of research, I used Maze as my user testing tool. This allowed me to easily compile and make sense of the data I received.

I tested 25 participants remotely and Spot's Spot received an overall usability score of 88%.

A visual representation of the 5 second test.
5 Second Test

I asked the users to complete a 5-second test to see if they could identify the app based off a screenshot of the home page.

A visual representation of task one.
Task 1

Once the participants got to the interactive prototype, I asked them to complete a set of tasks. The first task was to "find the map of nearby restaurants."

The second task data from user testing.
Task 2

Task #2 was to "find the list view of nearby restaurants" (from the map view).

The third task data from user testing.
Task 3

The next task was to "find the details page of Shine Distillery & Grill."

A visual representation of the opinion scale.
Opinion Scale

After the tasks were completed, I asked the participants how intuitive the screens were to find.

A visual representation of the open question results.
Open Question

The final question in my usability test was if any of the tasks made them feel confused or anxious and if so, why?

next steps

I was very grateful to have the 25 participants that I did because it gave me a great deal of quantitative data.

My first iteration of this feature had a "Nearby" option with the most recent spots underneath—from most to least recently visited.
Two screens showing the final prototype iterations.
While listening to feedback from my mentor, I decided to remove the redundant "Nearby" button and organized the recent spots by category—from most to least recently visited.
Final Thoughts

What Went Right

Lessons Learned

What Went Wrong


More Projects

Mockup of the Inventory screen on an iMac
STOKT Inventory Management

Let's connect.

Have a problem that needs solving? Want to grab a coffee some time and pick my brain?
Drop me a line below! I'd love to chat!
An SVG icon to represent LinkedIn.An SVG icon to represent email.