FORMLABS

Wash & Cure UI

April 2017
Overview

The Form Wash and Cure are accesories for Formlabs 3D Printers. They automate the process of washing and UV curing 3D-printed parts. With the launch of these machines, we needed an interface for post-processing settings on both machines, which were outfitted with an 8-bit LED Interface and a clickwheel.
Responsibilities

- User Experience
- Design Strategy
- Visual Design
- Motion Design




Process

The products needed a simple interface that allows the user to set the time and temperature of the machine, somewhat like a toaster oven. The interesting part was that the product was spec'd with an 8-bit LCD display and a round, clickable knob, which presented an interesting interface challenge. Although both machines had different purposes, their core UX requirements were almost identical.

Requirements
  • Easily be able to select time, temperature and core functionality such as aborting and resuming a cycle
  • Make the user aware of the hardware's capabilities and movements, such as how the Form Wash raises up when finished

We started off by looking at other devices which had similar hardware constraints and observed how they handle user flows (especially the back button) and typography (bitmap typeface design)



We then created user flows for both machines, and began looking at the pros and cons of having depth in the menu. The key features needed in both the Wash and Cure units were starting, pausing, and time selection. The Cure unit also required the user to set a curing temperature. Formlabs offered over 12 materials at the time, and these settings would be different for each material.



 

The horizontal nature of the UI meant that we could consider a side-scrolling menu, which would allow each word to be bigger and thus more legible from the user’s height.
There was a trade-off between showing multiple surrounding settings (e.g. showing the previously declared time while setting the temperature, or explicitly showing a back button in the time/temperature selection menu).
The largest menu was four items long, which meant that we could potentially squeeze all four items above the 64 px fold. This presented a legibility challenge, but after some user tests and typography refinement, we were able to arrive at a clear and legible design.





User Testing


We also made a few interactive prototypes for our testers to better understand the way they would be navigating the different flows. We tested navigation depth, user onboarding, and notifications.


Typography


Ensuring that every character looked good on our screen was challenging. We modified the typeface to make it more legible.

Notice the badly aliased 0 and 1.




Typography Testing



Animations


Animations were used as a way of notifying the user about machine events.

Preheating

Opening

Wash/Cure Done


Final Flow

After a few rounds of user testing, we decided to implement a standard vertical menu selector (potentially with icons), with a white outline over the selected row. Clicking once into any option would trigger a hardware action or a selector page. This mitigated the need for any sort of back button on the entire UI, as all UI actions had been localized to one flat menu.



Final Screens

Here are some of the screens that we shipped.

Timer Screen


Selector Screen





Cure Start Screen




Mark

Wash & Cure

UI for post-processing machines on an 8-bit LCD display

Site Navigation

Redesigning the navigation for a rapidly growing website

Form Cell

Designing a print management system for a fleet of 3D printers

Sample Request

Increasing conversions by redesigning a key webpage

The Digital Factory

Web design and branding for an annual 3D printing conference

Other Work

A brief overview of other projects