Back to portfolio

Beauhurst's design system

When I joined Beauhurst, I was the only UX designer. While the platform didn't look bad, it had inconsistencies that had come about because developers would build each page or component from scratch. This meant that small consistencies were missing, and the platform didn't look as professional as it could. We ask our subscribers to pay thousands of pounds for access to our data - looking professional is important to establish trust.

How big was the problem?

One of the first things I pushed for when I joined the company was to create a style guide. Luckily, there was a front-end developer at the company already who was very passionate about the idea of a style guide, so we worked together to create one.

The first thing I did was inventory the entire platform interface. I took screenshots of every component on the platform. I put these into folders and organised them by their types. For example, I had "Cards", "Drop-downs", and "Tables" as categories, as those are all very common in the Beauhurst platform. In the end, the folder contained over 200 screenshots.

I pulled these screenshots into Sketch and arranged them into logical groups based on their types. This helped to see the extent of the inconsistencies, but it also meant I could easily show them to people. Seeing all of those inconsistencies visually grouped up had a big effect on our manager, and he signed off on the style guide project, even though he knew it would take months to complete. To give an idea of the problem, there were 18 different styles for buttons across the platform, when we only needed one with some variations.

Here's an example of one of the visually grouped Sketch files. It has been reorganised visually for this case study.

A new style

The front-end developer and I worked closely together to create a new style for the platform that would work for all of the situations I had found in my interface inventory. Here's one example where I created a mockup, with spacing markers, to show the front-end developer how panels should look:

While the developer wrote HTML and CSS, I worked with a graphic designer in marketing to bring our brand colours to the platform. Up to this point, developers would find a colour close enough to a brand colour, and leave it at that. We wanted to make all colour use on the platform consistent, and true to our brand. We needed a palette that would be very flexible, with tints and shades for each standard brand colour.

I put together different colour palette options and sent them to the graphic designer. The colours are stacked this way to show the relative brightness of the colour options. The graphic designer tweaked one of these options, and that's what we put into the style guide.

Next, the front-end developer built the style guide into the platform and made it accessible to everyone in the company. We wanted a living style guide with code samples, to help developers write their code faster. We also wanted a place where other people in the company could see what was possible on the platform without having to ask a developer to show them. As the developer built the style guide and decisions had to be made, I provided design input.

Here's what the "Controls" page of the finished style guide looks like:

Outcomes

After the style guide was ready, the front-end developer updated each page on the platform to bring it in line with the style guide. I provided input whenever they ran into a problem that we hadn't thought about beforehand. This design pass has seen a big improvement to the overall look, feel, and importantly the consistency of the website, and it looks a lot more professional.

Our direct competitors generally don't have very attractive platforms, since appearance can be a lower priority in data-heavy enterprise software. Beauhurst was already industry leading in this sense when I joined, but creating a style guide, and sticking to it, has only increased that lead. We often get feedback from subscribers to say that the platform looks great and is easy to use.

Our developers now use the style guide for all of the pages they build. They are able to develop faster, and be more consistent, with less effort. It's also heart-warming to see people outside of the development team use the colour tool we built, when they need to get one of our brand colours:

Finally, I created Sketch components based on our style guide components, so that creating mockups that would be consistent with the platform was also easy, and efficient.

Back to portfolio