Evolution of a design

Progress through the first few iterations of a design

The project was to make an interface that was more colorful and less clinical for a gene sequencer. The instrument was originally intended for a less scientific audience. Whereas the usual audience for these instruments are large universities and labs, this instrument was going to be marketed towards doctors, veterinarians, and other smaller, non-research oriented places.

Creating a streamlined and simple-to-follow interface for genetic testing was the primary task

The interface was to be a touch-screen, about the size of an iPad. Touch targets and legibility of information presented per screen also needed to be considered.

These prototypes were completely interactive, built from standard HTML5, CSS, and JavaScript. Having a working prototype greatly facilitated troubleshooting the workflow, finding pain points, and bridging the gap between hardware, software, and interface early in the process. When questions arose or pain points were identified, it allowed for quick changes early in the development process.

Marketing was still working on the final color palette when I was making these, so instead I used some of the standard company colors. While the final version doesn't use any of these colors, the basic workflow I designed and refined though extensive user testing is still there.

I decided to divide up the process, and have each screen represent a single task the user needed to accomplish before proceeding. Some screens required user input, and others were to show that the instrument was busy processing, calibrating, or sequencing.

I wanted a fluid interface that moved in from the right, and off to the left. Some steps could be completed while the instrument worked on other tasks. Using a two-paned layout was the answer, providing a way for the user to enter information and still see the instrument's progress.

Version 1

I started by introducing large fields of color, slowly fading from one to the next, and using white ghost buttons that morphed to a progress bar when clicked. This kept the interface very minimal, and still provided feedback to the user.

Version 2

Some people liked the full color backgrounds, but it was a little too different for others. This version uses a gray background with a simple graphic to convey energy and motion. Along the way, menus and layout were updated based on feedback.

Version 3

Ghost buttons on a gray background wasn't working for me, so I made the buttons solid and more button-like. Because some people really liked the color motion of the original version, I introduced a subtle color change to the wave graphic.

This version brings the two-pane idea to every screen. Since users may want a little help when first learning to use the instrument, the second pane could be left open with helpful hints and more details about each screen. Once the user gained proficiency on the instrument, they could hide the help panes for an even cleaner and streamlined experience.

Version 4

Because the prototype was built with HTML, CSS, and JS, it was very easy to try out different styles and colors without having to recode everything. This is the same workflow as Version 3, just with a different CSS stylesheet applied.

This process made it very quick and easy to test new ideas, and revisit older ideas, without having to recode the entire prototype.

In this case, people were split about 50/50 between the full color version, and the gray background version.

Version 5

The vote was taken, and they decided to go with the gray version. However, they wanted a different, more subtle background. I changed to a triangle pattern with some of the triangles changing color over time to provide some visual interest.

This version also brings in more completed help screens, some animated graphs, and refined layout tweaks.

Version 6

Some people were worried that a first time user might still need help getting started, so I took a cue from iOS apps and provided a quick help layover screen showing where the most important things were to get started: settings, help, and current step.

Dark Mode

While developing version 2, I also created a "dark mode" color scheme, and experimented with using a circular progress indicator instead of bars. This went over well, but ultimately was dropped due to development time constraints.

First-run instrument setup

Now that the final design had been settled on, we needed another prototype to visualize initial instrument set up. This movie shows the setup process, leading the user through initializing and testing the instrument before it's first run.

The following are examples of how certain screens in the workflow changed through 7 major iterations of the design.

Start screen and button types

Progress bar and loading screen

Cartridge loaded and information verification

Dark Mode screens from version 2

First-run instrument setup

The system and instrument setup software was designed to lead the novice user through all the setup steps, with additional contextual help available if needed.
For each user interaction that required additional hardware for the setup, there are small video segments showing the device and how to prepare and load the calibration hardware.
Different areas of the instrument are highlighted showing where calibration is occuring, with bars showing progress and completion.

Final prototype

Screen recording of each version


This presentation is still completely JavaScript free. Check out my CodeLab for details.