Enhancing your Agile UX process using Live Style Guides (LSG)
About a week ago I attended a presentation focused on Live Style Guides and how they aided in creating efficiencies with Agile development.Style guides have been around for a very long time.
Over the years style guides have evolved and have become much more sophisticated. In the past style guides were limited to only providing specifications for general branding elements such as fonts, color values, and logo usage. Style guides such as these were meant to be used to achieve a consistent look and feel for marketing materials being created a company. However, these style guides very rarely provided information for addressing web design.
Since this time today’s modern style guides have become specialized for digital applications. In addition to providing general branding guidance, they typically provide exact specifications for page layouts, widths, font sizes, spacing, etc. However, there are still many short comings.
First, they are often designed at same the time developers are coding the application. This is generally a result of a “waterfall” managed project. The moment the UI speculation is finished it handed to the developers and they immediately begin coding. Second, traditional style guides are often written in the language of the design team, which makes it difficult for developers to interpret and associate with the UI specifications. In addition, traditional style guides often lack visual clarity and consistency for the presentation of screen elements contained inside the style guide, which can leave developers confused.
Live style guides help solve the delivery problem by using a “real time” creation method that entails creating the style guide components at the same time the UI specification is being designed. As a result, developers have the up-to-date specifications they need for the current development sprint. Furthermore, Live Style Guides can also reduce the time it takes for users of the style to become familiar with the guide’s vocabulary system and page elements by having developers co-author the style guide using an agreed upon vocabulary. This helps everyone on the project team speak the same language and discuss design & development topics with greater understanding. Last and most important, the aggregate benefits experienced from LSG’s can reduce design cycle times by lessening the need for designers to create high-fidelity wireframes because the needed detail for development implementation is already contained and in the style guide. Consequently, LSG’s are very conducive to firms that practice Agile development practices.
Benefits of Live Style Guides
- Provides developers with real time design specifications for new design elements
- Enhances project team communication by establishing a common vocabulary for design elements
- Increases speed of development by reducing time to understand visual styles and by providing up-to-date specifications for UI elements currently being coded in the current development cycle.
- Reduce dependency on high-fidelity wireframes
Firms that utilize Live Style Guides did not convert to using them overnight. They scheduled meetings with key stakeholders to discuss how incorporating LSG’s into their firms development process would have an impact both positively and negatively. Here are some of the challenges you may face when adopting a LSG driven development process:
Challenges:
- Requires up front time investment to document styles in conjunction with completing UI specifications.
- Requires continued maintenance and refinement to style definitions
- To be successful at maintaining a live style requires “joint ownership” between UX, Visual Designers, and Developers.
- Regular meeting need to be conducted between project team members to review the LSG and make updates.
- Applications built at large enterprise companies are often developed by several difference vendors that are managed by different business units that all share the same style guide. When new updates are made by one business unit, the changes are not effectively cycled into the next version of the style guide.
- Large enterprises often work with new development vendors that were not part of the style guide creation process. These vendors can often be overwhelmed with becoming acclimated to a 300+ page style guide even if it was created using LSG principles.
Thanks goes out to Grant Hutchins, Andre Cramer, and Steve Berry for putting the presentation together. Also, thanks to Anders Ramsey for organizing and Pivitol Labs for hosting the event.
Relevant Links:
http://speakerdeck.com/u/thoughtmerchant/p/unifying-agile-and-ux-with-live-style-guides
http://uxmag.com/articles/anchoring-your-design-language-in-a-live-style-guide
