The lull before the library

9 Nov

As an inhouse team, we are usually insanely busy with the usual mixture of tiny, fiddly, irritating jobs and large, fulfilling and kinda cool ones.  But from time to time we find that the business is winding down, and the need for our skills winds down too.  This is great – for about a day, and then we start sniffing about to find other mischief we can get into.  During this lull, we have started working on a Pattern Library for the site, to help us get our house in order.

What is a Pattern Library?

A Pattern Library is essentially a list of commonly used components.  Even though there are only 4 designers and 2 UEx people in our team, we have created different variations of the same components as we have worked on different projects.  Now, as we strive for a consistent user experience across the site, we find that we have multiple wys of doing the same thing, and we want that to stop.

Step 1: capture the patterns

The first job was to trawl through the site screenshotting every ‘way of doing something’ I could find – these comprised the first patterns.  This was pretty much a one man job, and took about a day.  I started on the home page and found an item – a carousel.  I then mooched about on other pages capturing every other one of those we have, and put them all on one slide.  Repeat for every other pattern we have, and we had the core of our library.

Step 2:  Assess the damage – just how inconsistent are we?

For each pattern, I had a first go at rating how inconsistent each component was.  This was rated on graphical appearance, the interaction, the build style and quality, and lastly how critical this inconsistency was to the site.

Step 3:  Prioritise

When we reveiwed the patterns within the team, we wfound that some were bad and should be looked at right away, while others were not life threatening.  Important ones were The Basics, such as link colours and states, button colours, fonts, and how we treat our great deals.  A couple of the designers started working through these, defining colours, outlining instructions on how to create consistent components, and packaging all this into the beginnings of a style guide.

Step 4:  Work ’em through

Our lull has now been filled – the designers can take the patterns, review them and start to define a definitive design for each one.  We will then use a single PS file per patern, which means that we will always be using the corect version in new designs.

 

Using the Pattern Library

No sooner had we started thinking in this way, we found it a lot easier to challenge requests from the business for new and unusual functionality or design.  With a clear mandate from senior management to make the site consistent, we now have the toolkit to push back on new requests by following this simple process.  When someone says “I would like a thingummy bob that does X”, we think:

1.  Do we have a pattern that does X?

If yes:  use the existing pattern (no argument).  If no, create a new pattern and follow all the usual processes of wireframing, usability testing,  etc

The pattern library has really galvanised us into creating the standards that until now we have felt unable or unwilling to create.  This is a tool for our own use, and is designed to be supportive rather than set in stone.  But it has given us a bit of power to our arm in the fight for a consistent UEx.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: