Tory Hobson; Product Designer

Pattern Library

 
 

Design Systems to the Rescue

How a Pattern Library saved our butts

library-thumb.png

Like a lot of companies, we at Netspend were creating our product one page at a time. There was no real system, and that led to a lot of inconsistencies. We had talked a lot about changing our ways but a few years ago we got serious about it—and it was my job to take the lead. It was finally time that we created our own internal pattern library.

 
 
 
 

For large organizations, a resource like a pattern library is must-have.

After doing a lot of research on design systems, I decided to structure ours similar to GE’s Predix Design System. The groupings seemed to make the most sense for what we’re doing at Netspend (and we could avoid semantic issues that were seeming to pop up early on).

Our groupings and definitions are as follows:

  • Principles: Principles, as the name implies, are the guiding principles that designers should reference and respect when creating new design patterns.

  • Basics: Basics contain the design patterns that fall on the simple side of the spectrum.

  • Components: Components contain the user interface patterns that fall on the moderately complex side of the spectrum.

  • Layouts: The documentation of the layout and structure of a section or page. 

  • Features: Features are the flows/systems that, when working together, allow users to accomplish a task or solve a problem.

I’m proud to say that since it’s existence, the pattern library has helped in so many ways—and not just for designers. It’s hard to list them all out, but here’s a shot:

  • A single source of truth for design. With all that we use to communicate (email, Hipchat, Jira, etc.) it’s nice to have a place to go and be 100% sure about what an element should look and behave like.

  • Everything is on brand. Especially important when working with a white label product, like we do.

  • Consistent designs and layouts. No more “what color should this button be” or “how much spacing should this have”.

  • Reusable patterns means faster design and implementation (not to mention a lot cleaner code).

  • Easier for product managers to take stock in all the components we currently have and scope out anything we need.

 
We’re not designing pages, we’re designing systems of components.
— Stephen Hay
pattern-library-elements.png
pattern-library-series.png