Get your docs in a row
We’re all done with reinventing wheels. Disjointed, inconsistent UIs that make people think should be a thing of the past. We know that stockpiling CSS by the tonne grinds production to a tearful halt.
This is why, if your team manages websites or applications of any reasonable size and scope and you want to deliver consistently great digital experiences, codified style guides like IBM’s design language or Mailchimp’s pattern library are a no brainer. Check out Anna’s compendium of style guide stories if you’re still not convinced.
Living pattern libraries offer lasting value
We’ve been developing pattern libraries for clients for several years now and seen how, supported by good governance and maintenance like Jisc UX, they can be the standard-bearer for your production values and customer focus. When you use a pattern library to align people behind that vision, you can reduce development costs, increase your agility, iterate quicker and ensure quality and brand focus. Pattern libraries can offer long term business value.
The pattern library we made with the Office of National Statistics has outlived their Alpha release and is now underpinning everything their team does for Beta.
The reusable UI patterns we created in the first project for our client Euroconsumers meant that the second project got off to a flying start. This service, that we designed without reinventing wheels, went live in Belgium on schedule two months ago and is already delivering results. The underlying UI patterns and user flows, enhanced with distinct brand layers, are now powering rollouts in Italy, Portugal and Brazil – where speed to market is key to gaining a competitive advantage. In this context, where the rollout speed is all important, we can see how those scalable foundations directly impact on business outcomes.
Maintenance can be tricky
Sounds like an open and shut case, doesn’t it? But here’s the inevitable problem:
The creation of a new pattern library can be a pivotal step in a digital transformation project (encouraging channel shift, increasing efficiency and ultimately reducing cost). It can herald the shift to a more user-centred approach to design. It can attract the attention of senior stakeholders sufficiently enough to unlock change. If that’s your goal, then a pattern library will help.
But unless you can get enough buy-in to resource it as an ongoing project, it will only provide short term value.
We’ve also seen pattern library initiatives where only a fraction of their potential was unlocked. We’ve seen them become a relic, a snapshot of a point in time, a missed opportunity. Here’s what can happen:
Pattern library projects can be liberating and things usually begin brightly.
But we all know that things can and should change – your production code will need to evolve to support iterative improvements to your product.
If your pattern library is a duplication of production source code it presents a significant maintenance overhead, and it will get left behind. Out of sight is out of mind, and anyway, you don’t have time to update both places. It can wait. But now those carefully crafted, rigorously tested patterns no longer represent your latest thinking and people start to ignore them. So it goes. Credibility and confidence lost, your lovely style guide dies on the vine. People revert to type.
In short, digital pattern libraries are prone to becoming obsolete all too quickly, just like the printed style guides of yore.
To reap their undoubted rewards you need some kind of pattern driven process, where maintenance is no longer a chore.
We made something to help
We’ve made something that will help with maintenance. It’s a build tool for pattern libraries written in Node.js, called HTMLDoc.
HTMLDoc keeps your living style guide in the front and centre of your workflow – by enabling documented demos to exist alongside front-end production code. Alongside. In the same files. That’s all.
If like ONS you annotate code and publish demos through a dev workflow, then HTMLDoc could help.
Simply by making updates easier, HTMLDoc can give your pattern library long term value, and help you to reap the term rewards of a pattern-driven design process.
Give it a try and let us know what you think at @cxdevs, or log an issue on Github.