Grabbing the Reins for UI Consistency

A Style Guide / UI Kit Case Study

Objective:

  • Gain consistency in our UIs as our company’s user experience and UI implementations are all over the place.

Impact:

  • An Interactive that is easily located, referenced, and used

  • An easily used tool that aids design and development

  • A new sandbox to try out fresh designs

Background:

  • At my previous company, we had a real problem regarding consistency in our user interfaces. There were earlier attempts at style guides, but these would regularly be ignored with the passage of time. So, we need to create something that will stand the test of time as a repository for styles, rules, UI elements and patterns. And, it has to be easily located and have buy-in from developers and management.

Research:

  • Developers/Engineers don’t seem to listen to “just a Designer” if management isn’t also on board. 

  • We don’t have a definitive style guide / UI kit.

  • The style guides we have are in (wiki) docs that nobody can find or use.

  • I talked to developers about why they thought there were inconsistencies in our UIs (colors, fonts, patterns)…

    • “I can’t find the wiki pages that have our styles”

    • “I’m too busy to worry about this, when I have a deadline and just need to make ‘X’ work”

    • “I just take the styles (hex codes, fonts, etc.) from our other products.”

    • “Our UIs are so complicated that I don’t know which styes to use in different places”

    • “We have many UIs from different eras in the company, it’s hard to know which version to emulate.”

Ideation:

  • Why was traditional documentation not working in this case?

  • What was lacking in a “Wiki” page?

  • There are so many wiki pages floating around that “one more” doesn’t seem like enough of an answer.

  • How could we break through to developers and prove value to managers?

  • How can we make something “future-proof / extensible”?

  • Answer: We make an interactive UI kit / style guide built into a working frontend that can be easily used by developers and can be extensible / future-proof.