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.

problem

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

Challenges
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

Solution

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!

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:

100% of respondents use social networking and music apps on their phone
90% of respondents use messaging and maps on their phone
80% of respondents use shopping apps on their phone
These findings will help us better understand how they are currently interacting with their phones and the best channel to reach them.

80% use Instagram at least twice a week
50% use Facebook and Google Maps twice a week
From this survey we can see that the majority of users use Instagram, Facebook, and Google Maps heavily
A lesser amount frequent Twitter and Tik Tok
These findings will help inform us of which channel we can better reach our target audience

The majority of respondents, 30%, go out to eat or drink more than twice a week
20% go out every once in a while or a couple times a month
The users in the blue area are who we are primarily trying to reach (Although the occasional diner can also benefit from our app, because they could be unfamiliar with which spots are dog friendly nearby)

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.

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.

Original grouping, based off similarities

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

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.

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.

user flows

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

Rough sketch of our multiple users' flow (dog owner, restaurant, and event host)

User flow sketch

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.

solution sketch

storyboard

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.

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.

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.

The home screen will open to the Explore tab, where the user can view nearby places and get inspiration if they don't have a particular destination in mind. It is set to the user's location, by default, but when changed to another city, it will repopulate with local interests in that town.
The map view can be accessed by either clicking Map in the tab bar or one of the colored circles at the top (Restaurants, Hotels, Parks, etc.). Each location will be color coded, as well as have an icon specific to the type of spot. This will make it easy for users to quickly scan spots and understand what category it fits in without having to click the pin.
While Map View is the default screen, you can also toggle over to List View within the map to easily scroll through establishments and gather basic information about them before making a decision.
When you'd like to learn more about a spot, you can click on any of the places on the map or list view to pull up more details. The details page will have a way to share, save to favorites, scroll images posted from users, read and write reviews, view amenities the establishment has for dogs, and lastly be able to call or route to the desired spot.

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%.

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.

90% of participants could identify the general purpose of the app in 5 seconds.
(One said adoptions and one said they were focused on the image of the dog in the middle and didn't notice anything else.)
42% identified it was dog related

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."

94.7% completed the mission via the expected path
The average time spent on screens was about 8 seconds
Although, the misclick rate was a tad high at 18.5%
Overall the usability of this task is rated at 74%

Task 2

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

100% completed the mission via the expected path
The average time spent on screens was about 2.5 seconds
The misclick rate was much better on this task, at 2.5%
Overall the usability of this task is rated at 98%

Task 3

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

94.7% completed the mission via the expected path
The average time spent on screens was about 6 seconds
The misclick rate on this task was slightly higher, at 9.2%
Overall the usability of this task is rated at 91%

Opinion Scale

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

68% thought the flow was excellent and the screens were easy to find
Overall, the average rating of how intuitive my prototype is is 92%

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?

Two of the participants tried to search for the restaurant during their mission and since the screen was not built yet, they were confused and unable to do so.
One participant noticed an error in the map pins scrolling in the prototype.
One participant didn't know which direction they should scroll on the last task, finding the restaurant details page.
79% of participants claimed to have no usability issues at all.

next steps

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

One major lesson learned was to always test the prototype within the testing program before deploying to participants! By the time I received feedback that a tester was having problems with the map pins not performing properly, it was too late because the test had already been deployed and gained several testers already.
I was initially so caught up in designing my high fidelity prototype based on my paper prototype that I forgot to add the functionality for the search bar!
I had created the magnifying glass icon to be able to search but did not think the feature was necessary before user testing. Boy, was I wrong! I learned that a lot of the misclicks from the user test was due to participants trying to search the restaurant this way, so I knew my next step would be to create a way to search for a spot through the search bar.

My first iteration of this feature had a "Nearby" option with the most recent spots underneath—from most to least recently visited.

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‍

Paper prototyping sped the process along and made for quick iterations
A good amount of user testers and quantitative data
Following the 8pt grid system while prototyping helped keep everything consistent

Lessons Learned

Quick prototyping leads to quick iterations
Don't fall in love with your first idea

What Went Wrong

Did not stick to deadlines
Did not test prototype within maze.co myself before launching to the users
Had a technical error in figma that I didn't notice before launching prototype for user testing

Actions

Develop "Events" feature
More user testing
Launch product