Back to portfolio

Beauhurst's design system

Challenge:Get buy-in for a design system, create it, and have it adopted at a company that does not already have one.

My role:Interface inventory, visual design to introduce consistency, input on development.

Result:A design system for the Beauhurst platform that has been adopted outside of the development team as well as inside it.

Reasons I'm proud of this project:

  1. Through my work in showing the inconsistency in the current platform design language, I showed the need, and got buy-in for, a design system.
  2. I and one other person (A front-end developer) designed and built a design system for a large platform in a total of six months.
  3. I see people around the company using the design system for non-development work.
  4. The platform has mostly been updated to match the design system, and is now far more consistent than it was.

When I joined Beauhurst as the only designer, I noticed lots of small inconsistencies in the platform. I pushed, along with the front-end developer, to create a style guide. The first thing I did was an interface inventory: I gathered every instance of each element and put them all in big canvases in Sketch.

The front-end developer and I worked closely together to create a new, more consistent style for each element I had uncovered. Here's a mockup I created for the front-end developer, with spacing included. It shows a panel, a table, and a tooltip.

Next I worked with the graphic designer in the marketing department to come up with a colour scheme for the platform. We needed several tints and shades for each brand colour, so I went through a few iterations.

I provided design input as the front-end developer build the style guide section of the platform. In all, the project took 6 months.

The style guide is now in heavy use by the developers. One page that has seen a lot of use outside of the development department is the colour page. It includes colour codes for all of the tints and shades, and makes it very easy for others to use our brand colours.

Back to portfolio