Device Connection Wizard

A portable label printer and connected smartphone app sit on a work cart while a technician applies labels to a cable.

New Product Development

This project is part of a larger portable printer and mobile app epic.

(2 months)

Situation

A new product included a portable printer and a smartphone app that were being developed in parallel. Functionally, they would connect using Bluetooth or Wi-Fi. An extremely compressed timeline meant that neither the printer nor the app would be available for testing with each other until the the very end of the development period.

Task

Design a first-run app setup and printer connection wizard. The technology requires that the user performs steps on both devices as part of the connection process.

Action

I began by designing the experience on the mobile app. This wizard experience happens every time a new device is added. The user is guided through the steps needed on both devices. Once connected, a printer icon appears in the top bar of the app. Tapping it opens a side drawer that provides realtime information about the printer, including the type of label tape, printing ribbon, and battery charge. Similar to printing from desktop programs, this drawer also provided printing options and a print preview.

First step in a connection wizard screen for concept portable printer, showing options for Bluetooth, WiFi, and some directions instructing the user to their the printer on and enable Bluetooth by navigating to Settings, Connection, Bluetooth, On.
A step of the printer connection wizard.
A concept printer status sheet, including the printer name, label supply number, dimensions, color, and amount remaining, ribbon supply number, dimensions, color, and amount remaining, battery charge level, as well as a few print option controls and a large Print button.
Tapping on the printer icon reveals a detailed status of the device and some simple printing controls.

I also designed the counterpart steps needed on the printer touch screen. But because a working printer didn’t exist yet, I needed an alternative. For testing purposes, I created a complex Axure prototype that simulated a smartphone and the printer together. The user could complete all of the steps on both the mobile app and the printer touch screen in a single experience. Finally, I used usertesting.com to validate the entire connection wizard from end to end.

Result

This simulator and its positive test results gave us the confidence to proceed with development, potentially averting a poor user experience. This wizard was so successful, that additional printer models were added in later releases.

Additionally, the graphics I created for the wizard were the most visually appealing parts of the mobile app and were used heavily in marketing collateral.

A complex simulation showing a smartphone and a portable label printer, each with their own functional UI prototypes nested inside.
Usability test that simulates communication between the mobile app and the printer firmware.