Paper prototyping for a wearable UI

As a frequent driver, I really appreciate that my car is advanced enough to show me the realtime driving information on a screen, and to alert me when I am exceeding the speed limit I set. However I do not think this function is available on every car in the current market. The app I designed for this wearable technology is basically porting this functionality to the device. I have used an iPhone app called Waze, which displays crowdsourcing data such as traffic, obstacles on the road, cars on the shoulder, and cops locations on a map. I think integrating its data, specifically the cops’ location data to my app will be appreciated by many drivers.

Initial Sketches/Ideas

Initial sketch of different pages

Main page

The main interface is inspired by the dashboard display on Audi vehicles. This summary is behind the steering wheel, and it shows the current speed and the name of current road. I added the direction the car is facing and the current city to the display to utilize the space.

Menu page

Menu page is triggered by clicking the “More” button on the main interface, it contains settings, stats, and about page.

Settings page

Settings page allows user to customize the speed limit, and choose whether to be alerted when there are cops nearby. Two designs of setting the value are discussed and the one on the right were chosen because for its simplicity.

Statistics page

This page shows the users their daily, weekly, or monthly driving speed summaries in line chart graphs. It also shows the average as a red reference line.

About page

Just an about page.

Functionalities

The watch will vibrate when the user is speeding or when the cops are nearby. The app also provides line graphs showing summaries of users’ daily, weekly, or monthly driving speed.

Paper prototype

A watch?

The shell

The design of the wearable is based on Apple Watch, which is square shaped. I know, it’s kind of hideous (and it’s not 18-karat gold).

The paper prototype of different pages, a roll.

The yolk

Different pages of the prototype are hand drawn. They are stapled together to form a ring, which helps navigating within the application.

The egg, overall

A video showing the basic interactions within the app.

Testing

Process

One user was involved in this usability testing session. He is a junior UW student, and a driver.

What went wrong

Common hamburger icon that represents menu.

The user initially spend longer time to figure our what does the “More” on the top right corner mean. I am considering about a better label for that button, or even an icon. Other than that, he felt comfortable navigating through the application.

Feedback

It’s a pretty useful app, but still has space for improvements. I can definitely see that many drivers will appreciate the statistics this app provides. For improvements, it would be better if the user can change the measurement from mph to km/h, and customize the notification type (vibration type, sound).

Future work

Another great feedback I got from the peer review suggested that instead of using the hierarchical app architecture, it would be better to fully utilize gestures (swipes) and the input device of the watch (digital crown). The application can be modified into a fully page-based structure for a simpler navigation.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.