Illustration, Branding, and Design
Bark is a mobile application that pairs with a physical smar collar to help owners better track their dogs.
48 hour UX Hackathon challenge
Roles:
Product Design, Branding, UI, Prototyping, Design, Illustration, Graphic Design
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
Deliverables:
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
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
To begin the challenge, we were given a problem statement from the judges and a few specifications.
How do 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.
Research and Insight
Surveys
With the advancement of digital media, art communities of the past have become more and more obsolete. Once, Tumblr and DeviantArt were the go-to platform for artists but lost its following due to outdated design, spam, and communities. Artists turned to social media sites because it could consolidate content and niches. Though over time, this model subsequently failed (Kelsey Ables, artsy.Net).
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
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.
#6
Their dogs have run away at least once.
#5
They would like a way to track nutrition.
#4
They go to neighbors and the community for help when their dog goes missing.
"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
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.
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 Deckman
Age: 24
Location: NYC
Occupation: Student
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.
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
Joe Garcia
Age: 50
Location: LA
Occupation: Accountant
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.
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
Competitor Analysis
In addition to interviewing competitors, we looked at what features made other digital platforms successful. It helped define what Co.Create needed.
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
Feature Prioritization
To organize our ideas, we used the MoSCow method to sort out what types of features we wanted to include in our app.
We decided to include all the Must, Should, and Could Have features. To us, these were the most important pillars of our community.
Job Boards, Stories, Close Friends, and Reposting went against our beliefs. It would restrict users from meeting new people and influence them to stick with their current connections. These are the traps of the current social media model, and we wanted to stay away from that.
User Journey
By using the information we received from card sorting, we created a sitemap, including all our features and their pathways.
This map subsequently informed our decisions for low-fi iterations and the first Co.Create pass.
This map subsequently informed our decisions for low-fi iterations and the first Co.Create pass.
User Flows
After figuring out which features we wanted to include, our next steps were to use a method of card sorting to find which features should be on which page. We sent out cards to fifteen people and had them organize them based on what they believed.
Sketches
To start the design process, I created a word web that expressed the feelings of the Co.Create brand. I based these on our personas and the types of users we would be targeting.
Low-Fi Iterations
Through product defining, word associations, and illustrations, I designed around the problem and the personas we created at the beginning of this project.
Brand Strategy Pyramid
After defining the sentiment of Co.Create, I created a chart that outlined the purpose, promise, personality, and positioning of the brand. This outline gave the brand a concrete goal.
Hi-Fi Iterations
To achieve the personality I defined, I made style choices that would closely align with the identity of the brand.
-
COLORFUL designs, SLEEK typography, and SIMPLE illustrations will project an INCLUSIVE brand that focuses on SAFE spaces with UPLIFTING and FRIENDLY.
-
By creating minimal illustrations of creative tools, different users and creatives will be represented by their craft.
-
A brand that involves the primary palette will bring simplicity to the design that is easy on the eyes and gives a sense of community.
Branding Explorations
I decided to use a survey to see what people associated with different palettes and logos. People were able to input their feelings, and I picked the one that had the most associated with the brand adjectives.
The palette that most aligned with what I intended was palette #1.
Creating the Design
After defining the palette, I found a stylistic direction that would drive the high fidelity screens.
Color definition:
-
A primary color palette to evoke a sense of learning and foster friendship through collaboration.
-
It’s “young” style brings us to a more simplistic time where learning and friendships came easy to us.
-
The primary colors are easy on the eyes because of its versatility. This represents inclusivity and a safe space for all.
-
The contrasting blues pair well with the bright yellows and the bright red adds an enticing accent to the design.
Font definition:
-
I chose Effra font because I want to make the text a bit more informational and objective. Since many of the illustrations are already lively, there is no reason to keep the font vibrant.
Icon definition:
-
To represent the fun, young, and creative vibe we are trying to achieve.
-
Blue is the dominant color because it acts as a strong base for the lighter colors.
-
Round edges to make it modern and soft to the eyes.
Polished Hi-Fidelity
I decided to use a survey to see what people associated with different palettes and logos. People were able to input their feelings, and I picked the one that had the most associated with the brand adjectives.
Login & Onboarding
I decided to use a survey to see what people associated with different palettes and logos. People were able to input their feelings, and I picked the one that had the most associated with the brand adjectives.
Explainer
Home Page & Alerts
Reflections
I decided to use a survey to see what people associated with different palettes and logos. People were able to input their feelings, and I picked the one that had the most associated with the brand adjectives.
Experienced Dog Owners