Start building a Styleguide for PageUp
Background
PageUp’s Talent Management software has grown organically over last 17 years. During this time our products have become complex and many inconsistencies have crept in. This means we’ve ended up with a motley collection (and sometimes confused range) of button styles, inputs fields, various layouts for the same element, and different interactions across single flows.
This led to spending a lot of team time debating the smallest of design details because there were no solid design rules or guides for our products. And more importantly, these inconsistencies have resulted in a range of ‘experience debt’ contributing to a system that’s harder to understand, learn and sometimes disorienting.
How are we tackling this UX problem?
Since joining PageUp, Adam Crapp, our Head of UX , introduced a Global Experience Language (GEL). I’ve been lucky enough to join our UX team and start building the PageUp GEL from scratch.
In this article I’ll share my thoughts, ideas and tips on building a Styleguide for a complex SaaS product.
What is GEL?
The Global Experience Language (GEL) is single source of truth for creating consistent, coherent customer experiences across our entire digital landscape. Think along the lines of what the BBC and Westpac have been able to do in recent years.
Defining the PageUp GEL
PageUp’s GEL consists of three parts that will bring consistency to our digital experiences
- Brand Guideline (logos, typography, colours etc)
- Product Design Guidelines (Design principles, personas, accessibility etc)
- Styleguide (all the elements that make up our online presence and how to implement)
We want the GEL to express the rationale behind these elements and how they can be combined to best effect. It’s about bringing PageUp’s personality, voice and tone, feelings and behaviours to life. It’s a toolkit for everyone at PageUp involved in building digital services such as:
- Marketing designers
- PreSales engineers
- Client delivery consultants
- Technical account managers
- Developers
- Product owners
- Anyone who is responsible for our creating great customer experiences
Setup a Styleguide
A styleguide clearly demonstrates how all interface elements and components are to be visually represented. It’s a master reference for the user interface (UI).
A styleguide is the infrastructure of the GEL. Including typography, layouts and grids, colours, icons, components and coding conventions, voice and tone, and documentation.
A comprehensive styleguide brings these together in a way that allows your entire team to learn, build, and grow.
Step 1 — Identify the design debts, create UI inventories
The first step is to fully understand your products. Review every aspect of the product, try to list all the important elements, and then group elements by their possible usages. For example, style group could be basic assets such as colors and fonts. A component group could include buttons, cards, tables, and dialog used.
Overall, we identified 48 buttons styles, 134 icons, 54 colours and 13 box models across our products. While many of the individual pages in our web application are excellent, the user experience as a whole is fragmented, confusing and inconsistent.
Having a UI inventory of all of these start to clean them up and align everything.
Step 2 Designing by following Atomic Design Theory
Pioneered by Brad Frost, the Atomic Design is a hierarchical way of organizing design patterns. On the base level (Atoms), there are simple design patterns, like a button, a text box, or a label. An email submission form which combines the button, text box, and label into a more complex pattern is at the next level in the hierarchy.
We’re not designing pages, we’re designing systems of components. — Stephen Hay
We are following the same methodology, but interpreting it slightly differently in a way that makes sense to PageUp: Principle, Essentials, Components, Templates, Features and Product.
We began with the base level by consolidating the fundamental web elements we created in UI inventories. Those are the smallest units can not be broken down any further.
- Colours
- Typography
- Iconography
- Buttons
- Form controls
First Draft
Designing is always an ongoing process. You are going to iterate a lot along your way to getting a great result. With the first draft comes the first gathering of feedback. You don’t have to create a pixel perfect design in order to start receiving feedback from other teams, clients or potential users.
With this draft i have an idea of which direction we want to go, colours and general style.
Step 3: Document design principles and rules
After having built all of the design essentials, it’s time to move to the document part: build principles, rules and information structure for your design system.
You can reverse the order and build the principles part first, but for our small agile teams that want to move fast, we decided to build the basic elements first, to implement them into products and get real time feedback.
It takes a lot of time to document all the detailed rules. But Rome wasn’t built in a day, neither was styleguide.
Step 4: Engineering a styleguide
We chose to use GitHub for hosting the code of the actual styleguide, and also we have separate repo for the technical output such as modular LESS files and minified CSS. It also helps to bridge the gap between design and engineering.
Developers can find exact components by class names and deliver high-quality outcomes efficiently. Developers can copy and paste consistent code from the library, which is useful for avoiding UI bugs, miscommunication, and duplicate work.
Finally, with power of Travis, we are able to automate the deployment process from Github repo to AWS production S3 bucket.
The Road Ahead
Building a pattern library
The concept of a pattern library is simple:
- Break down an interface into reusable building blocks
- Arrange and group them
- Name them
- Establish rules between them
- Generate an overview of all components
- Make them available for the entire team to build and design with
Our patterns are versatile, can contain components, and be paired together to make up a template.
Final
Creating and maintaining a design system is a significant amount of work. If you do it well from the beginning, it will be much easier and faster to build features and products.
Keep reminding yourself: Building a design system is a long process filled with trial and error. We spent a lot of time testing, learning, and failing.
With only a small dedicated UX team, we engage with other teams across the business and try to influence and educate them in the practices of user experience design. Some of us have UX in our job titles, but that doesn’t mean that we are the only ones that have to worry about it, it is the responsibility of the whole business.
Special thanks to Adam Crapp who guided design process, Tal Rotbart and Paul Heasley who assisted from a technology perspective on this project.
