Mobile Dog Grooming App

FREELANCE • DOGGYSTYLE

COVID PETS

In the first year of the pandemic, 900,000 Canadian adults got a pet who had never previously owned one. Pets require regular grooming, so this market was predictably booming.

My client wanted to take advantage of the pandemic pet pandemonium by creating a mobile dog grooming service that would bring the groomer to the pet owner, rather than having the pet owners take the risk of going to a salon when the fear of contracting COVID was still rampant.

  • 1 CLIENT
  • 1 UX CONSULTANT
  • 1 DEVELOPER
  • 8 MONTH CONTRACT
  • MVP DESIGNS
  • BUSINESS FRAMEWORK
  • FLOW MAPPING
  • WIREFRAMING
  • UI DESIGN
  • BRANDING

LET’S BUILD AN APP!

The client had already built a custom van that was retrofitted with all the equipment required for dog grooming. Groomers would drive this “mobile salon” to pet owners’ homes to groom their pups right outside their house.

Two User Groups

FLOWS

Pet Owners

Enabling pet owners to book appointments was a very generalized ask. In order to dig deeper into the steps that pet owners would take to achieve this goal, we needed a flow map.

The overall flow map looked something like this, with the blue circles referring back to notes that I took within the file during client meetings:

As I built this flowmap, I was able to plan out the minute details of booking an appointment. This included creating and managing an account, creating a doggy profile (name, age, size, etc.), selecting grooming services, scheduling and managing appointments, making payments, etc.

The following screenshot zooms in to show just how detailed the map got:

Groomers

Creating a flow map for the groomer interface once again enabled me to take a deep dive into the features required to enable the larger goal of tracking appointments, such as including prompts for each step of the appointment (i.e., pick up doggy, take before picture, groom doggy, take after picture, return doggy to pet owner, submit feedback report, etc.), chatting with the pet owner, etc.

Here’s a snippet of the groomer flow map:

Why Flow Maps?

Big Picture

Having the maps in front of me made it easier to draw parallels between the pet owner and groomer flows to determine what information transfer needed to occur. For example, the dark grey boxes in the groomer flow indicate what information is received by the pet owner in response to various actions.

Communication

The map served as a great communication tool in client meetings, as we could discuss how modifying or adding features would affect the overall flow. Here, we were able to modify the flow to better serve the business needs by encouraging more account sign ups, and therefore lead generation.

Efficiency

In the early stages of a product, a lot of iteration is happening as ideas are being bounced around, and updating the blocks in a flow map is a lot easier and faster than modifying lots of wireframes. A cohesive flow map can also make it easier to know what to design. In this project, 2 flow maps resulted in over 200 wireframes for the MVP alone, and that’s not including all the discarded iterations of these wireframes. Imagine designing 200+ wireframes without a plan - a nightmare.

MID-FI WIREFRAMES

The flow maps acted as an instruction manual, informing the design of the wireframes which I made in Figma. Without the maps, knowing what content to place on the artboards would have been a much harder process.

DESIGN SYSTEM

The client hired a brand designer to determine the fonts and colour palette for the app. I created styles out of the colours and fonts so that I could easily pick and use them when designing the hi-fi screens. I then absorbed these elements into a larger design system that also included iconography, form fields, and other recyclable components.

Typography

Iconography (FontAwesome)

Colours

Forms

Components

HIGH-FI UI

Pet Owner Onboarding

Ah, the classic sign up form. Since we’d decided to start the user journey with account creation to try and have the maximum number of users signed up on the platform, we needed to ensure the sign up process was easy to understand and complete. That meant collecting the minimum level of detail to set up a unique user account in the database.

Build Doggy Profile

The doggy profile is relatively comprehensive, so I broke it down into steps and used pagination to make it easier for the pet owner to navigate. I also kept fields like the text input for medical conditions hidden unless the owner indicated that their doggy did indeed have medical conditions, thereby reducing the page length.

Book Appointment

An insight I gained through user conversations was that many owners have more than one dog, but typically no more than 2. To account for this, I made it simple for owners to book appointments for multiple dogs at the same time rather than repeating the process for each one individually.

Appointment Day (Pet Owner)

User conversations also taught me that some owners had a fear of leaving their doggies with groomers whom they’d never worked with before. To make them feel more comfortable, the pet owner’s dashboard displays the steps of the grooming process in real time so that they know exactly what’s happening.

Appointment Day (Groomer)

For a groomer, a full day of grooming doggies can be hectic and I wanted to take as much load off their memory as possible. This was done by creating a step by step process that guides the groomer to the right address, and prompts them through each step of the actual groom (which is how the owner gets informed of the steps being completed as well). These prompts decrease the chances of the groomer forgetting a step or making errors.

USER TESTING

Although our small team didn’t have a dedicated user researcher, the client performed unmoderated usability tests with both pet owners and groomers while I observed and took notes, which informed a lot of my iterations while designing.

For example, when testing with groomers, we were looking to see how quickly and accurately they’d be able to consume information in the app, as they’d be working in a high-pressure environment while using it.

Iteration 1 > Iteration 2

Iteration 2 > Iteration 3

BRANDING

As an extra challenge, I went ahead and mocked up some logo concepts for the application. Although the client ultimately hired a dedicated brand designer to create the logo, I had a lot of fun trying something new and strengthening my visual design skills.

LESSONS LEARNED

Details and Accountability

As the only designer working on this project, it was up to me to keep track of every little detail. If I forgot an important note from a client conversation or changed a design in one place but not the other, nobody else was present to catch these slips. A few early mistakes taught me this lesson, so I began working hard to develop good habits.

That meant in-depth note-taking, crystal clear file organization, and relying on my memory as little as possible by offloading important information into a notebook or onto a canvas. These habits resulted in fewer memory slips and higher attentiveness.

Fighting Scope Creep

It’s easy to forget the “minimum” aspect of an MVP. The client would frequently make new feature requests on top of the MVP feature set that had already been established. I had to learn to resist the temptation to agree to all these requests when I discovered how much lift seemingly small requests could add to the project. It was important to recognize when we were experiencing scope creep, and push back in order to keep moving forward.

Other Projects

Ice was made to be broken: