dogtopia logo

Dogtopia is a mobile app which allows dog owners to find reliable, professional care for their dogs. A user can search for daycare, boarding, or grooming in their area, make a reservation, and pay.

Duration

8 weeks

Responsibilities

User Research, UX/UI Design, Branding

Tools

Sketch, Adobe Illustrator, Maze, InVision, MyBalsamiq

The Problem

In very dog friendly cities, such as Los Angeles, numerous dog daycares and hotels have opened in recent years, but there is currently no centralized place to search for them. Additionally, many daycares do not list prices or availability online, and few offer online payment.

dogtopia mockup

User Survey

To get an idea of what features users might want, and how they would use the app, I created a survey with questions about searching for care, frequency of use, what app features would be important to them, and which mobile OS they use.

89%

Have used a professional dog care service (i.e. not in home care) in the last year.

48%

Currently use a web or Yelp search to find dog care.

58%

Use an iPhone.

72%

Said reviews are the most important factor when choosing a daycare.

*Based on results from 31 survey respondents

Competitive Analysis

While there were no directly competing apps to research, I looked at apps that have a similar function (Yelp) and apps that focus on private dog care (Rover, Wag), to see how they handled the various user needs.

Yelp Rover Wag
Map View Search
List View Search
Availability Calendar
Read & Add Reviews
See Prices
No Yes Unclear

User Personas

To create user personas I selected three of the respondents from the survey and did a quick interview to discover more about them and their goals for using the app.

brenda

Brenda

44 y/o landscape designer

Goals

Find daycare for her 6 year old poodle to exercise a few times a week near her current job.

Frustrations

Her job locations vary and she wants an easy way to find trusted care near where she will be working.

clay

Clay

34 y/o sales director

Goals

Book boarding for his dog, Kobe, during his out of town sales calls without having to make a phone call.

Frustrations

He can’t book a boarding stay or see availability online so he has to take time out of his busy day to call around.

sanja

Sanja

25 y/o junior designer

Goals

Find a daycare that offers a discount for frequent use because her rescue dog can’t stay home alone.

Frustrations

Professional daycare is out of her budget unless she can find a location with a discounted monthly package.

User Stories & User Flows

I created user stories based on the problem the app is aiming to solve, as well as features users requested in the user surveys. I then narrowed the scope down to the MVP (minimum viable product), and then created user flows for the three main tasks a user needs to complete: sign up, find a location, and make a reservation.

See all user stories and user flows.

Low-Fidelity Wireframes

I created the initial wireframes based on user flows for 3 main tasks: New User SignUp, Searching for a Location, and Making a Reservation. As these tasks are at the core of the app, making sure that the flow was seamless and efficient was crucial.

High Fidelity Wireframes

I expanded on my low-fidelity wireframes in Sketch adding some additional screens, and then used these wireframes to begin user testing. I utilized iOS Human Interaction Guidelines as well as several standard iOS app features like an icon-based toolbar and swipe to delete function, to keep navigation simple and intuitive.

User Testing

I created a user test based on the 3 main tasks. After the first round of user testing I found users were able to sign up and search for a location with ease, but were confused by the booking process. The original process attempted to gather too much information on a single screen and if a user missed a section they could not figure out how to complete the process.

I simplified the process by having the user select which service they were booking before moving to the reservation screen, and I modeled the booking calendar after the booking process on many airline apps, which the target users are familiar with. I then created a second user test for just this task with the same set of users. With this change the users were able to complete the booking process without confusion.

user-test-round-1

Round 1

user-test-round-2

Round 2

Logo & Colors

For the logo I started by writing down all the words I associated with the app (e.g. dog, doghouse, map, care, etc) and then sketched out several ideas that combined these elements. I liked the idea of incorporating a map pin since the main focus is finding locations.

For the color palette I went with a combination of oranges and a pop of bright teal green, with greys and plenty of white space. Oranges and greens are often used with pet apps as they convey friendliness and quality.

#2ec4b6
#f06449
#e7524e
#333333
#e2e2e2
#ffffff

Typography

I started the branding work by choosing Lato and Open Sans for the main typography - both clean, modern sans-serif fonts that would be easy to read on small screens and lend to the trustworthiness of the brand - and comfortaa in all lowercase for the logo as the round, geometric font is playful and fun like pets.

Lato Bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Open Sans

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Final Mockups

I applied the branding to the wireframes for the final mock-ups. I focused most of the color use to the onboarding screens to draw users in and kept it limited within the app to emphasize navigation and CTAs. I included some dog sketches (created by Freepik) throughout the app to keep up the sense of playfulness.

What I Learned

This project taught me a lot about working within the iOS Human Interface Guidelines and how straying from commonly used elements can affect usability. I made the assumption that users would work from the top of the screen down when making a reservation, but because the calendar was such a prominent and familiar element it was where the majority of the users focused first. Because the calendar wouldn’t work until the service type was selected it threw off the flow and users got stuck. Fixing that element so users could select dates on the calendar at any point during the reservation process solved the usability issues.