Sarah Fernquest — UX Designer based in Seattle, WA

Neato Botvac

Digital & Physical Interface Design

www.neatorobotics.com

A leading robot vacuum technology company wanted a refresh of the robot UI for the release of its first wifi enabled vacuum model.

DateJanuary 2015 ForSubstantial
RoleUX Design, Visual & UI Design, Production, Client Services

Project Context

Neato engaged Substantial to design a mobile application for its first wifi connected robotic vacuum model, the BotVac Connected. In conjunction with the app, the client wanted to improve user interaction on the tiny vacuum LCD screen, and update the screen interface design to be compatible with the design of the new application.

My Role

As design intern, I was also the sole designer on the project of updating the LCD screen interface. My role was to adapt the existing robot UI to improve usability and incorporate new features such as wi-fi setup capability, new cleaning modes, and updated branding. I worked closely with client stakeholders and developers throughout the process of ideation, design, and iteration.

After diagramming the existing user flow, I was able to identify and refine key pain points and create a streamlined user journey through the new features while retaining the simple and intuitive style of the existing flow. Care was taken throughout to ensure that the taxonomy and design aesthetic, while minimalist, would be consistent with the accompanying iphone app.

I created a new, more streamlined user flow (first page shown above).

The vacuum has two states called “Return to Base” and “Return to Start.” I explored different ways of indicating the distinction between the two similar but distinct states using visual iconography.

Because the device used a 1.8” low-resolution LCD screen, I tackled the challenge of designing for an extremely constrained space. From a production standpoint, assets had to be completely pixel perfect with zero room for error, or else their positioning on the screen would be skewed. I also created a custom icon set to be compatible with the design used in the iphone app, with some icons measuring as small as 8 pixels wide.

The screen size I designed for, relative to a quarter.

Neato wanted to add a “turbo” cleaning mode to its newest model, so I explored different iterations of the Turbo icon. The icon would have to work in two different sizes, including a small version at 8px wide (shown at right).

The high-quality screen is something that really stands out on the Botvac Connected. A few competitors have screens but so many are too dark, of low quality, or have only symbols. This one tells you what is going on in clear language.

A shot of the scheduling screen on the newly released model.

Neato’s first BotVac Connected model launched in late 2015 using the screen and mobile app designed by Substantial. It received resoundingly positive reviews from publications including Forbes, CNet, Wired.com, and more. While the original BotVac Connected is still widely available, subsequent models have eliminated the LCD screen interface entirely, leaving the mobile app as primary means of customizing device settings.