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.

Thanks to everyone who joined us for the Centresource Spring Mixer on March 27. A good time was had by all! We welcomed over 200 people to the house to join us to celebrate all the good things going on in Germantown. We were thrilled to see old friends and make so many new ones. This is the sixth year of our mixers. We really appreciate those folks that keep coming year after year to touch base and hear about what’s going on at Centresource.

A special thanks to two fine organizations, the Skillery and Nibletz. They both played a huge role in making this event such a huge success. We are big fans of these two organizations and admire the difference they are making in our community. We look forward to partnering with them again soon.

We would also like to thank our friends at 312 Pizza Company and Big Al’s Deli for providing such delicious food for our event. Germantown is growing every day and we are excited that they are part of the neighborhood. We hope the next time you are in our neighborhood, you will stop by and eat at one of their restaurants.

The Centresource video team captured the fun we had and put this video together to celebrate the Spring Mixer. We hope you enjoy it as much we have. Thanks again for everyone that joined us, it’s always great to see you! Hope everyone can join us for our Summer Mixer on Thursday June 19th. Hopefully by then we will be able to pick up all of the glitter and stars that are covering our office, the lab and our parking lot. But it’s not likely.

The Centresource office recently made a collective shift over to Slack, an extensive messaging application that just launched in February of this year. We’d previously relied on a handful of tools and good ol’ email to keep people in the know, keep projects moving ahead, keep track of decisions made, and so on. Despite our best efforts, however, this cobbled approach left a lot to be desired: pieces of information slipped between cracks, stakeholders weren’t getting cc’d, and knowledge was getting siloed. Simply put, it kinda sucked.

What we were missing was a single gathering point that allowed us to collate our individual notes, project documents, off the cuff questions and daily communications in an organized and structured way. Enter Slack.

Why it Works

I think a key step towards success from our end was the almost wholesale adoption of the application by our office in a short amount of time. We were asked by senior management to give it a thorough test run and people happily complied. We had fun kicking the tires (Slack is a good-looking app) and we were really pleased to see how it could handle our varied needs.

What stood out to most of us immediately was the categorization of communication, the search feature and the multitude of 3rd party integrations — all creating a complete (and pretty kitted-out) dashboard.

Communication Categorization

As opposed to using several tools to handle the sliding scale of communication every office has, Slack provides three distinct tiers right out of the box. These delineations are great for funneling information to the proper destinations, that can be parsed as needed.

  • Direct Messages: for the wide range of person-to-person conversations that we all have every day

  • Private Groups: for conversations among a specific group of people with invite-only permission. We use private groups on a project basis, bringing in the team members directly working on the project

  • Channels: for company wide conversations that users can opt in or out of. We have a general channel that’s reserved for must-know information and company-wide announcements or reminders. We also have channels tailored to the various departments and points of interest (UX, Dev, Content, etc.) that anyone can hop into

You can also upload a file, create a text snippet or create a category-specific posts (complete with nifty markdown) within any of the messaging tiers.

Search

Slack allows you to search for a term across entire conversation chains. You can then filter the results by a specific user, channel or group. The amount of time spent hunting down an comment or document is greatly reduced, making this feature fantastic for increased productivity. And the search isn’t restricted to Slack-specific content:

Slack indexes the contents of every file, whether you upload them directly or through integrations. That means you can search inside Word docs, Google Docs, PDFs, Photoshop files, commit messages — anything you add to Slack.

(from slack.com)

Which brings me to the next great feature…

Integrations

The broad range of 3rd party tools that integrate with Slack is really impressive: Trello, Google Drive, Google Hangouts, MailChimp, Pivotal Tracker, GitHub… the list goes on.

The most helpful integration, to my mind, is Trello (a great project management application, by the way). By linking a project’s Trello board to the correlating project-specific private group in Slack, we get alerts any time a comment is made or an action is taken in Trello (by the client or one of our co-workers). We maintain the internal conversation around any project in Slack, while incorporating the client-facing conversations in the communication thread for easy reference. It’s comprehensive and awesome.

Slack is constantly adding to the list of integrations and is looking to its users to help them prioritize which 3rd party tools should be brought in next.

The benefits of Slack were clear within the first day of our testing and our adoption rate was practically breakneck. Sure, you’re still going to need email to communicate with clients, but Slack has become pretty essential to the structure and organization of our interoffice workflow.

Do you have a favorite work organization or management tool in your arsenal? Tell us about it in the comments!