BARK! Smart Collar Onboarding

BARK! Smart Collar Onboarding

Client
Leverage
Project title
BARK! Onboarding for an IoT Dog Collar
Disciplines
Product designUser researchUXOnboarding

Bark! Dog Collar

An IoT Dog Collar Onboarding to let a user know that their best friend is in good hands.

The Challenge

As a part of the 2020 UX Result Hackathon, my team and I decided to tackle Leverage's challenge of creating an onboarding flow for a IoT dog collar.

As this was a hackathon, this was to be completed in the span of a day.

We sought out to understand what a dog owner who invests in one of these 'smart collars' would want to know right out of the box upon hooking up their phone to the product.

image

Research:

Competitive Analysis

We researched other IoT dog products on the marketplace and dove into their reviews to get a sense of the features they were offering their customers and a sense of how they were trying to present themselves.

  • Location or real-time tracking
  • GeoFencing
  • Activity and health alerts

Our Competitive Analysis for BARK! This really helped us to visualize what we wanted to focus on early on.
Our Competitive Analysis for BARK! This really helped us to visualize what we wanted to focus on early on.

User Research

We learned a lot in this deep dive of our competitors products. And, importantly we learned what types of users we wanted to talk to for our user research.

Due to having limited time for the project, we believed gathering user data would be best achieved through a survey. We sent the survey to 5 different users, and learned the following

image
image
image
  • Being able to put their trust in the collar and the company is key for the user. No one wants to take any sort of chances when it comes to their dog.
  • Users expressed a lot of interest in activity tracking being a feature they'd enjoy having in a smart collar.
  • Users want a more useful alternative to the standard electric/or geofence.
image

Define:

User Persona

We were able to, from our research, define a key user type to use when continuing into different stages of design. Meet Janelle.

image

Problem Statement

Dog owners need a seamless mobile app connected to their dog’s IoT collar because they want to ensure their dogs are safe and healthy.

Our Design Principles:

image
image
image
image

Ideation

Our App Map:

In order to have a better idea of what features we should focus on we spent some time developing an app map for the User Onboarding Flow.

The reason for this was that when we went into other stages of ideation, like sketching, it would allow us to divide up areas of interest to explore with our sketches.

image

Sketches (6-8-5)

Sketching is a big part of my design process - it helps to ideate and expand on certain ideas rapidly with little fear of 'bad ideas'. It allows for a lot of discussion after the fact and often leads down effective, fruitful design paths.

Examples of my sketches for this project, I tried to focus on things like '
Examples of my sketches for this project, I tried to focus on things like 'dog breed selection', bluetooth connection flow, and geofencing.

From Sketching into Wireframes

We wanted to quickly move our sketches into, at least, a mid-fidelity set of wireframes as we were on a time crunch. We set aside time to discuss what ideas we wanted to go forward with, and what ideas we wanted to leave out, informed as well by our app map.

image
image
image
image
image
image
image

Solution (v.1)

Choosing our Style Direction

In order to move into our MVP, and solution for the hackathon brief - we wanted to make sure our high fidelity, UI design choices reflected the research we'd done up to this point. We worked on a few style tiles to help this decision along.

image
image
This was the style tile that won out for our MVP
This was the style tile that won out for our MVP

Our Hi Fidelity Solution

After 14 hours of work - breakfast, lunch, and dinner eaten at our desks - we had an MVP to present for our entry to the hackathon. Below are the key screens.

image
image
image
image
image
image

Results and Continuation

We managed to place as a finalist in the hackathon! We were pleased in what we managed to put together in only the span of a day.

However...

We didn't think that this design was complete and we wanted to see it to fruition. We knew we didn't have enough time to do the amount of testing that we wanted, and we knew that was necessary to get the best iteration of our designs.

More Testing!

After the hackathon was complete, we tested our MVP on 4 people, and conducted a UI desirability test and usability testing.

Users were asked to complete tasks specifically around selecting dogs breeds, setting up a geo-fence, and visiting the Home Screen.

Here are our main takeaways:

image
image
image

Solution (v.2)

Key Changes, and Improvements

From what we learned in our usability testing we went through and made several key changes to the UI and UX of our screens.

The Logo.

The logo kept me up at night. Our users said our first iteration looked like a bird instead of a dog. This wasn't a product for birds, it was for dogs! The logo was used in several key places, and it was the first thing you saw on the splash screen.

image

Choosing a Breed (and general UI)

All of the users tested wanted more clarity around choosing their dogs breed. This screen also reflects a lot of the general UI and color scheme changes that were made.

image

The Geofence

Most of the users tested understood the concept of the 'geofence' but felt it could be a lot more clear.

image

The Profile Page

Our tested users really liked the profile page, but felt it could be clearer. We went in and tackled the UI and the information architecture presented in this screen.

image

Conclusion

This hackathon, though a ton of work, really paid off in helping to hone our skills in both designing and presentation.

If we were to do it again:

We Would Do More Research

  • We would put a priority on carving out more time to do more user interviews and gather more user research. When we went back to finish this project, it was talking and testing with users that came in the most handy.

Better Time Management

  • Though I am proud of what we managed in the short amount of time we had, I think we could have, for example, set ourselves time limits for some decisions. We got lost in the weeds on a few problems when we'd have been better served moving on.

Better Deliverables

  • Because of the aforementioned lack of user research, we weren't able to justify creating some deliverables that would have really helped us hone in on what we needed faster - things like a user journey map or storyboarding that have helped us in past projects.