Responsive Style Guide

In order to design and build more efficiently, my team created a style guide as part of our effort to redesign a travel reservation system.

The Brief

To redesign the travel reservation system and set ourselves up for efficient design and development, we need a style guide that will:

  • Explain our design rationale for using key components
  • Provide developers with code snippets that they can use

Timeline: 6 months

My Role

Product Manager / Lead UX Designer

I wrangled UX designers, copywriters, visual designers and front-end developers to move the style guide from idea to reality. I also contributed heavily to the content, organization and design of the guide.

Goals

We wanted to accomplish a number of things in putting together the style guide.

consistency

Consistency

Our application and project team are both very large. We felt that a style guide would help create consistency in the design across the web platforms and would help make sure everyone is moving in the same direction.

efficiency

Efficiency

Less time spent reinventing the wheel is better time spent. Shared class names and the ability to move quickly from wireframes to front end code are two of the major ways we felt that we could improve team efficiency with a style guide.

knowledge-transfer

Knowledge Transfer

The bulk of the creative team was planning to roll off of the project. However, we knew that there would likely be additional design required after that roll off. The style guide is meant to help with ramping up new design team members.

Structure

The style guide was designed to include four main sections:

Style

These are the elements that define the overall look and feel of the applications: colors, typography, breakpoints, and so on.

Components

These are the pieces that come together to create each individual page or flow. Components include text fields, modals, dividers, and so on.

Patterns

Patterns are the various ways that components are used in relation to each other. These are the most important things that we want designers to know.

About

This section states the goals and tenets of the applications.

Anatomy of a Component

component

Components are the most intricate elements in the style guide. Each style guide component included three key features.

  • Description: Every component in the style guide includes a description of why it is used and when it is used. This helps achieve the goal of transferring knowledge by providing commentary on why certain decisions were made.
  • Responsive Component: Each component is built into the style guide so that the user of the style guide can see how it appears at all breakpoints.
  • Code Snippet: Code snippets are provided to increase consistency in code (so that all text fields use the same classes) and to increase efficiency.

Results

The style guide is hot off of the presses. Below are sanitized screenshots of select sections and components.

Note: Much of the project work that I’ve completed is protected by NDAs or not openly available on the web. This is one of those projects. Designs have been altered to hide identifying information.