Designing a UI style guide for RateSetter

Bringing consistency across all products and improving UX for customer satisfaction

High fidelity style guide designs

RateSetter had recently rebranded and relaunched their website. A user interface style guide was required to improve the customer experience of the site and ensure visual consistency.

This project would further permit a greater degree of efficiency when designing or coding web pages. With people in different countries working on RateSetter’s website it was essential to have a single source of truth. Utilising Adobe XD, I was able to quickly create and share a catalogue of components, visual assets and rules on spacing and sizes.

The problem

RateSetter employs Design and Development teams in different countries. These remote teams lacked a main source of centralised assets for their work. With a range of styles and rules being employed by each team, the clarity of the site was inconsistent and, in some cases confusing to use. The intention of the style guide was to align the output of the teams, enabling designers to work with predefined elements, and developers to create CSS versions of components and their behaviours.

Style guide flow chart

I created a flow chart of the guide to help me plan the structure and the groupings of the components. I was also able to share the plan with all concerned to ensure all components and patterns were accounted for.

Challenge approach

The users of the guide would predominantly be designers and developers, along with product managers and team leaders who were required to have a basic understanding of the visual assets and rules. These individuals were already familiar with the house styles due to having worked on previous projects, but the lack of a centralised guide meant that some elements would occasionally be created ‘on the fly’, leading to visual and behavioural inconsistencies.

Having initiated this project, I contacted the developers in RateSetter’s Ukrainian office, with members of the Developer team in the UK to act as consultants for the guide. Together, we undertook rules and assets that would work across all web page layouts, regardless of the location of the user.

My role was to construct the guide and define the components in all their possible states. The layout needed to be inherently easy for the designers to understand and work with.

Issues encountered

As this project was one I had initiated there wasn’t a deadline to work towards, but the importance of the project meant that a quick delivery was necessary. Working with remote teams proved challenging due to the different time zones causing delays on progress, but I was able to focus on different areas of the guide whilst awaiting feedback.

This project was different and unique for me in that I was the main stakeholder. It was my responsibility to manage the project and obtain sign-off from higher level colleagues when ready to launch.

I discovered the developers had already created a basic style guide in CSS. Having constructed the new RateSetter website recently, it had been necessary for them to define common components. Their work would be subject to both my and my team of designers’ evaluation, then recreated in the UI guide.

Adaptive table designs

Detailed graphs and tables are a common but problematic feature on the RateSetter website. Undertaking this project helped to solve the problem of how these components would scale on different screen sizes.

What was accomplished

Having researched existing design systems from Atlassian, Uber, Tailwind and Ant as a basis for the RateSetter guide, my team and I concluded we would use the Ant design system as it was quite similar to our current style, and it would be easier for the developers to edit their existing code.

We were able to construct the assets quickly and create alternative, more basic variants for the marketing emails. My designers and I put together page layouts with varying content to ensure the styles looked native to the RateSetter experience. As a final step in the project, senior colleagues were invited to review the layouts and ask questions. This meant making minor adjustments to the designs but gaining the backing of these colleagues was a necessary step prior to the work going live.

On the conclusion of the project, it was extremely rewarding to see the difference the project it had made to the design and experience of the RateSetter website. Additionally, this project also helped the designers solve problems with greater ease as they could refer to the guide for ideas and possible solutions.

The project also encouraged customer conversion as it added clarity to the on-boarding process.

B2B/B2C presentation pack