Desktop - 4.jpg

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. 

Desktop - 5.jpg

Define & Discover

Understanding the space through user research and insight.

 

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:

  1. Do you use Apps/products to monitor dogs?

  2. In terms of your dog's health, what are you most concerned about? In general, what is your biggest concern regarding your dog?

  3. If you had a collar that can track your dog, what would you like it to track?

  4. What precautions do you take to ensure your dog is safe and does not run away?

  5. 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?

  6. What services are you interested in for your dog?

  7. 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

 
Desktop - 5.jpg

Ideate

We used feature prioritization, user flows, and user journeys to better understand our product. 

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.

 
Desktop - 5.jpg

Design

Designing around the problem.

My role was to create the look and feel of all the visual assets.

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. 

 
Desktop - 5.jpg

Create

Implementing the design to make a final iteration

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

 
Desktop - 5.jpg

Test and Reiterate

Implementing the design to make a final iteration

 
Desktop - 5.jpg

Conclusions

Implementing the design to make a final iteration

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

 

Hey!

Thank you for taking a look! if you want to contact me further please check out the links and information to the right. 

Want to stay in touch?

ejung4545@gmail.com

Find Me here!

  • Instagram
  • Vimeo
  • LinkedIn

© 2020 Erin Jung