Portable Printer and Mobile App

Company

A leading manufacturer of industrial-strength labels also makes specialized printers and design software for their unique materials.

New Product Design

A portable label printer driven by a mobile app, used by field technicians such as network installers, electricians, plumbers, and so on.

Ask

Printers normally take 2-3 years to develop. However, this advanced system was promised for delivery in just 1 year. I was chosen to design the printer and its mobile app with lean resources in a “fail fast” environment.

When

December 2017-August 2018 (9 month project)

My Team

  • Person icon Global Product Manager
  • Person icon Product Owner
  • Selected person icon Lead product designer (me, 5 years of experience)
    • Person icon Designer
    • Person icon Industrial designer
    • Person icon Tech writer
  • Person icon Project manager
    • Person iconPerson iconPerson iconPerson icon Software developers
  • Person icon Project manager
    • Person iconPerson iconPerson iconPerson iconPerson iconPerson iconPerson iconPerson iconPerson iconPerson icon Quality assurance testers

Risks and Constraints

  • Solution is predetermined by a stakeholder.
  • Technology platforms are predetermined by a stakeholder.
  • Extremely compressed timeline.
  • Steep learning curve as no in-house talent has any previous experience with the technology platform.
  • Standalone handheld printers already exist. This product might not be solving the right problem.
  • Previous smartphone apps have not been very successful because they added little value to standalone handheld printers.
  • Previous research shows that older technicians do not like using smartphone apps.

Step 1 – Market Research

Several questions needed to be answered before product development could begin:

  • How do field technicians print labels in the field today?
  • Do field technicians use smartphones for their jobs?
  • Do field technicians share files with their smartphones?
  • If so, how do they share files (email, cloud storage, etc)?
  • Would field technicians be interested in ways to reprint existing labels from a file?
  • Would field technicians be interested in ways to print new labels directly from a blueprint?
  • Do field technicians understand how to connect devices to their smartphones?
  • If so, which connection method is preferred (USB, WiFi, Bluetooth)?
  • Would field technicians be interested in a portable printer?
  • Would field technicians be interested in a wearable printer?
  • Would field technicians be interested in a printer that could be used from atop a ladder?
  • Do field technicians think our concept of a portable printer is at the right price point?
Seven electricians in a focus group sit around a conference room table.
A focus group of electricians compares experiences with labeling wires on the job site.

Research Preparation

(1 month)

My industrial designer and engineering teams made rough mockups of the concept printer and accessories.

Meanwhile, I began by creating several illustrations as conversation aids, as well as a few high level conceptual user flow sketches.

A rough industrial design sketch of a concept portable printer.
Early device concept by industrial designer on my team

I attempted to understand what the typical user flow is like.

I attempted to gauge level of understanding of Bluetooth, and if it was preferred.

I attempted to gauge level of understanding of sharing files across devices.

I attempted to gauge interest in the concept of a printer and mobile app solution.

I attempted to understand the ideal way of printing labels in the field, if such a concept were real.

I showed illustrations and mockups of printer accessories, including wearable gear.

Focus Groups

2 days, 16 participants

I guided conversations around label printing using the illustrations above.

I also showed physical mockups of printer and wearable accessories.

An electrician examines a concept portable printer mockup to see how it might fit into a belt holster.
Examining the rough device mockup
And electrician tries on a bandolier designed to hold a concept portable printer.
Trying on the wearable device accessories

Major findings

  • Almost all use a smartphone for work.
  • Proposed solution is at the appropriate price point.
  • Printing is usually not done in the field, but might be preferred.
  • Good understanding of Bluetooth, and it is preferred.
  • Strong interest in the ability to share label designs with coworkers, using all methods.
  • A solution that could interact with their project plan software seemed far-fetched, or magical.
  • Concern that the proposed solution requires 2 devices that are battery powered, where a failure in either would leave the user without the ability to print.
  • Strong desire in a printer powered by readily-available alkaline batteries to avoid recharging in the field.
  • No interest in a touch screen unless it allowed the printer to operate standalone (without a mobile app).
  • No interest in a wearable printer.

Step 2 – Project Strategy

Stakeholder System Requirements

  • Must have significantly more capabilities and a better user experience than any standalone handheld printer on the market.
  • Must take advantage of smartphone platform, including pinch-zooming.
  • Must support dozens of languages.
  • Must be fully compatible with legacy files from desktop software.
  • Must include a touch screen (against market research).
  • Must include a non-replaceable battery (against market research).
  • Must include wearable accessories (against market research).

