PetTime mobile application screens
- Design

Improving the UX design of PetTime

Head shot of TomBy Tom O’Malley

We are a team of animal lovers here in the Si studio, with a whole menagerie of pets between us, so we were really keen to get involved with a new project designed to help people who are out and about interact with their four legged friends at home.

PetTime is a wireless communication device that you can control with an app on your smartphone, tablet or laptop. The device allows you to speak to your pet, take photos and videos and reward them with low calorie treats. We were approached by PetTime to provide app design influenced by real user experience testing.

We became involved at an early stage of the project for PetTime. They wanted some quick, high-level user experience research carried out on the concept, without delving too deep. Fortunately, our User Experience Lab on site allows us to carry out UX tests quickly and easily.

The first step was to produce a low-fidelity prototype, which allowed several members of the team (who are all pet owners) to carry out tests in the UX Lab and provide feedback. We collated and organised the data from these assessments and presented the results to the client.

Even running some quick, high-level UX tests allowed us to highlight some of the areas where massive improvements could be made, backed up by real user experiences. These changes were then included in the broader UI redesign to the give the app a more user-friendly feel.

Following initial UX testing we used Photoshop and Invision to build an detailed prototype, basing the UI design on Google’s Material Design documents. Material Design is a series of guidelines that outline how applications should look and work on mobile devices. This extensive library offers guidance on a wide range of topics, including style, layout, animation and usability.

This made the designer/developer handover considerably smoother, and also essentially future-proofed the app. For example, if a developer needed to add a calendar picker to the app, they could simply refer to the MD site and drop the component into the design using predefined styles.

From the dashboard, the user can perform multiple actions with just a few taps. We wanted to make every feature reachable with less than three clicks/taps of the dashboard to ensure that no features were lost or hidden, and ultimately to make the app as easy to use as possible.

After performing in-house user tests, we streamlined the first time setup process by reducing the number of steps required before you get to the main dashboard screen. We did this by keeping the steps as simple as possible and not asking for any information that isn’t necessarily required, such as removing the duplicated “confirm your password” field. We replaced it with a single password section and an icon allowing you to see the password in plaintext to avoid mistakes. This may seem like a minor amendment, but that small change could potentially help prevent users from getting frustrated and quitting the app before even using it.

After we were happy with the improved design and UX, we presented the Invision mock-up to the PetTime developers, who were more than impressed. We transformed their ideas and rough sketches into a beautifully working prototype. We loved having the chance to work on such an interesting project and we wish the PetTime team all the best when they bring their product to market soon! Do you have a project you think we’d be interested in? Get in touch, we’d love to hear about it.

Get started

Plan your project