UX Case Studies

Outsell: Human Interface Guidelines

  1. Background & Description
  2. Techniques, Tools & Technologies

Background & Description

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 guidelines

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:

Two project "design-tos" consisted of 1) having the HIG exemplify our design principles and 2) serving to demonstrate the actual front-end technologies used by products. Therefore, the HIG were authored in HTML and utilized Less, Bootstrap and jQuery. CSS was generated on the fly using Grunt, a Javascript-based batch processing system. Use of Less also made it a simple matter to provide different "themes" should they be desired by customers. A final advantage of the second project "design-to" is that it allowed us to provide working sample components and production CSS to the engineering team. Each component has "view source" and "view example" functions to view the actual code and see the component in action. This saved engineers time and helped ensure a consistent user experience.

Want to see more?  Live version of the Outsell Style Guide for Applications.

Techniques, Tools & Technologies

Techniques Tools Technologies
  • Style Guide Research
  • Application Review
  • Content & Design Reviews
  • Panic Coda
  • Git
  • Adobe Illustrator
  • IcoMoon
  • Grunt
  • Bootstrap
  • Less
  • jQuery
  • Web Typography