Three’s design system.
Three have been using the same systems since they launched in 2003, These have become inadequate both for customers and the business goals. So in 2017 Three have initiated a massive technology stack refresh.
Included in this was updating the website replacing old code and functionality.
My role to was create design system from scratch for Three upon which new designs and journeys would be build upon, allowing Three to build best in class experiences as well as improve the sites’s capabilities.
Best practice principles
Our design system or “Atomic Toolkit” (ATK) as it came to be known. was lead by a small team: a lead user experience designer, lead developer and myself as lead interface and graphic designer.
It was agreed early almost without saying that we would adhere to best practice web design principles and most especially inclusive design ideals. This meant we would be adhering to the Web Content Accessibility Guidelines to a AA standard, This helped to inform our decisions without the complications of “opinions”
We were also working alongside a selection of internal stakeholders as well as 3rd parties so it was vitally important that they all understood these principles. It was a challenge at times and we learnt alot as we progressed and discovered who could keep up and come along for the ride.
Brand
It was important that these rules were defined as initially this wasn’t planned to be a brand refresh. Everything had to align with our current brand rules. But as our brand guidelines were written many years go some of the rules didn’t align with our principles of the ATK.
I liaised with the brand team regular to ensure they understood our recommendations and were happy with the changes. Most of it just meant small changes ensuring our colour palette was AA and we used consistent text sizing
Led workshops on exploring pattern designs and variants.
Helped write detailed guides on how to use each pattern.
Testing
Due to the pace of the project in the early stages we couldn’t always do as much testing as we would of preferred but we found way to mitigate that gap by utilising industry best practices, especially where testing was already documented on the best way to display form or common customer expectations.
Also as the team all came from working on Three’s current site we had a wealth of knowledge and used previous testing we had done, along with access to analytics software.
Later in the process we more access to carry out our own testing, prototyping, 1 click tests and card sorting techniques.
Education and guidance
Internally it was important that this new system was not seen as competition to employees working on the live stack.
Myself and the team spent time with our related disciplines as well as outside to educate the wider business.
I have also helped mentor the design teams around the principles of the ATK allowing them to make use of them while both old site and new site will remain in co-existence. This has lead to some great improvements to design consistently as well as Accessible standards
Current status
Three’s design system is fully integrated into the digital departments work flows and has the support of the wider leadership. Has improved consistency, Accessibility scores and time to delivery enabling all experiences and users top benefit.
It has gone through a brand refresh since the above images, which was done much faster due to solid libraries and components.
Via lighthouse we have seen an increase in our Accessibility scores from high 70’s into the low 90’s due to use of AA components
It has been integrated into Three’s Mobile app aswell.