The Pet GPS and Cam app

I’ve given myself the challenge of completing three design challenges as quickly as possible. This is the first: a pet monitoring app with some Snapchat-style fun. (update: the second app can be found here.)

I’m talking about the Internet-of-Pets + GoPro live feeds + a killer app. Add to that a VR option? Oh yes. Warging Is Coming.

“He can enter the minds of animals and see through their eyes.”―Mance Rayder

I’ve been watching the pet-collar-with-GPS market for about five years. The collars are getting smaller and lighter. The batteries still suck. But we will surely reach a point soon ‘wearables’ meet pet collars. Where accurate GPS and streaming HD video lives inside a comfortable device that our birds, dogs and cats wouldn’t even notice was different to their dumb, last-century collar.

As I said, I‘m challenging myself to design three android apps that excite me. This is the first. Below is the slightly melodramatic brief:

Welcome to this secret design briefing! We’ve managed to assemble a Justice League-style team of GoPro, Geolocation and pet collar product designers. They have produced a lightweight, durable smart-collar that broadcasts location and HD video on demand. Design a mobile app that will allow pet owners to experience the lives of their beloved beasts and change the way that humanity empathises with the animal kingdom.

Here’s my process to conduct this design challenge. I’ve tried to show my thinking at each step.

Research

Scribbled thoughts and musings

I penned a few initial caffeine-infused thoughts, breaking down a rough idea of how the app might work. I like to do this before other solutions enter the picture and start influencing me.

A rough journey explores how I expect the key actions to work. I decided to go through onboarding first, then a typical check-in to view a pet’s day of activities. A basic emotion map allows me to see where the struggle might be and where a bit of charisma and delight might smooth the rough edges.

Now it was time to look at the current market and uncover some real needs.

Revealing the needs

So everything I had scribbled down was a big assumption. Now I needed to get to the heart of situation. What was this expensive collar-thing actually solving and what are the root needs that the community might have?

Quick research into pet-tracking apps revealed the following core needs:

  • Peace of mind — knowing that your escape artist dog or far-roaming cat is safe and happy whenever the itch to know occurs. This includes accuracy of the map, a speedy feedback loop between broadcaster and receiver — and plenty of opportunity to recharge the collar before it becomes an issue.
“Its so comforting to know where my pets are.” — Tractive app reviewer
  • Curiosity — what does my pet get up to all day? This seemed to be much less of a priority, but this could be due to the seemingly poor tracking accuracy. Certainly the the pet MUST be safe before you can enjoy more information.

I also looked at some action-camera apps of the GoPro variety. The needs here were:

  • Action! — Action-camera people are energy-charged doers. They don’t want to login every time and they find setup of devices/pairing extremely tedious. Any unnecessary steps make them mad as hell.
  • Capture the moment — there is simply no time to waste with getting things ready. The moment could be over. Capturing live video must be crazy-fast and crazy-simple.

A third group to consider were the Periscopes and other live-video-broadcasting apps.

  • Share the experience — but only with people you care about. The reason SnapChat is so popular is that it is essentially private and intimate. Reading many of the reviews, people want to share their experiences, but not in a Twitter-like environment. For every show-pony-wannabe-celebrity who wants random strangers to ‘subscribe’ there seems to be many others who wish to quietly, safely share their world with people that they trust.

Meet the needs

Based on the needs research above I came up with the app’s core philosophy:

Curiosity saves the cat.

Basically — this will be a fun, cool exciting app that changes the way that humanity empathises with the animal kingdom — but more importantly — your fun will not be at the animal’s expense. In fact, it will keep them even more safe via constant monitoring.

We will achieve this via two core principles:

  1. Speedy check-ins — Quick and easy access to tracking information, dispelling safety concerns as quickly as possible allowing for…
  2. Amazing insights — develop a better affinity with your pet through activity data logs, real-time POV video and interactive maps.

Armed with a bit more info, I revisit my key flow, the pet owner’s check-in and rewrite it. I decided to shelve the onboarding and setup, as this would require a much better understanding of the technology requirements and was out of scope for this design challenge.

I tend to think in user journey’s first, then design to that scenario. Here I’ve come up with a persona Maria and her three pets.

