Project Context:

We had just launched a new daycare and drop-in service for customers in the previous month, but were not converting new business. After looking at the data, we wanted to understand why there wasn't as many clicks as we wanted and see if the horizontal scrolling was driving users away from our new services. At the time, we had 6 services with plans to increase to 10 in the future with our Petco partnership. We had to figure out how to get users to see our offerings and find what they may need.

Action:

RESEARCH

My initial research began with researching how popular digital products with multiple service offerings display their services for users: how do they toe the line between clearly displaying their services without cluttering up the interface?

Some of the designs I drew inspiration from to see how other designers solve issues of discoverability.

Design Exploration

The services section by Credit Karma and DoorDash seemed most aligned to the needs of our first MVP for our service tiles. As a user of both apps I thought their tiles gave users a clear understanding of all the product offerings without asking the user to navigate for themselves. Removing the boxes around each individual service helped save space and increase visibility.

With our notes on CK, DD and our app in hand and our design objectives in mind, I began creating my own wireframes to share with the design team. Sharing early sketches help both me and the team better understand where we’re at from a product-standpoint and what designs we think might work.

We knew we wanted the main design for the first iterations to have different service tile options, add notification alerts on upcoming walks and move the ‘Upcoming’ services card to the top when users have services booked.

Some of the low-fidelity designs I created for our initial design team meeting.

After our design team reviews, we pitched the design concept to the engineering team. However, we discovered that, due to a lack of resources, we could not create the notification popup nor move the ‘Upcoming’ service card to the top on our first MVP.

This led to further design iterations focused more on service tiles. From my new designs, the team and I narrowed our options down to those that removed the box around each service and stick with floating icons, which, for us, offered the most efficient use of screen real estate.

My medium-fidelity designs for the second design team meeting.

I continued to explore colors of the icons (monochromatic vs various color iterations), layouts (boxed in vs. floating) and what happens when we implement the 6+ additional services we had planned: do we want our services to expand on the same screen, open a new page or have it overlay on top of the service tiles?

With our new, colored options on hand, we decided to stick with a box-less layout with colored icons, which we felt brought more life to the app and was more consistent with Wag’s fun brand.

From that we had a meeting with the product manager and developers (Android & iOS) to discuss the design concept and what is most feasible given our deadlines. In terms of the menu layout, the developers felt that their best option from an MVP perspective would be to have the menu expand on the same screen, which would push the cards down the screen.

The last design iteration in high-fidelity.

Once the design was confirmed, I went back to make sure the design was pixel perfect and all of our assets were prepared. I cleaned up the files, then shared the design to the team on Jira and Invision.

Final Design

Result:

We decided to do some A/B testing between the current design and newly created designs to dig deeper: we wanted to truly understand if the problem with our lack of customers lay with the homepage design failing to adequately communicate our services or were the new services simply not as attractive as we initially thought them to be.

Interestingly, we saw signs that the improved service tiles were helping introduce newer services (drop-ins, daycare) to pet parents - this was consistent with our hypothesis that the legacy horizontal layout limited service discoverability (by requiring constant scrolling). 

This improved design also allowed us to introduce new services while preserving visible entry points for existing offerings. This was important because we had plans to expand our service portfolio in 2020. The result for the drop-in and daycare went up by more than 100+ paid requests per week after this rollout.

Reflection: