Bow Wow

UX/UI Design & Development

Bow Wow is an app that makes dog care routine easy and more enjoyable for pet owners. It removes stress of being overwhelmed by all the details involved with pet ownership as well as adds a refreshment into a dog care routine, making it more enjoyable for both a pet owner and a dog. The app allows pet owner to keep track of dog’s nutrition, medication history, and activity level. It notifies pet owners about upcoming dog health care tasks and also helps to discover new places for a dog to exercise and play.

Preliminary User Research

To get clarity on product’s goals and constraints, we conducted guerrilla research with prospective users and performed online user research via forums. During this stage we identified which user groups to target and created a list of user needs and behavior patterns. Having analyzed all the collected data, we realized there are two key user groups, which are first-time dog owners and dog owners whose dog requires more attention to its health due to its age or/and allergy specifications.

Personae

After user research analysis we created personae based on the patterns we found in user groups. Focusing on users’ priorities, we designed persona documents that clearly communicated dog owners’ goals and frustrations, which helped to create empathy with them and communicate research findings to the development and management teams.

Customer Journey Framework

Having developed personas, we created a customer journey framework to illustrate the context in which dog owners will be using the app and to convey their experience across multiple channels and touchpoints. Having sketched and digitalized the framework in Illustrator, we created an infographics with a timeline of user experience, highliting the most important parts for easier navigation.

Sketching

To visualize the basic idea of how the product will work and to identify the most important content, we went through a sketching phase. Sketches allowed to focus purely on the concept of the app, without worrying about details. The activity tracker interface appeared to be the most challenging one and it was very helpful to get an early feedback on what design decisions would work and what would not, thereby eliminating the chance of moving in the wrong direction.

Wireframes

Before moving to a high-fidelity design of mockups and a prototype, we focused on user stories that we visualized in wireframes. This helped us to concentrate on the consistency of the interface across all the screens and make sure that the app is absolutely intuitive to use.

Brand Guidelines

To explain the Bow Wow brand and its message to stakeholders, we created a brand guideline that had to be consistently followed by members of the team. This guideline provided information on the brand name, logo variations, typeface, color palette, and UI design principles. It also reflected the vision and mission statement of Bow Wow, highlighting the goal of the app and its core values.

Bow Wow Branding filled and ghost buttons

Bow Wow Branding vision and mission statements

Bow Wow Branding colour palette and dog photos

Previous image

Next image

To test visual details of the app, we designed high-fidelity mockups that we could make interactive later in the prototype. Working with a white background and dark grey and blue shades for primary colors, we created a contrast between UI elements, thereby guiding the user’s attention. A warm and bright shade of pink was used as an accent color for elements that should appear closer to the user and be the most noticeable (e.g. buttons). Some elements, such as the app bar, bottom navigation bar, and toggle, are elevated and have the drop shadow, reflecting properties of the physical world and following the material design approach. We also created a set of illustrations that revolve around a unique Bow Wow character and illustrate dog activities that the user can select and track.

Clickable Prototyping

To test the usability and feasibility of the design, we made a high-fidelity prototype using Invision for main app flow and Principle for micro-interactions. The prototype became efficient in testing UX and UI design solutions and gave the experience of using the real app.

User Testing

To test out the concept and user interface design of the app we conducted user testing with UserTesting.com and TryMyUI.com. Having established demographic constraints (people who are 18 to 34 years old and live in the US and Canada), we created and send a series of tasks, such as:

Where you can find dog-friendly parks and hiking trails? Find directions and create a route.
How can you track your dog’s activity? Start tracking Walking activity for Tyson. Also, take a look at the activity analytics and check the daily goal of Walking.
Go to your list of reminders and add a new task for Tyson (Bathing, weekly). Then find this task in your list of reminders and delete it.

The results of the conducted user testing showed that sometimes the Activity Analysis icon was misunderstood and perceived more as a Share icon. Also, people faced trouble discovering the Done button at the end of the Create Task process. These pieces of feedback signify that the iconography of the app as well the position of some UI elements should be reconsidered.

During the user testing, it was great to see that people enjoyed the ease of use of the Park Finder as well as to discover that one of the users had a similar product idea in mind. People also shared their thoughts on how the app could improve and suggested to include a networking feature that would allow pet owners to get together in dog-friendly places.

Learnings & Outcomes

The project was full of inspiration and gave lots of opportunities to practice and strengthen our expertise in UX/UI design, branding, and motion graphics.

The most challenging part was to identify the target audience of the product. The guerrilla user research showed that understanding of human psychology is a crucial part of UX design, since it underlines the whole process of creation of a new app, from designing triggers that would motivate to use the app to developing micro interactions that bring emotional value. Another challenge was connected with UX design of forms, in which we had to decide on the most user-friendly input controls for each of the questions. In the result, we had well-structured forms that contained the most appropriate input fields, including dropdowns, check boxes, date pickers, and radio buttons.

The most enjoyable part of the project was to discover and apply the best UI practices and to experiment with them, combining already existing patterns with our own ideas and changing them according to our context.

BOW WOW