Creating the
Role
When
Lead Designer
Mar 2022 - Present
Apps & skills
Design system foundations, Figma component & interaction design & ZeroHeight documentation
Summary
BCA had an existing UI library that had been inconsistently applied across products. Now that the business had undergone a digital rebrand it was time to create a design system that truly embodied the new creative direction. Perhaps more importantly it also needed to be built upon solid and principled foundations that would help drive consistency throughout its application and also provide flexibility for the business to rapidly evolve in the future.
BCA would be the first to make use of the design system but the longterm goal was also to quickly be able to scale and create themes for any other brand or partnership within the group.
Research
Our lead front-end engineer, another designer and myself began by studying some of the most popular and highly regarded design systems. We read countless articles about tokenisation, components and also ones that focussed on team processes around the creation and maintenance of them and all the problems and learnings along the way.
We had regular open calls and catchups discussing the various approaches and comparing them back to BCA’s existing UI library which the new design system and components would eventually replace.
Just some of the main design systems we studied
Most design systems are broken down into very similar parts. Possibly the most important of them all are the core design principles - the foundations. We knew this was one of the main aspects lacking from the previous but it was also going to be essential to achieve theming.
Components, Patterns and their Guidelines would all be vital tools that our design teams will rely on to be able to build out consistent, tested experiences faster. Lastly, we also needed to house the new digital Brand guidelines to not only aid internal teams but also external agencies for any material required in the future.
Design System
Like all established design systems there also needs to be a central location to house all these standards and we chose ZeroHeight to help us document everything faster. design.bca.com will become the single source of truth for all aspects of our design system, bringing together our tool kit and instructions for all our designers, engineers, product and marketing teams.
Foundations
& tokens
One of the main requirements for us having a design system was to create a consistent visual language across our products and to achieve this we need firm principled foundations for everything to be built upon. The foundations consisted of four key design areas.
Colour palettes have always been essential for branding but they truly are the basis for everything on a design system. The new creative direction contained a mix of previous BCA brand colours and some new ones. We needed to align these colours to work together harmoniously and to also set out a colour system that would work for any theme in the future.
We worked closely with our lead engineer to establish a palette that aligned our colour through common contrast increments, this was also crucial for guaranteeing that we meet our accessibility standards. We also agreed on a naming convention and an approach that would help drive consistency and best practise across themes whilst also allowing for flexibility to have a wider more custom colour palette to achieve some BCA specific branding.
The core tokenised colour palette that would be essential for all themes consisted of neutral, primary and semantic colours. These would drive all base components.
BCA had existing typography styles used across web and app but now was the time to establish a type scale that was holistically thought through and to also incorporate learnings from the previous.
The existing type styles didn’t cater for tablet/mid size screens and they also had never implemented a type scale built using a base font size and scale ratio.
Like with all our decisions made we compared against many well established design systems and took aspects from multiple to create a system that worked for us and our designers. We were forever testing and refining ideas by seeing theme in practice in real pages and journeys to ensure it met our product needs.
The last two parts of our foundations allow us to bring colour and typography together within layouts in a consistent manner.
Our 6x breakpoint responsive grid allowed us to cater for all screen sizes and for extra precision we also opted to follow a 4px vertical grid not just for precision over text but for all elements and components to adhere to.
To ensure components and layouts slotted within our 4px vertical grid we created a library of spacing tokens that would be applied to spacing, padding and corner radii. Using these within layouts, combined with typography (which their line heights also fit our 4px vertical grid) ensured that we’d drive a consistent spacing scale that ensured content and UI was easy to digest, naturally laid out and met our brand visual approach.
Components & guidelines
The current UI Library had some very BCA specific components that were not likely to be necessary for use within other themes so our next goal was to focus on the core components that all themes would likely require and then separate the more customised components and tokens that were specific to the BCA theme.
We took what we considered were the core components from the existing UI library and compared them against other design systems to establish categorisation and to also confirm the final list of core components. We then, along with the business created a priority order and roadmap plan for when we’d aim to have the core components ready by. During the planning stage we also shaped and committed to a design process that every component would follow.
Component design process
As we embarked on the component design process we also onboarded other designers to assist. This helped to not only get input and feedback from peers but to also get further perspective around onboarding and learning the foundations.
Like every stage of constructing the design system we always lead with research and when it comes to components there are multiple layers of design - first there’s the obvious; how it looks visually, next there’s interaction design and establishing what motion styles would be fitting for BCA. Then there’s tokenisation - all the core components need to work across all themes so therefore need to use colour tokens for specific uses (i.e. call to action, selects etc). Lastly there’s also deciding the best approach to building them in Figma. This part has been ongoing as we always like to incorporate the latest Figma component features - like variables and modes that are currently in beta.
After the core components were completed we focussed upon the more BCA specific components, these utilised the wider colour palette and in the case of some of the content components were more bespoke in terms of branding and interaction.
Launch & maintenance
The initial areas of the UK site chosen to fully adopt the new design system was their new live auctions experience (that I was also designing) and their marketing CMS driven pages. The live auction journey was a great opportunity to stress test the core components and the CMS driven pages made use of the more BCA specific components.
Although it was a lot to take on both the design system and a large redesign project it was very beneficial to be able to test design system components within layouts and start to define patterns. It was also a great opportunity to get components tested with customers. Any identified improvements fed into our maintenance backlog.
We are currently in the process of onboarding further designers and engineers to start incorporating the design system foundations and components within further areas of the site and also other products within BCA. It’s been a great opportunity to ramp up exposure to the design system and increase its adoption but also to gain further feedback and to be able to incorporate learnings and tweaks to cover wider use cases. This is really just the beginning of the BCA Design System.