Image showing close up of viscometer screen during device testing

Touch Screen Viscometer Interface Design

Role: Interface designer. Developed requirements document, wireframes, rules, and style guide.

Work completed as an employee of BCA.

Our client wanted to update a line of very successful viscometers which had been designed over ten years ago. The existing bench top device had a simple two-line display and membrane keypad. They were ready to introduce a touch screen as part of an effort to completely rethink how customers get their work done.

The device was launched in April 2013 after a successful introduction at regulatory agencies and research institutions.

Storyboards

The process began by analyzing the device requirements in order to organize functions into a menu structure that is the basis for the storyboards. The design consisted of over 200 screens divided into 19 sections. Pictured below is the flow for the test results viscosity screens. The overall flow between the screens partially detailed in the storyboard with additional information in the specification document.

Storyboard diagram showing the viscosity test results screens

Working Sketches

Through out the process, quick sketches were used to help make decisions regarding the flow of tasks.

Below is a single drawing with sticky note drop downs and keypad used to demonstrate the behavior of the screen.

Quick prototyping through hand sketching. Paper prototyping showing drop down menu. Paper prototype showing data entry method.

Selected Screen Captures

The graphic elements were designed to be clean, emphasize ease of use, and accentuate the hierarchy of the design. The viscometer runs on a custom event and screen manager that did not include a color palette. The process of designing the graphics included defining a color palette of less than 250 colors that were available for creating all the gradients and graphics.

Storyboard diagram showing the viscosity test results screens Viscometer Screen Capture-Admin Menu Viscometer Screen Capture-Configuring Viscosity Test Storyboard diagram showing the viscosity test results screens Storyboard diagram showing the viscosity test results screens Storyboard diagram showing the viscosity test results screens