Style Guide
A UI specification document that provides concrete visual standards for UI developers
situation
As a UX specialist I was asked to come up with a style guide for existing H5 product suite. UX provides wireframes that are a guiding factor for developer to create the UI. Developers would like to get a more granular UI specification document reduces their decision making time when it comes to implementation styles.
task
I created a style guide with detailed UI specification that devs could adopt easily.
action
I did research to understand what constitutes a style guide.
WHY A STYLE GUIDE?
Even through developers follow material design style and polymer components library there is a lot of time spent in decision making when it comes to the look and feel aspects. There is no deciding factor and as result inconsistencies crop across apps. Material design doesn’t cover desktop as much as it covers mobile. Polymer defaults are not pretty. As a result there is a gap that UX is required to fill by providing specifications and standards to make implementation easier and faster.
What constitutes a standard?
Style Guide guides usually translate to a design system which is an HTML form of a style guide. Design systems are code snippets that with style guide imbedded. Devs then use these code snippets as a library of UI components to use.
Style Guide
Tone and Voice
Visual Identity
Governance
Design System
Visual Assets
Code Snippets
Governance
Benefits of a Style Guide:
Provides unified look and feel to customers thereby building familiarity and trust
Builds a brand
Source of truth for UX and Dev
Reduces decision making time to design and implement
Reduces learnability for users
Allows code sharing
Style Guides Out There
I looked at examples of well known style guides out there: Airbnb, Mail Chimp, IBM, Google, Apple, Uber
UI Audit
UI audit was conducted of similar screens across apps and discrepancies were found. Meetings were held with product owners to understand the reason for deviating.
DESIGN
Ideology
Even though products need to be consistent, each product has unique offering and cannot be clones of each other. So I decided to create a flexible layout. Parts of the layout of mandatory and other optional. Based on the requirement, the layout can be chopped and changed but the look of the components remain the same.
Navigation
The primary navigation is the same across app
Landing page
Details Page
Create page
Edit page
Page Layout
Each of the pages have a mandatory and optional components to the layout.
UI Components
Polymer components library is used to cater to most scenarios reducing the need to create custom components as much as possible.
UI elements
Standards provided for
colors
font styles
spacing
button styles
placement of elements
MVP
The MVP was restricted to the landing page initially to bed down the process and then move on to other pages.
Measure of success
Adoption, efficiency and impact on code base.
COLLABORATORS
Product owners
Their products were audited and discrepancies were raised
Business Analysts
A workshop with business analysts was conducted to point of the deviation from the standard template
Developers
Workshop with developers were conducted to understand the gaps unfulfilled by material design as well as polymer components
Frameworks
Teamed up the developer custodians of the polymer framework throughout the process
result:
The style guide is in active use currently and have been a source of truth for UI related decisions.
