The Knewton Blog

Subscribe to Newsletter

Our monthly newsletter features edtech and product updates, with a healthy dose of fun Knerd news.

Speed Up, Save Time: Why Your Website Needs a Pattern Library

Posted in Knerds on November 21, 2011 by



We recently did a major overhaul of knewton.com.

Old homepage:

 New homepage:

As with any website change, there was plenty of work involved from our marketing team, developers, designers, copywriters, and others. And, in the midst of all the turnover turmoil, we also made the decision to add another task to our plate: creating a pattern library.

For those who aren’t familiar, a pattern library is an online space dedicated to sharing design elements of a product or website with a group of designers and developers. Yahoo! is widely credited with pioneering the pattern library in the early 1990s.

Our marketing site pattern library organizes and systematizes all the elements of our new site, and lives on a wiki which anyone in the company can access. (We also have a pattern library for all the design elements of our products).

Our pattern library has already proved helpful to us as we continue to iterate on our site design. If you’re considering implementing a pattern library, this post will give you some background on pattern libraries and why they’re useful.

What exactly is a pattern?

Patterns are ways to describe best practices, explain good designs, and capture experience. They originated as an architectural concept by Christopher Alexander. As Alexander put it in A Pattern Language, “each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over… without ever doing it the same way twice.”

In the context of our marketing site pattern library, a pattern might be a button that appears in our buy flow, or a certain type of headline. The pattern library will define this element from a user interaction (UI) perspective, focusing not only on what the pattern is, but also on how it is being used and the specific problem it is solving.

Why is a pattern library helpful?

Even though we knew the pattern library would require an initial time investment, we also knew that in the long run it would:

  • Speed development
  • Ensure consistency
  • Aid in rapid prototyping
  • Maximize usability

In other words, it would save us time and make our product (in this case, our website) better.

For our designers, the pattern library gives them one place to see all the elements of the website. This allows them to more easily evaluate each pattern for consistency.

For developers, having each element in the pattern library gives them easy access to the element’s code whenever they might need it (the library automatically pulls in the code, so it is always up to date). In addition, the library contains each element’s visual specifications; developers no longer have any need to dig through PSDs for this information.

Other benefits of the pattern library include improved communications and knowledge-sharing between our design, copy, marketing, and development teams, as well as increased productivity. The pattern library is also a great way to help new hires or others in the company get up to speed on a particular project.

What does a post in the pattern library look like?

As outlined above, each entry focuses on a specific design element, and explains not only what the element is, but also how and why it is used.

Posts within the library are divided into two categories: “patterns” and “feature specs.” Feature specs are technically also patterns, but for our purposes, the distinction functions to separate more specific, developer-centric information (feature specs) from broader elements which focus primarily on interaction and usability (patterns). Under these rules, an example pattern might be “type styling,” while a feature spec might focus on the way in which type styling is used on a specific part of the website.
Entries for both patterns and feature specs follow the same structure:

  1. What problem does this solve?
  2. When to use this pattern
  3. What’s the solution?
  4. Screenshot
  5. Spec (all the information a developer needs to translate designs to a working feature)
  6. Code & Demo

Let’s take as a sample entry a video carousel that appears on our site. Here’s the screenshot of the carousel:

Here’s the way the post for this element would appear in the pattern library:

1. What problem does this solve?

The user must be able to digest important content. This content must be easily viewable… Explaining complex concepts without overcrowding the page with multiple paragraph breaks was the challenge.

2. When to use this pattern

  • There are multiple videos of similar subject-matter
  • Videos are playable on its current page and not in a separate window

3. What’s the solution?

Display a carousel with thumbnails to entice the user to click through at browse all of the videos. Also, provide left and right navigation arrows to “scroll” through each video and to leave room in the event that more than four videos are available within the carousel. A clear, large paragraph description that is limited to only two lines is used to ensure that the carousel supports rather than competes with its description.

4. Screenshot

(See above screenshot)

5. Spec

 

6. Code & Demo

This section of the post includes up-to-date snippets of source code from the developer’s implementation of the pattern. In addition to simple code samples, the developers also construct Pattern Demos. These are small-scale applications designed to showcase the look, feel, and functionality of a pattern.

What is copy’s role in the pattern library?

In the same way that design elements can be systematized for ease and consistency of use, copywriting can also benefit from this type of organization.

The “patterns” and “specs” that are used to define design practices are slightly different in the context of copy. Patterns define the tone or voice that the copy takes. The are usually general guidelines for how to create pieces of copy. On the other hand, specs are specific pieces of copy that should appear routinely throughout the product or interface.

Benefits of copy patterns:

Many of the benefits that apply to design elements also carry over to copy. Having established patterns makes copywriting fast, consistent, and scalable.

For a startup, copy patterns also offer other benefits. By establishing the language that is used to describe a product, its features, or its functionality, consistency can be established both internally and externally as to how people discuss it. A universally recognized set of guidelines for how employees talk about their work strengthens branding and marketing and positions the company for success in the long run.

How to incorporate creating a pattern library into your work flow

The standard work flow for creating a new piece of software is roughly: Spec, Design, Development, Review. A product team will define the specifications of the new feature, and hand those off to the design team. The design team translates those specs into design documents. Those documents are delivered to developers for implementation. The application is then reviewed to see if it meets all necessary requirements.

A pattern library does not change the standard work flow. It speeds it up. In the design phase, the user experience team does not need to create numerous PSDs to show the feature and its states. Rather, they just develop the Specs for a library post, which takes far less time. It is the developers, however, who glean the real benefit from this. Coding up a pattern is orders of magnitude easier than developing from a PSD. Using a pattern library turns months of work into weeks of work.

Once the underlying patterns of the library have been spec’d and implemented, the effect required for new feature development drops to nearly zero. Work can be done quickly and with little overhead, as there’s no longer a need for discussion. In the long run, the system pays for itself: the more time spent enriching the library, the less time needed to maintain both the library itself and the software it defines. There’s no downside to using a pattern library.