Woofy
Dog Training & Care Mobile App
PROJECT OVERVIEW
Project: Woofy
Industry: Pet
Date: Revised in 2023
Duration: 12 weeks
My Role: UX/UI Designer
Tools: Pen & Paper, Figma, Artboard Studio
Woofy is a mobile app that helps dog parents with dog training and care, and I followed the double-diamond design process model for this project.
#EMPATHY
Why Woofy?
Dogs have been humans' best friends for at least the past 15,000 years. They have participated in herding, hunting, and protection, and have always impressed us with their loyalty, friendship, and companionship throughout history. My passion for dogs and my side hustle of dog sitting led me to embark on this project. With Woofy, my goal is to provide education for dog parents on dog care and training and help them create better experiences right from the puppy stage through to their senior years, all without having to spend a fortune.
Problem Space
Owning a dog can be challenging because it requires time, energy, money, continuous learning, and effort to keep them in good shape and health. Lacking knowledge and experience, especially in the first year, might give dog parents a hard time training their dogs. As dog adoption rates increased during the pandemic, more people faced the challenges of puppyhood, so I wanted to address this issue by educating dog parents.
The Solution
A tool that enables users to train their dogs with easy content
A tool that helps users learn and practice grooming for their dogs
Project Constraints
The challenge of being the only designer
The limited time and budget
The limited industry knowledge
Proto-Persona
A proto-persona was created to represent my user type for the initial stage.
PRIMARY RESEARCH
To conduct successful UX research, I began with preliminary research, followed by user interviews, and then proceeded with secondary research.
User Interview Planning
With my problem statement, research objectives, and interview questions, I developed an interview plan and recruited five interviewees with dogs.
Problem Statement: New dog owners often face challenges with training, grooming, and managing puppyhood, which can have a negative impact on both the dogs and their parents.
Research Objectives:
As a researcher, I want to understand how dog parents manage puppyhood
As a researcher, I want to know how dog parents train their dogs
As a researcher, I want to understand how dog parents handle grooming or care
User Interviews
To further explore my problem space, I interviewed 5 participants to discover their pain points, motivations, and behaviours regarding dog training and care.
User Pain Points
New dog parents don’t know much about training
They find some online content confusing or not enough
Grooming salons are costly and require appointments
Grooming is hard to learn and apply
Private trainers are expensive
User Goals:
Learning how to train their dogs properly
Ease puppyhood
Learn to groom
Self-learn and get confident about dog care
SECONDARY RESEARCH
In addition to primary research, I conducted secondary research to explore various dog training products, including GoodPup, Puppr, and Pup to Date. While most apps have similar features, easy navigation, and a friendly look, they primarily focus on training. Including grooming and other features would help Woofy stand out in the market.
#DEFINE
User Insights
After interviewing participants, I found some user insights:
5 out of 5 participants had a difficult time during puppyhood
They spend a lot of time training their dogs with confusing online content
They still lack knowledge in training, dog psychology, and other pet care, including grooming
Although most participants lack knowledge and experience, they are willing to learn more to give their dogs the best training and care.
Some Notes From Users:
“Training is tough, and trainers are expensive.“
“I want to groom my dog, but I never learnt how to do it”
“I had to use some expensive dog services for training”
“It's good to know what's out there, like new products, toys, and gadgets.”
Affinity Diagram
I created an affinity diagram for organizing the data and combining multiple sources of research into natural groupings. This diagram allowed me to discover relationships, patterns, and similarities among the data. I first categorized notes under topics and found patterns.
Raw Data
Categorized Data
Empathy Map
Empathy maps represent a principal user and help designers understand their motivations, concerns, and experience. I created an empathy map based on my proto-persona and affinity diagram to dig deeper into my user’s thoughts and feelings about dog training and care.
Personas
A persona is a fictional character (archetype) that we create based on our research to represent the different user types that might use our product, service, or brand similarly. I created two personas to understand my users' needs, experiences, behaviors, and goals.
Journey Map
Journey maps are visualizations used for understanding customer needs and pain points as people interact with an organization. I created a journey map for a visual representation of the user experience. While focusing on main actions and tasks, I found some opportunities and expressed the user's feelings during their journey.
After creating personas and the journey map, I can say that dog parents' challenges include dog training, grooming, and finding suitable products for their dogs. So I focused on these topics, which helped me create a point of view statement and led me to HMW question:
Point of View Statement:
Dog parents have difficulty training their dogs or finding trainers, and they also lack experience and knowledge in dog care, including grooming, dental care, and psychology, which impacts both dogs and parents negatively in the long term.
“How might we help dog parents better train their dogs and educate parents about dog care”
#IDEATE & TEST
The ideation phase involves generation, selection, and development after gathering user data and defining insights based on the data. The next step is to come up with as many solutions to the problem as possible, so I started with the user stories.
User Stories: User stories are short descriptions of features, the perspective of the person who wants the features. I created stories based on previous data collected.
Epics: An epic is a very big user story, and it contains many smaller user stories. For Woofy, epics were identified in different categories, including training, grooming, and shopping.
Feature Prioritization Matrix
Feature prioritization identifies the most important problems to solve first, and it satisfies the varied needs of users and the business. I started creating a matrix while trying to decide what should be built when based on what will bring the most value to the user and what is feasible.
Information Architecture
Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and logical way. IA helps users find information and complete tasks, and I created mine to set the structure of my app.
User Flow
User flow is an ideation technique that documents a series of actions a user takes to achieve a goal when using an application or website. I created a user flow to help map out how users interact with the product. The below user flow demonstrates finding relevant videos on the app.
Value Proposition
A value proposition ensures that a product or service is positioned around what the customer values and needs. My value proposition for Woofy:
“Woofy provides easy and reliable dog training, private sessions, and grooming, making puppyhood smoother than you think. Master dog training and grooming on your own.”
Storyboard
Storyboards are a tool that visually predicts and explores a user’s experience with a product or service. Based on my user scenarios, I created a storyboard to show a linear sequence of illustrations to visualize a story.
User Onboarding
First-time user experience is a critical area of research and consideration when building a product.
As designers, we should be asking:
How easy is it for a user to use the product?
How easily can a user learn how to use the product?
User onboarding is the process of increasing the likelihood that new users will be successful when adopting the product. It is designed to retain users and reduce overall churn. Since the majority of my users are iPhone users, I have started sketching to create an onboarding flow with simplicity and aesthetics
Here are some sketches for onboarding:
Sketches
I started the prototype development with early sketches and continued with low-fidelity and high-fidelity wireframes. It's always helpful for me to start with a pen and paper because I feel free and have more space to brainstorm and create.
Lo-Fidelity Wireframes
After the sketching phase, I transferred each sketch into digital wireframes on Figma. I first created the low-fidelity ones to conduct my first usability test for the app's functionality. Also, I designed wireframes for iPhone because it’s my users’ top preference.
User Test #1
To test the app's functionality, I conducted a user test with five participants. Using a defined script and a prototype, I had users complete a task and a sub task.
Participants: 5
Task: Finding and watching a relevant training video (give paw)
Sub-task: Finding and saving a dental video
Total hours: 2 hours
I first created a user testing plan, including the following:
-Set an objective
-Define the target users
-Define the questions I want to be answered
-Define the tasks and the scenarios for each task
-Test prototypes and gather user feedback
-Review findings and suggest improvements
I recruited five participants for this test, and I used the low-fidelity prototype. The task for this user testing was to find and watch a relevant training video (give paw) and then check and add a dental video for future use as the last task.
All participants were able to complete both tasks successfully and gave feedback based on their user experience. Later, I used the results from the first round of usability testing to inform my design changes for my next iteration.
User Insights & Feedback: 3 out of 5 testers found the number of boxes shown on the training and grooming screens overwhelming, and said:
Iteration:
As per my users’ feedback, I simplified the screens before I continued to the next step.
The below screens show the before and after versions.
Before - The screens had more boxes to display images, and the users found them overwhelming to go through each one by one.
After - The screens have fewer boxes to avoid overwhelming feelings for users and allow them to digest information easier and faster.
Brand Development
Moodboard
A moodboard is a visual presentation or collage consisting of images, text, and objects in a composition. As it's a great way of design inspiration and curation, I created one to showcase the elements, including shades of blue color and images related to dogs and nature.
Color Palette
A color palette is a type of visual presentation of the colors used for a project, brand, or product. For this app, I chose blue tones associated with trust and intelligence, also friendly orange tones, and neutral tones associated with peace and calmness shown in the below color palette.
Logo Development
The abbreviation logo stands for language of graphics-oriented. A logo is used to recognize a public identification of a brand or company.
For the wordmark, I chose “Woofy” because it refers to the sympathetic dog bark. It sounds natural, warm, and friendly. The below sketches show how I got to the final version of the logo.
After sketching on paper, I created a digital logo using round shapes for a friendly and fun look and chose a similar typeface called Baloo.
Typography
Typography seems easy but requires extra attention as each type evokes different emotions. I chose Baloo, a sans-serif typeface, for a fun and friendly look at titles and the logo. Also, I used Montserrat, another sans-serif, for the body because both fonts pair well. The below practice shows both fonts.
Icons
An icon is a small graphical representation of a feature, program, or file. When we click or double-click an icon, the associated file or program opens, or an action is performed. Here are the icons that I used for Woofy.
Grids
Grids are everywhere; architecture, graphic design, software design, mobile design, and websites. They are the foundation of UI design, and they organize elements inside space and create logic for managing content.
Most frameworks and websites use a grid system of 12 equal-width columns, and I used a 4-column grid system for this app.
Hi-Fidelity Wireframes
After working on branding my app, including colors, typography, and icons based on UI rules, I created high-fidelity wireframes for the next part of user testing.
User Test #2
Since I conducted the first user testing to test the functionality of my app, I repeated the second user testing focusing on the functionality and aesthetics of the app. My goal was again to identify usability or user interface problems, collect qualitative and quantitative data, and determine the participant's satisfaction with the product.
Participants: 5
Task: Finding and watching a relevant training video (give paw)
Sub-task: Finding and saving a dental video
Total hours: 2 hours
I used the same user testing plan as the previous one, recruited same participants, and used the high-fidelity prototype this time. The tasks given for this testing:
Find a training video to teach “give paw”
Watch the video
Complete the training
Go through grooming videos
Find a dental tutorial video
Add the video to list
User Insights & Feedback: All participants were able to complete both tasks successfully and gave positive feedback based on their user experience. Most users enjoyed the app for being user-friendly, fun, educative, and motivating.
#PROTOTYPE
Mockups
A mockup is a model of what the final product will look like, and is frequently used to present a final product in a real-life context and get feedback. Here are some mockup examples for Woofy below:
View Prototype >
Key Project Learnings
As Woofy was my capstone and passion project, I enjoyed every part of the design process, including interacting with dog parents, putting myself in their shoes to learn more about their motivations, goals, and pain points, brainstorming, ideating, and designing a fun app.
My biggest takeaway from this project was not getting too lost in research but always going back to researching or testing when necessary because users are the core of everything. Also, I relearned and practiced some UI rules and UX writing, and I felt proud to work on a project that can help dog lovers in an entertaining and informative way.
Future Concepts
The next steps for this project include:
A puppy school for premium users
Online dog therapy services
Content creation for other pages
More animations throughout the app
Thanks for reading!
