PawDrops - UX+UI case study

A High-Level Overview

Our team was tasked with conducting research to assess user needs in order to develop a mobile-first website. Aside from the PawDrops product offering, it was crucial that we derived industry and customer insights.

• Project: mobile-first web design

• Role: UX & Lead UI Designer

• Tools: Figma, Sketch, InVision, Photoshop, Illustrator, SurveyMonkey, Google Slides, whiteboard

• Length: 3 week sprint

The Problem

Dog owners seek to find healthy and effective solutions to treating the ailments of their pets.

How might we ease these symptoms while maximizing the well being of the animal?

The Goal

Our main focus was to develop an online presence by which to market PawDrops and address customer pain points in the CBD market.

By integrating a digital product to streamline the online purchasing we could ensure that Pawdrops avoids losing potential business and capitalizes on providing an intuitive and enjoyable experience.

A Competitive & Comparative Analysis was the initial step in understanding how the PawDrops website would measure up to competitors in the pet CBD industry.

View Competitive & Comparative Analysis

We determined that the PawDrops site must include a prominent CBD education page, online checkout, About Us page, FAQ, comprehensive dosing guidelines, FDA disclaimer, and a lab certificate of analysis.

In order to best understand the pet CBD user base we needed to conduct qualitative and quantitative research. We sent out two surveys: one to past users of pet CBD and one to people with no prior experience using it but interested in trying it out.

Additionally, we interviewed both current and prospective CBD users in person and on the phone. Interviewing users helped us build empathy by identifying pain points, motivations, and behaviors.

Once we had collected data through surveys and interviews we needed to make sense of it all. Our research revealed that the majority of current users were 25-34 year old women who make over $100k a year and found out about CBD word-of-mouth from friends or family. They sought to treat behavioral issues, anxiety, and physical pain and purchased CBD at a dispensary or natural food store.

We also found that people tend to not be concerned about spending money on specialty pet care health foods, acupuncture, and supplements.

Pet owners who expressed interest in using CBD were unaware of its availability outside of a dispensary and its legality in all 50 states. Additionally, current CBD users were unsure of the effectiveness and expressed little brand loyalty.

Other insights we uncovered were that users spend about $50 on average for pet CBD oil, they also give their pets veterinarian medicine, and regularly shop online.

Who is our user?

All of the data and information collected from our research helped us devise a prototypical persona of a potential PawDrops customer.

A persona is constructed by identifying patterns in behaviors of CBD users, their goals for usage, and frustrations with similar products.

The Journey

After we created our persona we were able to tell a potential story about our user’s experience in reaching their goals. Our persona, Mariam, seeks to find a solution to her dog’s separation anxiety as she prepares for working longer hours at a new job.

She is familiar with the benefits of pet CBD and interested in the added nutritional benefits of PawDrops. Deliverables, like a persona and journey map, helped identify pain points and opportunities to provide an effective design solution.

First things first

As we began to ideate on our design, we discovered a variety of features that could be incorporated in our mobile-first website. We narrowed down those features to a Minimal Viable Product (MVP) as to not overwhelm our users in our initial design.

Site Map & User Flow

By using open card sorting exercises we narrowed down the structure of our information architecture. The main pages of our hamburger menu (Learn, Story, Shop, Contact, Account) and footer links were laid out in a hierarchical site map.

Delineating the necessary pages of our MVP site ensured that we were addressing crucial user needs and optimizing the user flow.

Design Studio
& sketching it out

After pinpointing potential user needs and challenges, we began visual brainstorming by sketching out various layout ideas.

Through a design studio we collaborated and explored varying concepts and perspectives which were combined to form a cohesive design solution.

Wireframes, testing,
& iteration

Based on ideas from our design studio we then built out wireframes for the pages of our site. Wireframes were a quick and effective way to construct the initial page layout.

More importantly, we were able to conduct usability tests with the wireframes in order to iteratively fine-tune and address areas of improvement. Testing revealed that users want fast shipping for immediate use, guest checkout, clear pricing, and stored payment options.

Based on insight from our research and testing we began to build the brand. Given the scope of the project, we focused on current CBD users as our primary audience. Through our UX copywriting we provided access to information in order to inform users about the value of CBD and the specifics of our product offering. Additionally, we addressed some misconceptions about CBD and what is in PawDrops.

The copy establishes trust and credibility with our users through accessible language.

In order to establish continuity and credibility, we defined a style guide by which to design our mobile-first website. The logo, fonts, and colors of the style guide were provided to us by PawDrops.

CBD users value holistic care and natural remedies and we aimed to convey that as our brand voice. Our inspiration was defined primarily by the PawDrops commitment to a natural and holistic approach to health and wellness.

Core values consisted of local, all natural ingredients, organic hemp, and small batch production in California. PawDrops was born from the care and devotion of our founders to the overall well being of their beloved pets.

Final high-fidelity prototype

Once we had optimized usability, it was time to design a high fidelity prototype of the mobile-first website.

As our lead User Interface Designer, I was responsible for the design, layout, and development of every page of the site, as well as generating a clickable prototype.

After an in-person critique with our client we strove to meet their desire for a minimal aesthetic with selective use of photography.

In a market with similar substitutes and little brand loyalty, it was imperative that our user interface conveyed the professionalism of our contemporary brand.

Next steps

For the scope of this two-week sprint, we focused on the development of a mobile-first site to serve our targeted Instagram user.

First and foremost the next step in this iterative design process would be the development of a responsive desktop site.

Additional features that could be integrated on the desktop site are: a blog, a Google map of in-store locations, language translation, a wholesale account, and a newsletter sign-up.