Design System for RealWear HMT-1
I spent most of 2018 working with the team at RealWear on a design system for the RealWear HMT-1. Apart from the design itself, there were a lot of learnings into organizational impact of the design system - a brief synopsis on that in my article on Medium.
What is a design system?
A design system is a set of guidelines, patterns, and components used to guide and produce experiences. Design systems can incorporate any and all interaction modalities. Design systems provide consistent experiences, reduce time to market and provide scalability without risking the quality of design. Design systems are in effect, the system engineering of design.
The best example of a well-known design system is Google's Material Design. We chose to leverage Material Design for a number of reasons when we created the system for the HMT-1.
About the Device
The RealWear HMT-1 is a head-mounted wearable device that operates through a 'Say What You See' primary interaction modality. The usage is for industrial environments and a key feature is its hands-free, extreme noise cancellation voice control.
Core Component - The Carousel
We designed a carousel with multiple levels of information hierarchy with interactive controls that employed through a combination of head gestures and voice control. This control was designed to be used in areas where the user has focused attention.
Controls & Settings
Core Component - The Command Bar
The command bar was designed to meet the needs of the say what you see interaction paradigm whilst also offering flexibility and extensibility for applications across the experience. Reminiscent of behaviors from the Android command bar, it is made up of three core components - the action bar, the options menu and the help menu.