My Tactical Decisions

  • I introduced a design system that could be used across all tech platforms. (Material)
  • I limited the mobile app requirement to smaller displays (smartphones). Larger displays (tablets) were supported, but not optimized.
  • I used metrics to make the case for Bluetooth support as the primary connection method, despite the need for a more expensive chip set to meet Apple certification standards.
  • Engineering risk was greatly reduced by re-using the printing chassis from an existing handheld model.

Solving a Legacy Problem

(1 week)

All legacy printers were unclear about how the label on the screen was oriented compared to the label that would exit the printer. Users would often get undesirable results.

A poorly designed interface of an old printer can leave the user unsure if the printed label will be small and across the label tape, or very large and along a length of the label tape.

I solved this by creating a visual language to describe the orientation of any shape, size, or type of label supply right in the editor.

Both fixed-length labels and variable-length labels are shown with the example text "The quick brown fox jumped over". Solid lines indicate the fixed edges of the label supply tape. Dashed lines indicate the cut ends of the label supply tape. Gray margins indicate the liner or otherwise unprintable areas of the label supply tape. A shaped edge indicates the continuous end of the label supply tape.

Step 3 – Designing a Basic Editor

(1 month)

High-Risk Items

These features had never been created on a mobile app, previously.

  • A way to open existing label files (designed on a desktop program).
  • A way to print frequently-used labels without designing them from scratch.
  • A way to design labels with manually entered text.
  • A way to design and view multiple labels in a set.
    • Labels with generated sequences of numbers
    • Labels with imported data
An early industrial design sketch of a concept portable printer.
Early industrial design that reused some components of a previous model
High level user flow diagram of a label editing app, showing a series of steps beginning with the app launch and ending with printing.
Early, high-level user flow diagram for the mobile app.

Axure was used to create a functional prototype that accepted custom user input. The printer itself was yellow, so I designed the UI to match.

A label editor concept, showing a menu of possible objects that might be inserted into the design, including text, optical code, symbol, image, date time, shape, and frame.
Palette of options for label content.
A label editor concept, showing the sample word TEXT on a label. A few controls along the bottom of the screen look like they are meant to add more objects or format the selected one.
Basic editor with a sample text object.

Usability Testing Results

  • Add Object menu was well-understood by all participants.
  • Zoom controls were somewhat unclear.
  • Text formatting and bounding box icons were not understood.

Step 4 – Designing Navigation Between Files & Features

(1 month)

Automation vs Manual

Before designing content, the user would need to select their type of label supply. Some of this could be automated thanks to communication with the printer. But other options would need user intervention. I had to revise the user flow to account for this.

A colored industrial design sketch of a concept portable label printer.
Further revised industrial design
High level user flow diagram of a label editing app, showing a series of steps beginning with the app launch and ending with printing.
Revised high-level user flow diagram, including the necessity for the user to choose their label supply.

Managing Multiples

This next round of design provided extra controls for viewing and managing multiple labels at once.

A label editor concept, showing multiple labels together on the same screen. It appears a user can scroll through all of the labels in the set, or use a large blue Plus button to add another label.
Multi-label view
A label editor concept, showing the word SAMPLE repeated twice on a label. A property sheet across the bottom has a few controls, one of which is a toggle switch titled Wire Marker.
Single-label view, showing a bottom property sheet.

I added a Home screen. I also made the Axure prototype more functional by adding a text entry field, formatting controls, and controls for sequence generators and imported spreadsheets.

Front screen of a label editor concept, showing a number of options for starting a new label, as well as a blank section that says "Anything you create or edit will appear here."
The front screen, providing several options for creating and printing labels.
A label editor concept, showing a label with the word SAMPLE repeated twice. Icons for a keyboard, a sequence, and a spreadsheet are shown across the top of the screen. A text entry field is shown across the middle followed by a blue checkmark. The bottom property sheet has tabs for Text and Paragraph that contain a number of formatting controls, such as bold, italic, underline, font, and so on.
Label editor, showing a text entry field as well as some formatting controls.

