What's In a Style Guide?

The many phases of the Localedge style guide


This is a process that has been in progress since the development of the new Localedge dashboard design in 2015.



Strategy

Setting the Standard for Consistency

While simultaneously developing the final design plan for the Localedge dashboard, style standards were being developed in the process. The standards site has gone through multiple iterations, but has finally landed somewhere that lays out every detail that developers, QA, myself and product owners need. This is a consistently growing process as new features and components are constantly being added to the dashboard and internal tools that have also taken on these style standards.

Learning From My Mistakes

As previously mentioned, this project took on many phases. It went from living on a personal domain on a wordpress theme, to a house domain with a custom built html template to a section of pages in Confluence. They took a really long time to build - each time it felt completed, I started realizing flaws with layout, content, and how content was organized and thus ventured into planning phases of a newer improved style guide.

Some examples of the old guide:


When the team started placing all important documentation into Confluence, I switched over the style guide information to a section of pages I named “Design Standards.” I was really happy with this structure and felt relieved with how easy it was to add a new page or section. This is a really important ability for new elements that are always being added on or adjusted. However, once again when I felt the style guide was finished, something about it felt incomplete. This feeling was solidified when the developer supervisor sent me his large list of requests for additional information needed on the style guide. It was then that I realized just how much I had catered to mostly myself, a designer’s needs, in this style guide and the past guides as well.


Iteration

How I Approached This Differently

I had a meeting with the developer supervisor, the QA team and a product owner representative to hash out wants/desires/needs for a style guide/standards site. Each user type needed to reference the standards for very different reasons, and thus made sense how each user type saw the site as lacking a lot of important information.

Developers: Global stylesheet, code/markup examples, live examples, specific sizing/padding/spacing details, color hex codes, specific text sizes for specific situations, what problems the element solves, links to any important resources regarding the code, responsive view details
QA: Visual examples of how a component should look, sizing specifics, color specifics, text/content specifics
Product Owner: Visual examples of how a component should look, overall look and feel

I did plenty of research on successful style guides such as mailchimp, atlassian and lonelyplanet then landed on a very practical and informative template through this wonderful article on style frameworks which I found via this style guide article. I loved this template’s presentation of the information and how all the bases and concerns are covered. So I then applied it to my own style guide.


New Layout Plan

Style Guide Element or Pattern Description Layout

  1. Title/Heading
  2. Last Updated
  3. Explanation of what the page rules are describing. (e.g. Accessibility: Rules regarding color, alt tags, captions, and other features that make the site accessible to users who are disabled and impaired)
  4. Visual example of the element
  5. Optional live example of element
  6. What problem does this element or pattern solve?
    • Description below
    • Applies to which platforms (e.g. Dashboard, Atlas, Reseller, etc.)
    • Example of element in production
  7. Detailed Specifications
    • Code example(s)
    • Links to any important resources involved with this element like a JS snippet or W3.org for most recent accessibility regulations
    • Is a list alphabetical? Is a form restricted to a small area? Are there certain size specifications for a special situation?
    • How is this displayed on a mobile device?
  8. Additional Details
    • Information on research, user testing, usability reports
    • Other names this element or pattern may be known as
    • Related elements within this style guide


Execution

Applying the New Structure to Confluence

This is a project that is currently in progress. The new structure has been approved by devs, QA and Product Specialists. Presently, I have been writing up all the content in a word document first before placing it into production. I have opened up the option of suggesting edits to the documentation, so that my delivery will be able to serve them to the utmost of its ability. I am much more confident in this direction.