A Paper Prototype: Wearable UI

Alex Gilbert
4 min readJan 16, 2018

--

Fair warning — I can’t draw.

Me trying to draw a horse, 2018. (colorised) This is actually a picture from Google but I think it’s an accurate representation of my artistic ability.

In this post, I’ll be writing up my process for creating a paper prototype of a wearable UI as part of an assignment for HCDE 451, UX Prototyping. I think it’s important to preface this with the fact that I am absolutely not a designer — I’m pursuing a career in software engineering post-graduation. I mention this, not to disparage this assignment, class, or field in any way, but to excuse my terrible visual design skills (and so that if I start thinking like an engineer with a lack of imagination in regards to technical limitations, you can feel free to call me out on it). As an engineer, my goal is to build software that works — but if it doesn’t work for people, it doesn’t work at all. I greatly value the UCD process and am actively trying to incorporate it into each of my projects, so I’m very excited to visit the prototyping step in more detail with this class. This blog will be used to record my progress for each of the assignments in this class, but who knows? I may end up posting other things here too.

I digress. Let’s begin!

Requirements

Your team is given the challenge of a system that combines a smart watch and a smart phone, and asked to develop a product concept that involves synchronization of data between the two smart devices.

Design

Given that the only real requirement was the synchronization of data between a watch and a phone, I had the opportunity to think about any problem I wanted to solve. I decided to solve a problem for the stakeholder nearest and dearest to my heart — me, of course! Empathy be damned. (Just kidding, the idea was something that I had actually been thinking about for a while and so I decided to take a stab at it.)

Google Maps does a lot of great things, but it doesn’t make it easy for runners to plan a route. Sure, you can enter an address and see the distance from your location to the target location, but running isn’t really about the destination. My idea would let runners draw a route on top of a map, which would allow runners to plan their run distance and choose the path they’d like to take (along the coast? Can do! Or maybe deep into the city?). The app would reconcile the drawn path to the closest possible route (including all available trails and sidewalks) and beam the information to the runner’s watch so that he or she can track their run progress while being given directions.

Prototype

Main map screen (with menu expanded)
Main map screen (sans menu)
After selecting the edit route (pencil) icon
A user-drawn route is created with the send-to-watch option highlighted.
Watch faces
More watch faces with directions
Watch face for the end of the run

User Demo

Brief snippets can be found here:

Analysis

It wasn’t immediately clear to the user that they could draw the route, as most guidance apps don’t have that sort of functionality. (It probably doesn’t help that the app looks like Apple Maps.) Unfortunately, the drawing feature is probably one of the — if not the — most important features to the app’s functionality. To combat this, I added a popup instructing the user to draw their desired route that will only appear the first time the user requests a route. It’s more of a bandage rather than a fix, so if I were to expand on this idea, this issue would be on the top of my list of things to tackle first.

The other major flaw was the watch interface. After starting navigation, the user did not realize they could swipe left or right to view the preceding or following directions. While not absolutely necessary, as the directions will update based on location, it’s a feature that I think users would find handy (and the user agreed when I asked about it later). I added the arrows to indicate that there are other steps that can be viewed, but further user testing is required to make sure that this would actually work.

When I explained the idea and the intended usage of the app, I received positive feedback, but the actual design left a lot to be desired. That’s where I know this class will come in handy — I’m working on improving my design chops, so what better way to evaluate my designs than through prototyping?

--

--