Illustration, Branding, and Product Design
BARK is a mobile application that pairs with a physical smart collar to help owners better track their dogs.
48 hour UX Hackathon challenge
Roles:
Product Design, Branding, UI, Prototyping, Design, Illustration, Graphic Design
Deliverables:
Tools:
Figma, InVision, Adobe Photoshop, Adobe Illustrator, Adobe After Effects, Adobe InDesign
Time and Partners:
48 hour challenge
Collaboration with Morgan Kuin and Ian Solano
User Research, Survey Analytics, User Interview Insights, Task Flow, User Flow, Low-Fidelity Wireframe, Mid-Fidelity Wireframes, High-Fidelity On-Boarding Mockups, Usability Test, Interactive Prototype
Background
Dogs are truly man’s best friend; there’s over 76 million in the United States alone. However at least 1 out of 3 pets become lost at some point in their lifetime, and close to 10 million dogs and cats are lost or stolen in the US every year.
With my partners Morgan Kuin and Ian Solano, we took on Leverge’s UX challenge to build onboarding process solution for a smart dog collar.
Problem
To begin the challenge, we were given a problem statement from the judges and a few specifications.
For our challenge, we’d like you to build out the onboarding process for a smart collar solution for dog owners.
Smart dog collars enable owners to track the real-time location and activity of their dogs. The collar is chew-proof, water-proof, and just generally dog proof. Owners can use Bluetooth to easily connect to the collar and set up their account via a native app on their phone. The collar utilizes GPS technology to track the dog’s location and stays charged for up to 4 months. Users can recharge the collar via usb port.
Some App Feature Ideas:
-
Owners can set a geofence around their house, dog parks, and more, marking them as safe areas for their dog to roam freely
-
Owners can receive alerts when their dog exits one of these geofences, alerting them immediately that their dog may have escaped
-
Owners can track the real time location of their dog, quickly finding their dog if they have escaped.
-
Owners can create a profile for their dog
-
Owners can view dog activity and health stats, similar to Apple’s health app tracking for steps per day
How did we Solve this?
In just 48 hours, we researched, defined, created, and designed an on boarding experience that would better inform dog owners with fast, clear, and intuitive content.
How did we do this?
Use the buttons below to skip to different parts of the process. You may also scroll through to see the whole story.
Define & Discover
Understanding the space through user research and insight.
Surveys
To further look and define our problem, we sent out surveys to better understand dog owners’ motivations and needs.
We asked questions like:
-
Do you use Apps/products to monitor dogs?
-
In terms of your dog's health, what are you most concerned about? In general, what is your biggest concern regarding your dog?
-
If you had a collar that can track your dog, what would you like it to track?
-
What precautions do you take to ensure your dog is safe and does not run away?
-
What do you do if it escapes? Walk me through your process? Who do you contact? How do you feel about it? How long does it take to recover your dog?
-
What services are you interested in for your dog?
-
Where are places around the neighborhood to walk your dog?
Who did we interview?
Young Dog Owners
Experienced Dog Owners
Key Takeaways
#1
People are heartbroken when they lose their dogs.
#2
Many would like to know more about how their dog thinks.
#3
They don’t usually use any apps that help them track their dog.
#4
They go to neighbors and the community for help when their dog goes missing.
#5
They would like a way to track nutrition.
#6
Their dogs have run away at least once.
We also interviewed competitors to analyze different trends on their platforms. We were looking to see what kept creatives interested and what kept their community strong.
"The users are dog owners who live in urban environments and want more comfort around where their dog is located. Our target age range is early 20s to early 50s. They are generally comfortable with technology and can easily use their iphone. It's likely they already own a smart speaker or bluetooth headphones.”
-Notes from the sponsers
Discovering our Users
So who will use Bark? Based on our research and given specifications, we made personas that accurately reflected our target demographic.
Jessica
Age: 24
Location: NYC
Occupation: Student
Pain Points:
-
Wants to feel connected with her golden retriever
-
Wants to have the peace of mind while at work
-
Wants to feel like a good dog owner
Motivations/Goals:
-
Wants to have the peace of mind while away and busy at school
-
To be aware if her dog is in danger
Summary:
Joe Garcia is a mailman who lives in the suburbs of Minnesota. He owns two dogs who are around 6 years old and he frequently takes them on walks but they sometimes have a tendency to run out the door. Joe is worried about their old age and often wishes he can understand what’s on their mind so he can be a better owner to his best buds.
Joe Garcia
Age: 50
Location: LA
Occupation: Accountant
Pain Points:
-
To decrease the amount of time it takes to find his dogs after they run away
-
To keep tabs on his dogs’ health
Motivations/Goals:
-
To decrease the amount of time it takes to find his dogs after they run away
-
To keep tabs on his dogs’ health
Summary:
Jessica Deckman is a graduate student living in Brooklyn who works as a management consultant in New York City. She owns a golden retriever to help her fight the loneliness of her new environment and to also have a friend to play with when she comes home. With her demanding career, she has very little time to spend with her dog so she often relies on technology to help her out. She cares deeply for her golden retriever but has to go through the hassle of training him and making sure he’s safe when she's at work.
Competitor Analysis
In addition to interviewing dog owners, we looked at what features made other digital platforms successful. It helped define what Bark needed. We looked at competitors that made physical devices that connect to apps. By creating this chart, Bark filled a lot of requirements customers wanted but could not get from existing products.
Ideate
We used feature prioritization, user flows, and user journeys to better understand our product.
Feature Prioritization
& User Journey
We used feature prioritization, user flows, and user journeys to better understand our product.
Feature Matrix:
To organize our ideas, we used a feature prioritization matrix method to sort out what types of features we wanted to include in our app. We created a list of possible features for Bark and then identified which ones were highly urgent AND impactful.
User Journey:
Informed by our personas and interviews, we mapped out a typical user’s journey from losing track of their dog’s whereabouts to successfully recovering them. Our takeaways include:
-
Time is of the essence. The more time that has elapsed since their dog’s disappearance, dog owners feel there’s less of a likelihood of finding their dog. So our solution needs to decrease the amount of time users take to complete an action when searching for their dog.
-
There is uncertainty throughout the entire journey. Which ties into…
-
…Dog owners consider many questions after they lose their dog like where do I start looking, who do I contact for help, was my dog dognapped, are they injured? Searching for their dog is overwhelming and feels like a shot-in-the-dark experience, and so our solution would need to help eliminate as many uncertainties as possible.
A few things we kept in mind from the challenge that helped inform the types of extra features to include:
-
The collar will cost between $80-$140 dollars.
-
An owner can purchase multiple collars for multiple pets. You might have two dogs and you want to get both of them smart collars. (might have to create a feature that enables more than one dog on an account)
-
What to consider on the technology side: The owner can turn on and off location tracking. This is because it drains the battery of the collar, so you might not want it always running. When the location is turned on, they receive an update every 2 minutes.
Onboarding Flow and Sitemap
For our solution, we first created an Onboarding Flow to organize how to present our features. The chart established direction for the features and organized accessibility on each page. The goal was to break down screens and figure out if users were not overwhelmed by information.
This map subsequently informed our decisions for low-fi iterations and the first BARK wireframes.
Design
Designing around the problem.
My role was to create the look and feel of all the visual assets.
Creating the Design
As the lead designer on the team, I created the look and feel of the visual assets.
Color definition:
-
When picking colors for the palette, I paid attention to the emotions of the people we surveyed. Many of them said that it is very stressful when they lose their dog, so I made a soothing palette that was not too edgy. I kept in mind that this app creates peace of mind. The beige and darker green tones reflect this sentiment.
Icon definition:
-
To make the design informational and modern, the illustrations, buttons, and text were very minimalistic. Since this collar contains new technology that connects with GPS tracking, I wanted it to reflect innovation and instill a sense of safety in dog owners.
Branding Strategy:
-
Throughout the process, I kept in mind the demographic and age range of the users. With a young millennial audience, I used line illustration and minimal coloring. By looking at competitors like Rover and Furbo, I liked how they integrated dog imagery with buttons and backgrounds.
Sketches
In my sketches, I wanted the onboarding to be an experience that told the story of a dog finding its way back home. Since onboarding is an informational journey, I thought it would be easy to present it as a map. I also wanted to include continuous and seamless illustrations from page to page.
Low-Fidelity Iterations
As a team, we figured out what information should belong to each page on the low-fidelity sketches. At each page, there would be buckets that explain features on the home page. From here, I designed the graphics that would go along with the copy written by my team members.
Hi-Fidelity Iterations
Creating the high-fidelity wireframes was the first time we fully visualized our ideas. Here, we brought together my sketches and the information of the low-fidelity planning into one. We also looked at all the small details we would need to include like, how-to guide pairing with BlueTooth and enabling location.
Create
Implementing the design to make a final iteration
Polished Hi-Fidelity
After completing the onboarding screens, we went beyond what was needed and made a homepage. Surveys and specifications from the sponsors informed the design of the homepage. We included enable/disable tracking and a map of the dog’s location since the app is a dog locator app first and foremost. People that we interviewed also expressed strong interest and concern for their dog’s health and monitoring that, so we also decided to include and visualize those stats on the home page. Lastly, we also included fun animations to make for a friendly, inviting experience.
Login & Onboarding
Along with the onboarding storyline, I decided to include two progress trackers. The top tracker indicates where you are in the onboarding process and resembles a map. The bottom tracker feature was added after usability testing because testers expressed it was important to know where they were at each step. A way to anticipate how many pages they need to compete to progress.
Tutorial Screens
Home Page & Alerts
The Neighborhood Watch feature is our featured highlight. One of the worst things about looking for your dog is doing it alone, so we created a feature that alerts users in your vicinity. A user can reach out to the community, band together, and increase the likelihood of finding your dog.
This idea provides hope for finding your dog and creates the first step in ensuring their safety.
This feature is used in conjunction with the dog’s profile, as Neighborhood Watch would require confirmation of personal information. Similar to a missing dog flyer or an ad on a milk carton.
Conclusions
Reflecting on the process
Reflections
According to the judges' feedback and the users we tested, our solution achieved what was needed and demonstrated new features that broke down the process. Overall, the illustrations were also very comprehensive and tied together with the whole feel that I pushed. Through this experience, I learned more about the onboarding process and how to condense information in copy and graphics. BARK also taught me to be very detail-oriented in adding important features like battery life and location services.
What's Next?
Case Study