Bringing Modern Design Practices to Legacy Technology

Almost all of the work we do at Atomic is forward-facing. We design cutting-edge mobile applications, rethink software that defines businesses, and develop code that automates the way our cars, batteries, and trucks manage themselves.

Occasionally, we have to make software for legacy hardware. I recently finished designing for an embedded touch screen the size of the original Apple Watch. While the Apple Watch uses a capacitive screen (one that responds immediately when it comes in contact with something like a finger or droplets of water), the touch screen on this embedded device is resistive (only responding to pressure). Also, where the Apple Watch can leverage hundreds and thousands of colors, this embedded touch screen only allows 256 colors.

While this embedded touch screen is leveraging legacy technology, some of which has been around for over a decade, it is doing so to meet the needs of the product. Users need to be able to interact with it while wearing gloves, hence the resistive screen; and battery life is very important to users, hence the limits on color.

Old Technology, New Practices

When faced with legacy technology or touch screens, it’s easy for someone to think, “Why even try to make it look good?” However, I see legacy technology as an opportunity to apply modern design best practices in a more constrained environment.

For example, one of the things I’ve done when working on this resistive touchscreen is leverage modern touch target best practices. (For a refresh, read this post by Zac Dickerson.) This work has included making sure the tap area is large enough for someone to use while wearing gloves.

I’ve also brought in some of the visual design best practices from the Apple Watch. For example, even though the tap area (including padding) may be to spec on the Apple Watches, they keep their buttons a little shorter than the touch area to allow for more text content on the screen.

Another thing I’ve done is work to convert my client’s branding down to the 256 colors available with an 8-bit color system. Some colors may not match exactly. But by leveraging secondary and tertiary colors from the client’s marketing, I’ve been able to integrate the client’s brand into the product while still adhering to the available colors.

8-bit art by artist 豊井祐太(Toyoi Yuuta)

A Few Questions

If you ever need to design for legacy hardware, here are a few things you can ask yourself.

  • Are there modern design practices that I can apply?
  • Could we put effort into the visual design to meet our product’s goals? What do our buttons and switches look like?
  • Can we incorporate modern typefaces?
  • Can we find ways to include white space?
  • Can we find a way to incorporate modern icons?
  • Is there a way to incorporate the client’s brand while still meeting color and contrast constraints?
  • What are the ways that I can bring joy to my designs?

If you’ve worked with legacy technology, I’d love to hear about ways you’ve leveraged modern design practices.