pupsRus Smartwatch UX/UI Prototype

Task

The smartwatch and wearable tech market is an ever-expanding field, with Apple having more sales in their smartwatch then all of the high-end luxury watchmakers combined.

Please note, the pupsRus smartwatch app is an extension of the pupsRus Mobile app. I decided to further push the idea of event booking for pups to the wearables space. An app that is able to provide a user more functionality, and available on more of a variety of their devices would create a better user and customer experience.

The task was to create a smartwatch app, designed for the Apple Smartwatch, that would give the user timely notifications of their booked pup’s expected arrival. The countdown is from 20 minutes to arrival, on 5-minute increments. Many times, a pain point for an event booking is the uncertainty of arrival of the service. Therefore, it is imperative to have clear and legible designs that a user would only have to glance at and is easily understood while they are on their feet and have their attention divided elsewhere.

Other usages of the smartwatch app, includes extending the current playtime length for the pup’s visit and notifying the user of a previously booked or favorited pup’s availability and prompting to book a visit, directly on their smartwatch. Vocal utterances were designed to act as triggers for certain app events, to take advantage of voice recognition technology in Apple smartwatches and the Adobe XD software.

Though there are many smartwatch apps that would ask its user to switch to their mobile device to complete payment, I decided ask for a payment pin instead. I designed the pupsRus experience to keep the user on their watch, as to preserve a frictionless process. The less gadgets, steps, and friction the user has to go through to book, the higher the retention and click-through rate, which will create more bookings and a better user experience with the app.

Tools: Adobe Illustrator, Adobe XD, Figma

Sketches

Visual Portfolio, Posts & Image Gallery for WordPress

puprus-smartwatch-sketch1-min

puprus-sw-sketch1

puprus-sketch2

puprus-sketch2
puprus-sketch2

puprus-swsketch2

pupsrus-paper-prototypes

pupsrus-paper-prototypes
pupsrus-paper-prototypes

pupsrus-paper-prototypes

The original sketches were developed to show the user interfaces for: booking a pup, notifying of a pup’s availability, extending the current pup’s visit, and for countdown notifications to arrival. Feedback was received and reiterated sketches were created showing: the simplification of buttons, clearer hierarchy of information, enlargement of text/buttons for legibility and increased glanceability.

A paper mock-up of the Apple Smartwatch was used to give scale to the designs. Unlike mobile phones, smartwatch screens are uniformly small, on average only a few inches. Therefore, it was especially imperative to user test that the UIs would provide a clear and intuitive experience on the actual physical device’s screen size, and not just on a scaled-up sketch on paper.

The vocal utterances to be cooperated into the app’s functionality were also planned at this stage, with user feedback for different phrasing options for accomplishing the functional task. Adobe XD’s vocal utterance only allows for one specific phrase as the trigger, so I decided upon shorter and more succinct utterances.

Solution

A black background is the most common for smartwatch apps, as to preserve battery life. The color scheme of the smartwatch version pupsRus was modified from the mobile version of pupsRus, to be more inline with Apple’s Design System for their Apple Watches.

The use of solid, transparencies, and vibrant colors increases the glanceability and legibility of the app’s text and imagery. The iconography of the app strongly links to the ideas of puppies and their playful nature, through the use of the paw print animation, the raining dog bones animation, and the cartoonesque speech bubbles.

Gifs

Below are screen recordings of the run-throughs of the smartwatch App, with animations being shown.

Visual Portfolio, Posts & Image Gallery for WordPress

watch-pups-extend-visit1

watch-pups-book-visit1