Case Study: Dog Day, Pet Care App
Dog Day + Dribbble
In the spring of 2022, I enrolled in Dribbble's 12 Week Product Design Course. The first assignment was to design a dog service app using Figma, beginning with research and ending with a testable, high fidelity designed prototype. To peak into the process of a product designer & the creation of Dog Day, scroll on!
The Process
Fully diving into the Product Design process was one of my favorite parts of this project. I loved researching, mining for insights, and learning more about my audience in order to creatively improve existing pain points and design an app that mets their needs. I explored the existing competition and interviewed dog owners to determine how they were meeting their pet needs, what resources they liked and disliked, and generally how they went about tracking their pet and finding reliable information.
The Solution
Dog Day is a mobile app that helps dog owners track their daily responsibilities while connecting them to an arsenal of verified, trusted canine professionals varying in specialities and skills. Users can absorb professional pet knowledge and educational courses while mining their own personal & private data to collect learnings to improve the well-being of their pet. The app encourages users to connect with professionals for personal pet needs and to garner their own pet data privately for personal tracking & medical appointments. Essentially, Dog Day is meant for growing smarter and working a whole less harder when it comes to taking care of your canine.
User Personas + User Flow
After garnering user insights, competitive data, audience interviews and learnings from my research stage, I created multiple user personas to consider while constructing out the app's high-level user flow. It became apparent that in order for this app to be successful, I must cater and consider both of the contrasting roles, canine professional and canine caregiver, and design an app that can meet both their needs and desires in personal ways.
V1: Exploring with "Exclusivity"
Using FigJam, I initially experimented with a user flow concept that allowed all users to download the app, however, without an exclusive invite to the community, users could not participate with professionals, engage in social activity, build a profile, etc.
Similarly, in order to create a business profile, one must be vetted by the app, have a robust resume or better yet, be recommended or personally invited to participate. This idea of exclusivity was born from audience listening including owners who are lacking trust in their sources and from professionals who are looking for a reputable place to provide their services.
V2: Finessing the Flow
Although the idea of exclusivity was exciting and may still be worth considering for the app's initial launch period into market, the app's founding pillar of simplicity became paramount especially when designing the user's onboarding stage. Dog Day's goal is to ease users' lives with smart, sophisticated, and simple tools and resources–not intimidate them. Click here for a closer look.
Wire-framing in Figma
After finessing the user flow and collaborating with my mentor, I was ready for the next step: wire-framing. I began with sketches (Crazy Eights exercise) to quickly generate a plethora of ideas and played around with ways the user interface could look. In the end, I used my app's three guiding principles–simplicity, sophistication, and smart–to guide the visual structure and layout of Dog Day. Click here for a closer look.
My Process
For me, this stage in the process was the most challenging due to my experience in art direction and design. Simplifying to include only core UI elements was testing yet rewarding. It was satisfying to see the UX/UI landscape of the app come to life and experiment with ways to improve the audience experience without diving into design. However, I did prefer to have a loose idea of font selection at this stage in order to see how elements might coalesce and enhance users accessibility & readability at an earlier stage.
UI Library & Components
After establishing the visual UI direction in my app, I introduced color, fonts, and imagery to bring the UI library to life. Creating this collection of branded, reusable elements in Figma was a dream come true for a product designer. The way it works is when you update one component, it updates across all of the screens and in every instance it is used. You can also create "variants" of a component and easily swap out as needed. These capabilities in Figma made the design process incredibly seamless, organized and uniform.
High-Fidelity Designs
Drumroll, please! We have arrived at the design stage. Here, I spent many hours contemplating color, accessibility, and ingenuity. I was determined for Dog Day to be a dog app but not look like a typical dog app. This platform is for the organized and sophisticated caregiver or professional and it needed to reflect just that.
Using a strong, serif font for headlines gave the app the professional touch I was looking for while feeling fresh and different in the crowded, "cutesy" dog space.
Product Design Thoughts
Some of my considerations when designing for ages 18-60+ included:
• Will a user understand what this icon means?
• Will a user know how to take action here? How could it be more clear?
• Will a user be able to read and see this?
• Will a user know to scroll horizontally? vertically?
• Does it function similarly to established UX principles & user behaviors?
• Do my users have the agency to find what they are looking for?
• Are there capabilities I could add to improve or ease pain points?
Dog Day Navigation
In the app, users have a pinned bottom navigation where they can easily hop around and learn the Dog Day landscape. The navigation includes a Home Feed, with a Browse and Watch option similar to Pinterest with "Live TV", where they can discover professional content and save to their own personal "Saved" collections.
Next, users have a chat functionality where they can ask professionals questions by visiting their profile page and directly contacting them. This feature is strictly for caregiver and professional interactions. Commenting & "liking" on content is non-existent in this app for the purpose of maintaining a professional atmosphere. "Following" however is a feature that is highly encouraged.
In the middle, we have the discover/search page that allows users to dive right into whatever they may be looking for. It is a common user behavior and I wanted to make it prominent and easy for users to find as soon as they opened the app.
Following, we have the "Shop" feature where Dog Day has vetted hundreds of businesses to promote only the top tier canine products made in America and trusted by professionals. Professionals can link out their recommended products and share discounts from their profile page.
Lastly and closest to the thumb, we have the user's profile page which includes a pet biography, medical history, pet performance data, schedules, reminders, goals and more. Users can pair their smart tech through the app's bluetooth capabilities to track bowel movements, meals, and walks through GPS. At Dog Day, caregiver profiles are set to private while our professionals are public. This ensures that users focus more on professionals and on elevating their personal pet care. With permission, users may share their private profiles with professionals to ask advice and share a holistic view of their dog's health journey.
Prototyping in Figma
"Is this real?" was one of the questions from my prototype tester.
As a product designer, you may hear that often...A) because they have never interacted with a prototype before or B) because your prototype is performing very well! If that is the case, it is a sign that all of those thousands of tiny decisions you agonized over along the way actually add up to something useable. It translates. And that is the goal when it comes to your app and the user's interaction. It should be as seamless as possible.
However, the true, high-fidelity form takes fruition after handing off Figma files to the development team. For now, this prototype is the first, initial feel of how the app interacts with users through an interactive, first-person device.
Try it for yourself!
Yay, Dog Day is here! I highly recommend downloading the app, Figma Mirror, to explore the prototype on your phone or you click the play button symbol in the top right corner (after clicking the link) to play on desktop.
Final Takeaways
• I could keep problem-solving forever and plan to build this out even more!
• I love how the PD process expands with my mind & new solutions along the way.
• I love the user interaction required in the process of product design. Starting with user research, interviews, testing, etc. It is human-centric at every step.
• Trial and error is the nature of the PD process and it is important to embrace the scrappy, messy parts in order to deliver clean, strong designs in the end.
• Accessibility > Beauty
• Test, test, test!
Thank you
I hope you enjoyed this case study and thanks for checking out Dog Day! 🐩