How to trim your design and keep it healthy

I´m exited about consistent design because it makes the interaction more intuitive.

A healthy design consist of adaptable, reusable chunks and a clear vision.

We are not designing pages, we are designing systems of components. -Stephen Hay, from Brad Frost´s blog post on Atomic Design.

Content

The content you put in your styleguide should be adapted to your clients needs. Some relevant content may be:

Design chunks – divided into 3 main types of chunks:

  • Elements (basic styles like typography, colors, buttons and icons)
  • Components (elements komposed into a komponent like a header, footer or an image slider)
  • Layouts (components komposed into pages like an article, a gallerypage or  a frontpage)

Always design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan. -Eliel Saarinen

Design rationale

  • Design principles
  • Design vision
  • Tone of Voice

CSS rationale

Vector archive

However, developing the design-chunks is not the main challenge.

The main challenge is to keep the styleguide used and continously updated. If you spend months developing a styleguide and then just forget about it and never touch it again, then you have wasted your time.

It is not just about the styleguide, but also about the creators who needs to use the styleguide and keep it alive.

You need to look at usability issues and pain points just as you would in any other design project.

Some common pain points I have found are:

Problems finding time to update the styleguide, because each project has it own problems to solve.

I found that the process of using and updating the styleguide should be integrated into the natural workflow of the teams.

Another common problem is when the developers are not implementing the design – or code chunks the way it was intended, leading to problems later on, when we need to iterate on the design and make changes to the css.

This is a simple usability problem, where you should look at how the designchunk is documentet. Each piece of design should contain:

  • A title
  • A unique reference ID or url
  • A summary of how the element can be used and how
  • html  / css code and class reference
  • A visual illustration

Now you are probably thinking – this is going to take time, we have to do usability studies and all.  So – that leaves us to the second main challenge.

Motivate

How can you motivate your peers and clients to put in the extra resources to develop the styleguide?

The benefit of developing a usable and living designguide is often overlooked. As a result, many products fail to deliver consistent design efficiently and loose time to market.

Start with dividing your peers into groups and interview them to uncover their needs and find common goals.

Customers Editors Creators Business
Communication
Reference & shared vocabulary
x x x
Operational efficiency
Living & usable styleguide, designsystem, work-flow, testability, connections, availability
x
Usability and performance
Reusable, less code, improved performance, consistent design, intuitive
x x x
TTM
Faster TTM, automated & efficient, more output for less input
x x

This needs matrix uncovers how the creators of the design and code needs the styleguide for operational efficiency. The business side don´t need the styleguide in itself, but what they do need is Faster Time To Market. And the customers needs an intuitive interface.

The styleguide will fasilitate all theese needs.

Communicate & Connect

If I have learnt anything from working in large distributed teams, it´s that communication is key. -Paul Robert Lloyd

The styleguide is also an exellent tool for communication. It is a reference with a shared vocabulary improving communication.

To exploit this effect, it is important to create connections between people and make sure the relevant people are aware of the resources in the styleguide.

We must integrate new developed chunks by presenting results and training new users.

Keep it alive

A beautiful design system is about finding the same balance of consistency and variety. Too systematic and the design becomes predictable and repetitive. Too much variation and the system is confusing and owerwhelming. -Allison Wagner

I don´t belive in implementing too strict rules in the styleguide. The styleguide is a tool that should fasilitate our needs, it is not a straitjacket. If the styleguide start feeling like a straitjacket, people will find ways around it, resulting in it not beeing used.

When we start breaking the rules, we need to look at why we do it – if we already have a designchunk but we are not using it anymore, chances are that the old chunk is ready to be iterated upon.

So – to summarise – we need to develop the styleguide, then we must integrate what we have developed and then we iterate on the developed pieces.

Theese are the 3 main steps in the continous process.

Develop (Motivate)

  • Find business needs
  • Develop design principles
  • Develop design chunks
  • Implement into existing process and organisatinal structure

Relevant activities:

  • Interview stakeholders and develop needs matrix
  • Workshop – designstudio and designcritique
  • Designer days
  • Designer – developer pairing

Integrate (Communicate)

  • Inform and communicate new results
  • Train new users
  • Implement reusable chunks

Relevant activities:

  • Presentations
  • Meetings
  • Video conferences
  • Designer days

Iterate (Keep it alive)

  • Measure progression in design revisions
  • Evaluate
  • Changes in trends and business
  • Adjust when needed

Relevant activities:

  • Discussions
  • focus groups with developers
  • Design revisions

The 3 key steps toward a healthy design:

  • Create connections and motivate the creators
  • Design the process, not just the contents of the styleguide
  • Keep it alive, integrate and iterate