Usability Testing Results

  • Home screen’s Start New Label feature was well understood by most participants.
  • Menu to Print from a set of ready-made labels was not a popular feature.
  • Multiple label view was not comprehended.
  • Single label view editor had well-understood formatting controls.
  • Most participants had trouble navigating between object properties and text formatting controls.
  • Some participants had trouble understanding how to enter text because their virtual keyboard obscured the text entry field.
  • Most participants had trouble submitting text by using the blue checkmark.

Step 5 – Simplifying the Editor

(4 months)

New Look, Better Controls

I made several usability improvements:

  • Moved menus and text entry field to the top bar to prevent them from being obscured by the keyboard.
  • Improved zoom controls.
  • Added label supply information so users could see the size of their label at a glance.
  • Move printer controls to a right sidebar menu. When collapsed, this menu shows the connected printer status at a glance.
  • Added a new ribbon control across the bottom, allowing users to easily navigate through multiple labels within the same document.
  • Drew attention to the blue checkmark button by adding a pulsing blue halo.

The printer’s housing design had changed to a blue color, so I updated the UI to match.

A 3D model of the finished industrial design of a portable printer.
3D rendering of the final industrial design, showing the new blue color.
A label editor concept, showing a label with the word TEXT repeated twice. The filename and some control icons are shown across the top. The label supply number and dimensions are shown, followed by a green checkmark. The bottom of the screen has a ribbon of label thumbnails, one for every label in the set.
Multi-label view was replaced by a ribbon of thumbnails for easy navigation through the label set. Main controls were added to the top app bar. Affordances were also designed to show the label supply number, as well as the status of the printer (green checkmark).
A label editor concept, showing a label with the word TEXT repeated twice. Icons for a keyboard, a sequence, and a spreadsheet are shown across the top of the screen. A text entry field is shown next, followed by a blue checkmark with pulsing blue halo. The bottom property sheet has tabs for Text and Paragraph that contain a number of positioning controls, such as align to center, bring to front, send to back, rotate left, rotate right, and so on.
Text entry field was moved into a banner at the top, well out of the way of the keyboard. When they were done entering content, I tried to educate the user about tapping the blue checkmark by adding an animated, pulsing blue halo.

Usability Testing Results

  • Most participants were able to easily comprehend the components in the editor and use the majority of the formatting controls.
  • Most participants still had trouble exiting the text entry field. Clearly, the pulsing blue checkmark was the wrong approach.
  • Many participants still had trouble navigating between property sheets.

More Usability Improvements

  • Consolidated all property sheets into a bank of tabs, making them easier to find.
  • Covered the view with a scrim when the text field had focus. Tapping it would exit the text field, eliminating the need for the blue checkmark.
A label editor concept, showing a label with the word TEXT repeated twice. A Delete icon is shown at the top of the screen. The bottom property sheet has tabs for Text, Paragraph, and Object that contain a number of formatting controls, such as bold, italic, underline, font, and so on.
Users were having trouble understanding how to navigate between multiple property sheets, so they were consolidated, simplifying the user flow.
A label editor concept, showing a label with the word TEXT repeated twice, dimly visible behind a dark scrim. The smartphone keyboard fills the lower portion of the screen. Icons for a keyboard, a sequence, and a spreadsheet are shown across the top of the screen. A text entry field is shown next.
Users intuitively understood how to exit this text entry mode when the pulsing blue checkmark was removed and a modal scrim was added.

Usability Testing Results

  • All participants were able to navigate to all property sheets.
  • All participants intuitively understood how to use the scrim to exit the text field.
  • Formatting controls were well understood.
  • Sequence generator and spreadsheet import controls were well understood.
  • Saving, opening, and sharing files was well understood.
  • Again, the Home screen menu to Print from a set of ready-made labels was not a popular feature.

Step 6 – Designing the Printer Connection

(2 months)

App as a Remote Control

Usability improvements included:

  • A first-time printer connection wizard.
  • Moved the printer status to the top bar.
  • A right menu that included important printer status information, print options, a print preview, and the ability to select from a list of available printers.
  • Hid the multiple-label navigation ribbon from view by default, as users would typically only create one label at a time.
  • Removed the unused Print from a set of ready-made labels feature from the home screen and the app entirely.
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 label editor concept, showing a label with the word TEXT repeated twice. The filename is listed across the top, along with some control icons and a printer status icon that appears to have a connection animation beneath it. The supply number and dimension are shown next. Zoom controls and zoom factor rest at the bottom of the screen.
Animated printer status icon in the top bar showing that a connection is in progress. Also, the seldom-used label thumbnail ribbon is hidden by default.
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 status icon reveals a detailed property sheet and a few simple printing controls.
Front screen of a label editor app, showing several label types and a list of existing label files.
Simplified front screen design.

