The purpose of this project was to develop a set of Human Interface Guidelines (HIG) to ensure a consistent user experience for next generation products. Legacy products had an inconsistent user experience both in terms of visual and interaction design due to the siloing of product teams and the use of different technologies. Due to the lack of a design team, no effort had been undertaken to ensure consistency. The overall goal was to deliver living documentation to be used by the both the design team members and engineering staff. Additional goals included the capability to apply different, branded "themes" to be used by specific customers, source code examples, and CSS generated from Less. The latter two items were provided to aid engineers in quickly developing HIG-compliant products.
The first step was to understand and communicate the scope and priorities of the HIG. I've found that using the bull's-eye framework (shown below) helps that effort by categorizing the different areas where inconsistencies can be found in product designs (e.g. variations in typography, color and design patterns). Based upon this conceptual framework, and since we were developing a new set of products, I chose to focus the initial HIG effort on three areas: 1) design principles, 2) branding and visual language, and 3) components.
Design principles encompass the bull's-eye framework and serve to guide all aspects of the design practice itself as well as the desired user experience for all products. I outlined several guiding principles (e.g. the data is the focus, minimalist design, transparent design and context over consistency), explained them, and provided some inspirational quotes from such design luminaries as Dieter Rams, Paul Rand, and Steve Jobs.
The next step was to determine the aspects of branding, visual design, and components to document for the initial release of the HIG. The choices were made based upon the next generation product being designed at the same time. The following pieces were designed, coded and documented:
Want to see more? Live version of the Outsell Style Guide for Applications.