Development got faster at FastPay with a style guide

A style guide helped move development along when it spoke the developers’ language

Today we talk about design systems, but back in 2016 we had style guides. Which are kind of like baby design systems. At FastPay we needed a style guide to keep developers on track without re-inventing the wheel on a daily basis, so I worked with developers and marketing to craft something simple for the development team of 15 or so to use.

Because the company’s software was built in Angular, I built out the style guide myself in Angular so there would not be a need to translate plain HTML (or worse, flat images) to Angular. They could simply copy and paste the code.

As a new feature was being developed by the product team, once we go to the point where we knew what it would look like I would add the component to the style guide before the first meeting to scope out the story.

In addition to the guidelines and components for the developers, there was also a section on written style. I also provided the users personas here for reference.

The FastPay style guide I created is still available online. I’ve also added a screenshot of the component section below.

Image: Unsplash, Guillaume Jaillet