When these advanced prototypes ran on a smartphone web browser, they were a close approximation to the real mobile app. Some usability testers even temporarily forgot that they were interacting with a prototype.

Testing a Printer that Doesn’t Exist Yet

We needed a way to validate the process of pairing the mobile app with the printer. At the time, we only had working prototypes of the mobile app UI and the firmware UI, but none of the communication between them. Since the printer hardware had not been built yet, I created an advanced Axure protype that simulated the communication between the two systems.

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.

Usability Test Results

  • All participants were able to successfully run the connection wizard and pair the printer with the phone via Bluetooth.
  • Printer status was easily found by all users.
  • Print options were intuitive to most users.

Final Design

Device Testing

A portable label printer sitting on green grass.
Finally testing the REAL printer, 1 week before my deadline.

Just 1 week before my deadline, the functional printer finally became available to me. It had already passed QA testing, but I only got my hands on one as the project was wrapping up.

I ran a few guerrilla tests against coworkers out on the office lawn. Largely, the entire experience worked just as my team and I had engineered it.

Development Team Support

Designers were embedded within their respective development teams (software, firmware). We attended all project ceremonies, and were always available to provide immediate design clarification or provide additional work for developers or QA engineers.

  • Design documentation, including expected behavior and UI specs
  • Graphical assets, such as icons or illustrations used in the product
  • Terminology or copy used in the product
  • Rapid design revisions to overcome unforeseen technical challenges
  • Usability testing of the device using 3D printed mockups and early manufacturing prototypes
  • Creation of product quick start guide
  • Creation of marketing collateral, such as screenshots and promotional graphics for app stores

Additionally, I supervised and supported the tech writer who authored the device user manual and online help documentation.

A quick start guide for a portable label printer illustrates plugging the printer in, charging the battery, turning the printer on, loading the label supply, installing label design software, and connecting the printer to computer or smartphone.
Product quick start guide, designed to be understood without written instructions. This way, the same design can be used internationally.

Solo Work

Working at this speed for 9 months meant a lot of long hours, late nights, and working on weekends.

  • 6 major iterations
  • 221 minor iterations

Additional Leadership and Supervision

  • Developing a growing design team
  • Device industrial design
  • Device firmware design
  • Tech writer supervision
  • Graphic designer supervision

I was unwilling to compromise on a quality user experience, an accessible design, a scalable design system, usability testing, or an incomplete feature set.

Finished Product

A portable label printer and connected smartphone app sit on a work cart while a technician applies labels to a cable.
Smartphone app includes ability to open files from the cloud, design new files, and print wirelessly to the portable printer.

Results

This product was extremely successful, but not always for the reasons we imagined.

  • Half of all consumers never used the device as a portable printer with a mobile app. Instead, they enjoyed the printer’s affordable price and small footprint while connected to their desktop computer.
  • Those who did use the mobile apps found the interface to be the most intuitive and efficient design the company had ever produced. Many preferred to use the mobile apps instead of the desktop design software suite.
  • Customers felt misled about the device connectivity, because the Bluetooth option only worked with the mobile app I designed, and not universally with other devices such as desktop computers or 3rd party software.
  • Some customers asked for tablet optimization.
  • Predictably, the wearable accessories were not popular.

Immediate positive sales and industry accolades highlighted the overall success of the product in its first 6 months on the market.

Today, the best practices from this project are being used on other initiatives:

  • Design system is being adopted by all software and firmware, including the legacy desktop software suite.
  • Modular components are being considered for new device designs.
  • Mobile apps and firmware platforms have expanded to support:
    • New market segments beyond electricians, including pipe fitters and laboratory technicians.
    • More printer models and connection types.
EC&M Product of the Year 2019: Brady Printer M611 and Express Labels mobile app

What I Learned

  • How to adapt Axure to make advanced simulators and design system documentation.
  • How to create multi-sized icon assets using Sketch.
  • How to create Lottie animations using After Effects.
  • How to design for multi-device experiences.
  • How to manage a lean design team under pressure.