Playbook: Improving Our UX Design Efficiency

Playbook
Recently Centresource published our first open source tool to the world. Please welcome Playbook. Playbook is a Yeoman generator to get you building interfaces faster. Jekyll is included for static site generation. Bourbon, Neat & Bitters are included to help you write CSS faster.

The goal for Playbook was to help the Centresource UX team be more productive faster. Every product that we design needs concept validation at some level. At times that’s accomplished with something as simple as a series of low-fidelity wireframe sketches on paper; othertimes, however, we want to convey user flows in the browser. Enter Playbook.

Playbook allows the Centresource UX team to quickly and efficiently build out clickable HTML prototypes. Our prototypes will consist of varying levels of polished style depending on which stage of the project we are in. Centresource offers three levels of prototypes:

  • Flat Prototypes
  • HTML Prototypes
  • Production Prototypes

Flat Prototypes

Flat prototypes are just that, flat. They consist of hand drawn sketches or Photoshop designs that we string together using apps like Flinto or InVision.

HTML Prototypes

HTML prototypes are clickable prototypes that we can have users interact with inside their browsers. We typically forgo focusing on aesthetic design and rely heavily on the existing styles of Bitters. The idea is to focus on how the product works and validate user flows, before spending time on the way the product looks.

Production Prototypes

Our production prototypes are the most production-ready versions of prototypes we build. The majority of the time we build production prototypes for clients that have validated their idea already or have gone through a flat or HTML prototype with Centresource.

With production prototypes, we build all of the front end markup, styles and interaction JavaScript that a product will need. At the end of building a produciton prototype, we have a front end code base that is ready to be integrated into a framework. Many times it’s handed off to the Centresource production team to build an Ember.js or Ruby on Rails app in-house. Other times we hand of the production prototype to a client’s in-house development team — to build a .NET app for example.

Open Sourcing

While building a tool like Playbook benefits Centresource, we did not want to stop there. Centresource’s development team makes heavy use of many great open source tools, so it only felt right to share our tools with the open source community as well.

Playbook is available via the npm website and can be installed like all other Yeoman generators: npm install -g generator-playbook. For more information, visit the Playbook website.

Share This