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
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 aswell 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
The project has had some delays but it part of it has launched for new customers and migration of older stack customer will take place in 2021 along with the remaining part of the site.
The ATK is too large to be presented here well, but i am happy to show it upon request.