Published March 9, 2016
Web/Mobile Prototype: Wag ‘n’ Purr
I designed a mobile app showing two features taken from a design spec for Wag-n-Purr, an app that aims to inform, motivate, and empower users in interacting with their pets.
Because I have a cat, I wanted to explore how the app could enhance cat ownership through activity suggestions and rating. I chose to focus on two key features, motivation and learning.
To motivate pet owners to interact with their pets, two activities at a time are suggested to the owner. I added icons to make the activities more eye-catching and the option to refresh if the user would like to see more. After beginning an activity, a built-in timer makes it easy for pet owners to track the duration. A progress tracker provides an incentive for users to meet their goals.
The learning component involves a rating system for activities that helps create a balance between enjoyable and healthy. To communicate this to users without being redundant in repeated interactions, I created small tooltips explaining why activities are suggested and how the rating system works. A simple rating screen after an activity is completed makes it easy for the user to evaluate activities.
In addition to the mobile app, I designed a version for desktop to display information collected by the app. Because the desktop visualization presents complex information, I made the layout consistent and used a simple navigation. Overviews for day, week, month, and “all time” allow the user to easily switch between views with the option to move forward or backward in time.
The color coded line graphs allow the user to see their progress vs. the goals they’ve set at a glance. I designed the graphs to be interactive so that the user could compare or isolate different sets of data depending on what they want to view. When a user hovers over a point in the graph, an overlay appears with more information.
While the visualizations for broader spans of time involve line graphs, the “day” view emphasizes goals. Goals and progress for each activity category are listed as well as a list of all activities completed that day.
I used InVision to build my prototype because it is easy to manage many different screens and allows seamless linking between them. This allowed me to focus on layout and interactions.
For the mobile prototype, I made my screens in Illustrator because it allowed me to quickly draw shapes and shade them with different gradations of gray. I added these screens to InVision, linked them together, and then added the tooltip overlays.
For the desktop prototype, I used Photoshop so I could work on a grid I had previously made. I saved several images showing graph layers turned on and off to simulate interactive graphs. I then imported these images to InVision and linked them together.
Mobile interactive prototype: https://invis.io/825VRFY4U
Desktop interactive prototype: https://invis.io/435VRG98B