Qurate Design System
This post will attempt to explain why and how I created the design system for Qurate products.
Working at a startup can be a frantic experience. Everything moves at break neck pace and everything needs to be done yesterday. This can lead to a mishmash of work flows and processes. Before you know it your work is spread over several artwork files and text styles, colours and spacing are inconsistent, which has huge knock on effects in development (lot’s of tidying up to be done!).
As the sole designer working on Qurate’s software I had to quickly develop a way of working at speed and with efficiency. As result our design system was conceived out of a genuine necessity, we could no longer continue working the manner at which we had been up to that point.
Just a quick word on the recent popularity of Design Systems. Recently there’s been a lot written about them as though they are a new concept (this article included, the irony!). Design systems have been around forever in one form or another and anyone who has designed anything has probably used one wether they know it or not. So I didn’t just sit down one day and decide to create one, it was a very organic experience.
One day I realised I’d started to create a design system by trying to solve the problem of efficiency. I then expanded from there.
Setting out there are a few boxes the design system had to tick. It had to be simple in order to develop and scale quickly and flexible, as in the early days we were still feeling around for the right solutions. We couldn’t allow ourselves to be constrained by a rigid system. Typography, layouts and grids, colours and icons were a solid starting point. Then I moved on to common patterns such as forms, drop downs and buttons etc. The rest could be developed naturally as we fleshed out ideas and solutions.
When you are working quickly; sketching, wireframing, creating high fidelity mockups and prototypes etc. It’s very easy to lose sight of what problem you are trying to solve in the first place. You have to know that when you’re in this space that you can fully concentrate on solving the problem and not worrying about if you’re using the right font weight or if the spacing is correct. Addressing these issues at the start frees you up to concentrate on the real issues, the user’s experience and not get bogged down with pushing pixels.
Principles
Design principles are hard to create and so are often overlooked or put off. Their use is often misunderstood however, they are a powerful tool. They describe what your teams understanding of great design is and what everyone should be striving for. Without them everyone is left to adopt their own ideas of what constitutes great design which can lead to a mishmash of philosophies and ideals. There are 4 Qurate design principles which we always adhere to.
1. Listen
Listen to people and take the time to understand their problems.2. Simplify
Be clear and concise. Create an environment where people can act with confidence.3. Unify
Everything should work towards the same goal and be part of a greater whole.4. Empower
Educate, support and guide people towards their goals.
Tools
There are a lot fantastic pieces of software out there right now for designing products. Ultimately I decided on a combination of Sketch, Craft plugin and InVision. I settled on Sketch mainly for its symbols and override functionality, which makes it a powerful tool for creating a design system. I found that this functionality actually forces you to design less rigidly. It’s helps you get the most flexibility out of a component by doing the minimum amount of design work.
Grid and Spacing
Setting up a grid system was an important starting point, it’s establishes your primary spacing rules and helps to create consistency between components and objects.
It’s important to get this right as it will carry through everything you create and dictate the flow and rhythm of the product. It’s also one less thing to worry about and makes spacing out elements and components a passive act.
Palette
Creating a colour palette from scratch is a big decision to make and can be quite daunting. After all this will stay with the product and brand for years. When I started working on the product all that existed was a logo which was black and white. We needed to add some colour to use in small bursts to highlight important functions and for action buttons etc. I experimented with a few colour combinations until we decided on a purple gradient which complimented the dark palette and helped to give a bit more character to the brand.
It was also decided that we need a secondary accent colour to use where a gradient didn’t seem appropriate for text links etc. Next I decided on secondary colours such as grays for text, icons and dividers. Making sure colour contrast was WCAG: AA and AAA accessible. Finally I chose red, green and yellow for notifications and other user feedback.
Overall I wanted colour to be at a minimum to allow the content to be the primary focus. The gradient was used for action buttons, the blue for text links and to indicate active items.
Typography
Lato was already being used on some basic branding so I decided to stick with it. It’s a clean, legible, modern font with flexible weights so it made sense to continue using it.
When setting up type styles in Sketch I liked to give myself a full range of options to choose from. This means setting up every font weight and size in all the palette colours. Of course the chance of using every single one of these combinations is slim but again it’s one last thing to worry about further down the line.
Deciding on the primary font size was actually a tough task and required a lot of experimenting and feedback. Font size has huge knock on effects. Increasing font size, means you have to increase line height which of course increases the size of components. A few insights included
‘It’s too small’
‘It’s too big’
‘I can’t see enough content on screen’
‘It looks to cramped’
‘I don’t like scrolling’
As I said, a tough task!
Eventually after a lot of fiddling, 14pt was settled on as a good compromise. Using weight, line height and contrast to establish a good rhythm and hierarchy. In the end it proved to be a good choice. As things progressed the font size proved to fit most situations, maintaining legibility but not being overbearing. Interestingly it was and still it the most contentious issue surrounding the product!
Icons
Icons are a staple of user interfaces. They speed up comprehension by conveying complex ideas in a concise way, they save space and transcend languages. A users understanding of an icon is based largely on their previous experiences. So it’s important not to try and reinvent the wheel and to stick with universally understood icons.
When creating the icons I tried to make them simple, using only a small number of strokes and all the same width and height. This helped to keep them concise. I started with the smallest size, 12 x 12px, making sure they scaled up where appropriate.
Most icons on the product are contained within a square button, this helped to make the icons feel more tangible and they could also be grouped together without looking too messy.
Icons are used sparingly with the option to have a tooltip hover if I felt it was needed. However, if a tooltip was needed it’s always good to consider if an icon is really the correct solution.
Styles
Styles within Sketch are extremely powerful and now you can use them with overrides, they are a huge timesaver.
After arriving at a visual style I liked. All layer styles and colours were turned into Sketch styles. This allowed me to create objects and components as general layouts and use styles to add colour and context. This meant I could keep symbols to a minimum, again designing less and getting the most out of components. This also helps to create consistency between everything you design.
Atomic Design Theory
I based the structure of the design system on Brad Frost’s popular Atomic Design concept. It is a way of breaking down products into the most smallest elements such as a button, then gradually bringing them together to build larger elements, ending with page comps. These are referred to as Atoms, Molecules, Organisms, Templates and Pages.
I didn’t go as far as to name the symbols I was creating in Sketch Atoms, Molecules etc. but I based the way I created and structured everything on this concept.
I found it to be a very efficient way of working and helped to create a level of consistency throughout everything. It really helped to be decide wether I really needed to create another Atom or Molecule or could I just reuse something else.
I actually found it useful at the start to create Organisms such as navigations then break them apart and try to reuse the atoms (e.g. buttons, labels etc.) and molecules (e.g. inputs, drop downs etc.) in another Organism. This was a great way to test out the flexibility of the things I was creating.
Components
Components are recurring elements which are used throughout a product. I found creating components to be a really good place to begin to help define the visual style. I started with things such as buttons, inputs, avatars and toggles and built out from there. Bringing them together to make slightly more complex components, then testing these within patterns.
Patterns
Patterns are repeatable solutions to commonly occurring problems. They need to be consistent in function, style and feel.
Some examples include navigational elements, cards and tables. They are made up of usually one or more components. They are the reusable building blocks of a product and need to work together seamlessly.
It took a lot of experimentation and tweaking of components to make the patterns workable and reusable. As the product expands you sometimes find edge cases that a pattern does not work for and therefore it may either have to be tweaked in order to work with this edge case or you have to decide if this is really the best solution to the problem.
Documenting
The hardest part of creating this design system was documenting it in a way that was easy to understand and accessible to everyone. As the sole designer is was also important that it was easy and painless to keep up to date.
Initially I started using Sketch to layout components, patterns and accompanying notes, as well as full screen comps and uploading them to InVision. This soon became extremely time consuming to keep up to date, especially at the speed the product was moving. InVision remains fantastic for sharing full comps with the rest of the team and getting feedback but laying out all the components and rules manually was overwhelming and extremely time consuming.
Luckily just at the moment where I was struggling to find a better way InVision released their Design System Manager. This was a perfect solution for my needs, it connects directly with Sketch enabling you to share symbols, layer styles and text styles across different files. You can document rules and guidelines easily without having to worry too much about the layout as it’s all taken care of in DSM. It is also accessible by all the team. InVision to the rescue!
It’s important to establish naming conventions early on for Sketch symbols. Your Sketch file will start to get messy very quickly without a solid way of organising your symbols. I try name things logically and make them easy to find.
Examples:
button/primary
button/circle
icon/12/check
notification/global
card/project-preview
Each forward slash creates a nested drop down, making organisation quite intuitive. Because of style overrides I didn’t need to create a symbol for every state. For examples I have just 1 symbol for a global notification which I can adapt to be a success or error notification where appropriate.
Testing the system
Only way to really test a design system is to start using it and then watch it evolve. I didn’t just sit down and create a design system, it changed dramatically over time as the product grew. We think of things becoming more complex over time but I found it tended to become more simple. The fact it was simple made it more flexible enabling us to feel less constrained by components and patterns created for very specific things.
