BARK! Onboarding for an IoT Dog Collar
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.
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
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
- 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.
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.
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:
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.
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.
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.
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.
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.
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:
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.
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.
The Geofence
Most of the users tested understood the concept of the 'geofence' but felt it could be a lot more clear.
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.
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.