smartmockups_ko3316nm.jpg

City Bark

UX | UI Design, UX Research

 
 

City Bark

UX/UI Design, UX Research


OVERVIEW:

City Bark is a multi-location, high-end pet store in Detroit, Michigan. In January of 2021, they acquired a $75,000 grant from the city to expand and launch self-wash and full-service grooming facilities in each location. I was approached to design a native mobile application that would allow new and existing customers to book appointments for their pets.

Figma, XD, Miro, Typeform

 

CHALLENGE: CREATE A NATIVE MOBILE APPLICATION FOR DETROIT PET OWNERS TO BOOK GROOMING APPOINTMENTS.

 
 
 
 
 
 
 
 
 
 
 

First, we scoped out the competition:

During the initial step of our discovery phase, we sought to find out what the competition was up to. We were surprised to find out that City Bark was only one of two places offering full-service grooming in downtown Detroit, and would be the only groomer providing a mobile booking application.

 
 

Next, we chatted with some dog owners, and here’s what we found out:

I created a digital survey with 15 questions given to 45 dog owners. The goals of the research included identifying the demographic, gauging potential customer interest, and identifying the potential needs of the users.

 
 
 
 

SO, WHAT’S THE PROBLEM?

Busy pet owners can’t drop off their dog(s) at the groomer while they are working. Therefore, appointment slots between 9:00 am-5:00 pm are harder to fill.

Solution:

Develop a mobile application that allows users to schedule grooming appointments in advance with a local pickup and drop-off service for their pet(s).

 

Who is our user?

To further understand our users and to gain an empathetic perspective I created personas and a user journey map.

 
 
 
 
 
 

Mapping out the User Flow

After understanding who I was designing for and what actions they will need to take to accomplish their goal, a user flow was created to outline the most crucial tasks.

The essential user tasks were creating a profile, booking an appointment, and setting the pickup location.

 
 
 
 
 

Sketching & Prototyping

Next, I sketched paper wireframes for each screen of the flows. By focusing on the elements of each screen rather than fine details I was able to create a paper prototype quickly and run quick guerrilla-style testing using Marvel Pop to test the essential task flows. The feedback from testing presented that there were a few screens missing. After, I built the wireframes into a clickable prototype for usability testing.

 
 

01.

 
 

02.

 
 

03.

 
 

Brand Identity:

The brand identity was taken from City Bark’s updated interior design. The new bath tiles and re-branding included neon lights which were installed by Detroit light artist, Patrick Ethen. It was important to include the retro feeling & modern detail into the design of the application.

 
 

High Fidelity Prototype:

After conducting another round of user testing, I designed a high-fidelity prototype to hand off to developers.