Mind-blowing illustrations are used alongside a 12-step user journey.

Sketches and wireframes

By this point I had a fair idea of how the UI might look. I wanted each pet to be accessible easily from any screen with a swipe left or right. I followed Maria’s journey, from notification, recording and finally checking her other pets. I also made a larger sketch of the main insights screen.

As I sketched I thought about the gestures and interactions. For example, when viewing the cam, a touch would bring up the controls and battery indicator, another tap to start recording.

Maria takes a break at work and is transported to the woods by her home.

A tray of icons at the bottom of the screen would mean easy access to the insights, map and cam sections. A social/share area (to be better expanded on later — probably like a snapchat friends list) and a more section to house account and user settings, preferences, etc.

After a few paper iterations, this was the final user flow:

To keep the key functions onscreen, I opted for a bottom navigation. These areas are:

  • Activity — Pic of the day. Fun charts (updated regularly like snapchat filters). Activity feed of day’s events.
  • Location — Interactive map of the last 24hrs
  • Camera — Watch live feed. Record. Access gallery.
  • Friends — Pet and owners in your network
  • Menu — managing account and paired devices

I have opted for a 24 hour view of events. certainly a filter could be added for hour/day/3 days/week/month in the future.

Notifications are updating on safety first, entertainment second. They are always specific to each pet profile. So if you have six pets, you get six notifications. You can change your preferences as required.

Activity and Location screens allows Maria (user) to learn a little bit about her pets’ day. Maybe she’s got a stack of files on her desk and she’s staring out into a grey raining day wondering her her babies are inside dry and happy.

The camera/live feed button is prominent on both the Activity and Location screens so that Maria can dive into her chosen pet’s world whenever she feels the need. Maybe it’s worry. Maybe its just for fun. Either way, it is never difficult.

Accessing the camera via the tray icon takes you to a split screen view. While the feed connects, you can see your gallery.

Checking-in

Let’s assume the app has been a worldwide success and the shine has worn off a little. A daily notification or two will most likely be the primary entry point into the app.

Maria will either glance at the status update automatically and get on with her day, or, if the update is of interest, tap for more information. It could included a snap from the collar.

The notification always corresponds to a single pet. Interacting with notification will take you to that pet’s Activity page. There Maria can flick through a few auto-generated snaps. If she doesn’t save them (by tapping the heart icon) they won’t be there tomorrow.

After reviewing the always new and interesting charts section, Maria might scroll through a few events in her pets daily routine. Curious as to the whereabouts of her cat Kim, she then taps over to Location and sees the squiggle of her movement and the bright dot, all very familiar Google Mapsy.

Viewing / recording

Of course checking statuses, charts and looking at maps is one thing. The real magic is teleporting into your pet’s world. Maria sees that Kim is in the woods behind her house so she decides to dive in and have a look.

She taps the tray icon because that gives her a glance of the day’s pictures while the feed connects. She scrolls through a few. Any she taps will appear full screen with the like and share icon. She then returns to the feed. It’s ready!

A branch appears onscreen and some waving leaves. Maria taps to make the image full screen. An overlay tells her how much battery and recording time she has left on Kim’s collar.

Knowing her cat well, Maria thinks Kim is hunting for something. She excitedly calls her coworker over to take a look. She taps the video, bringing up the overlay and long-presses the camera to start recording.

A red dot in the corner tells her that she is recording. Kim catches a bird! The whole office comes over to watch. The bird gets away. Maria taps the screen to bring up the overlay again and stops the recording.

A dialogue pops up with possible options. Maria has a YouTube channel just for her pets and chooses that option. After a recording the app returns to the camera/gallery view with the feed still running.

Maria puts her phone in her pocket, ending the feed. That was a good one!

Activity is the key screen. Let’s look at it in more detail.

Firstly, a daily picture captures your attention (you can choose how many photos each collar takes in the Menu/Settings area). These daily photos can be easily swiped through, saved and shared.

The name of the pet and status are clearly visible at all times, making sure that safety needs are met.

The camera icon is also handy, though I opted for it to stay locked in position so as not to obscure the insights below.

