Design System Creation

A desktop computer uses label design software to create and print a warning label.

Design Ops

This project is part of a larger desktop software design epic.

(1 week)

Situation

The company had a design system for their printed catalogs and marketing websites, but none for their desktop software, mobile apps, or device firmware.

  • Brand colors were used instead of those with accessible contrasts for a UI.
  • Colors and iconography were inconsistent across all platforms.
  • Error handling was inconsistent across all platforms.
  • Controls often lacked states, making keyboard navigation impossible.

Task

Establish a cross-platform design system in 1 week.

Action

With such a short timeline, creating an entire design system from scratch was not feasible. Instead, I adopted the Material design system and themed it appropriately for the company. To assist developers working on the desktop software, I documented every state of every control using this design system. I also used Axure to create working examples of each control.

Result

The design system aligned the interfaces across all devices with screens. This included desktop software, mobile apps, and touch-screen device firmware. For the first time, a user could recognize the same iconography, colors, and navigation patterns on every platform.

A large comparison grid showing many types of controls and all of their possible states.
Comparison grid of software controls and all of their possible states, styled exactly for a desktop product.
Illustration of several kinds of controls, annotated with dimensions.
Specifications for spacing and background coloring between iconic buttons.