Identify the Problem

Our small design team was finding that the system thinking we tried to apply across tools in the application was not being effectively communicated and built.  We needed a better way of sharing the patterns and guidelines we were following, and of consistently specifying the same interactions.

Research

Half of my research for this project was, as is usually the case, trying to determine what was really needed. I spent some time looking at how other teams have built pattern libraries, style guides, and combinations thereof, to try to determine what the best type of guide for our team would be. We needed a wireframe kit, and a non-visual style guide for our interaction patterns and workflows.

The other half of the research was devoted to identifying what components we use and how they should behave.

Interaction and Interface Design

Without the development resources for a live style guide, I needed to document out all of the interactions for components that would be referenced in various wireframes later.

or components that didn't have specific interactions, I documented the layout and wrote guidelines for how to customize them.

I also began to incorporate all of the elements into an updated, reusable wireframe kit.

Implementation and Outcome

The research, interaction, and layout notes were all combined into a wiki-style guideline library and a complementary wireframe stencil kit. The library is still being extended and is in use as a reference.