The idea I had for the charts were along the lines of what SnapChat does with their regularly changing filters. Keep the popular ones and A/B test new ones. Along with the daily pictures, this should make the app worth coming back to, even if you know your animals are safe. In terms of charts, I’m thinking of showing how your pet fare’s against others in their category/location.

Do you own the laziest Tonkinese in the Southern Hemisphere? Nope, but he is the 246nd out of 13,675 in our database! Pretty lazy!

Underneath is the activity feed. The most recent events are on top and you could theoretically scroll forever back to when you first got the collar.

Next to events such as left the house and slept for 3 hours would be an image (depending on preferences). If you have opted for less images, we just show an cute icon that represents the event type.

For those really wanting the details, this is where you go. You could also zoom into the various points of the map on the Location screen to get the same information in a popover.

High fidelity

A visual of your furry friend’s pet adventures.

I opted for a muted green and orange palette to give a little personality, direct the importance in the visual hierarchy but at the same time keep everything clean and utilitarian.

The map screen is a great way to get an idea of where your pet has been.

On load we get a centred map of recent activity, some controls and a peak above-the-fold of the most recent event, which doubles as the current status of the pet.

The video/warging button is prominent and has the highest visual hierarchy, always one tap away and above-the-fold.

Just a heads up before recording.

More on the map functionality below.

A quick modal before jumping into the live collar cam. Simple and easily dismissed.

As battery and recording time may be severely limited, even in the near future, I opted to have a modal that requires an interaction, rather than a 5 second load screen.

If usability testing proves it to be irritating and too much of an obstacle, it could be brought back a to a simple loading/ tap-to-see overlay.

The recording screen is very simple, with a Snapchat style tap for photos and hold for recording.

Signal and audio icons are easy to get to. This could be expanded to video-quality options, slow-mo, etc.

The main activity screen. Scroll left/right for your other pets.

The main activity screen starts with a gorgeous collar photo. (“Always take a photo when climbing is detected” being an app default).

The main picture I took myself. I had thought about adding some little furry feet to the bottom but decided it might be a waste of precious design time.

The little chart delighters are more fully realised with some sleep information and a culture-match tile. Imagine a Facebook quiz for your cat, but that uses our clever monitoring data to provide the answer with no effort on the user’s part.

The chart menu could allow users to say “More of this” “Less of this” to improve our offerings.

Additional charts may exist by scrolling to the left. However there might be a lack of affordance here, so I may need to redesign for that, allowing the third chart to peek out from the right.

The activity feed itself is a bit stock-photoey (I used Craft’s content manager to add some home/nature photos).

We can see a different example of some events. I created the icons myself in illustrator, following material design specs. Believe me, I googled “material icon cat” but didn’t find anything suitable. They could use more work, but hey, its a start. I’m particularly proud of the washing one.

We see the key information: location, activity-type, distance, time and duration of event.

A long-press could bring up the same more menu from the Maps screen.

In all I like where the app is going. My next steps would be to show a warning mode for the Activity and Location screens, to showcase what happens when the app thinks one of your pet’s are in danger or something abnormal has happened.

I’d also like to show what dogs and birds might look like and some animated gifs of the key interactions (I use a Sketch-Principle combo for that) to see scrolling and flicking between pets.

I also which I had had more time to create an Invision prototype of the main flows.

But it is time to move on to the next one!

Beyond MVP

So, I feel that I have captured most of the core functionality required in the time-frame that I gave myself. There is plenty more I would tweak, and some glaring errors I’d like to revise, but sometimes its better to deliver often and learn than get bogged down with refinement with zero user input.

IMHO, the ultimate, ultimate experience would be leave your dreary office or rumbling bus seat and awake in the wild surroundings of your furry friend in the most immersive experience possible. I felt like the GPS/Cam/Fitbit combo was pushing it, without adding a VR camera to the mix. But we can dream.

I would predict this is where the app would be going, if it could delight people early-on and cleverly manage the on-boarding of the supporting technology.

Perhaps in 2025 we might have a tiny 4k collar for an bird. Who knows, maybe the app could bring back the medieval sport of falconry…

Thanks so much for reading and please share your feedback, either on my process or on the app idea (or anything you like really).


The Brandon Stark experience, but with your cat, Mr Fluffy.

(See my next app project— the ultimate chatbot app.)