Info
A design system is an assortment of reusable UI building blocks, influenced by rules and processes, that are available to the design and development team in order to design and build.
At the heart of the system is the pattern library. I created it using Figma and their library feature. This library houses all the building blocks that allow us to design in a coherent, consistent and nimble way. The library is most effective when those building blocks are replicated in code, this reduces the time to build as well providing consistency between designs and final product.
The design system is more than just a library of UI building blocks. It requires getting everyone on board, not just your design team. Standardising the tools to use, clear communication and working collaboratively as a product team are just as important.
Instead of starting from scratch, design systems allow designers to pick and choose from a single collection of consistent and reusable components.The design system’s primary purpose is to provide the necessary building blocks required to put together a web design. A design system can be something as simple as a small selection of UI patterns, or something as extensive as a collection of UI components, typography, templates, code snippets, and brand guidelines.
A little bit of info…
Why did we need a design system?
If you’re looking at Airbnb screens, Mailchimp’s typography, or Google Android’s user interfaces, it’s easy to forget that they all follow specific guidelines. The best design systems are well-defined, follow a set of rules and design principles, and are barely perceptible as we navigate through them. Here’s a rundown of everything that needs to be considered in a design system.
Over the years Tesco’s range of apps all followed separate design toolkits, UX patterns and guidelines. Design teams working in silos on different apps and none of them following the same patterns or design tool kit.
With the redesign and re-platform of the Tesco Insurance products, this was an opportunity to create a system and pattern library that we could use on all existing and future apps.
Creating the system would allow the team to be more effective and efficient in any work-flow. It would allow everyone to move faster and focus on solutions to problems, not the pixels. No more redesigning a product tile or changing the colour of the button, as we would already have establish these components and elements in our pattern library.
Design
How did I manage to create such a huge design system?
We used Figma’s powerful and effective library feature to create the pattern libraries. We based our components and elements on native first, looking at all existing UI elements from IOS and Android, then incorporated it with Tesco’s digital design language. I also made sure that all components and elements we created considered accessibility before they made it into the pattern library.
I shared the pattern libraries with the developers; I had to ensure that a component in design is the same when built.
The pattern libraries could only be saved by one members of the team. This was to prevent other members of the team making changes that could ultimately affect the libraries. I worked in different files and send those files to QA.
Aspects of the pattern libraries are based on Atomic design. This atomic approach allows the design team to focus on components and elements that users interact with and how they fit together as a whole. The system involved more than just extensive pattern libraries and a well defined JIRA board. I had 3 other factors that helped me:
1. Communication.
I had to ensure there was clear and concise communication between design and development. I made sure there was a design presence at every stand up and developer meeting, and no working in siloed meetings when it come to delivery. With the design team working more closely with developers it ensured that the pattern library and designs were realistic and feasible. It also ensured that the final product looked and functioned as intended. If the pattern library wasn’t working for a particular problem the design team would convene together to help solve the issue.
2. Design simple and flexible.
By thinking mobile first it enabled me to design components and elements quicker and in their simplest form. I would then improve upon them depending on where and how they were being used. As Tesco is an international brand used by a range of different users, I had to ensure that the components allowed for spacing, truncating and growing text sizes for accessibility. I also made a conscious decision that every component and element I made had to be reusable, fundamentally speeding up our design and delivery process.
3. Defined goals
It was important for the team to have clear-cut measurable goals. I had 3 key objectives; re-platform the Tesco Insurance product, design mobile first and align designs with the updated Tesco brand. This allowed the team to establish standards and evaluate the performance.
Design
How did it work for everyone?
The library has Tesco’s design language and patterns at it’s core. The system encourages the re-use of components and elements when constructing pages or products. By encouraging the reuse of components and elements it resulted in reduced duplication, greater design consistency and fewer designs coming back for amends and checks.
I made a conscious decision that every component and element I made had to be reusable, fundamentally speeding up our design and delivery process. The symbols and overrides feature encouraged the re-use of components. This meant that I had fewer symbols that were similar and gave me more power and control over individual instances.
I built in the padding and margin, following a 8px grid, to all components and elements within the system. Doing this made the design elements stackable, creating a brick style structure.
Design
The benefits…
With an array of different apps to support, I had to ensure that the system and library is scalable.
I had to ensure that the design system is flexible enough to withstand the numerous edge-cases with e-commerce as well as being malleable enough to work across tablet and mobile apps.
Going forward, all future apps would use the same design system and code base as the new design system. The biggest challenge lies with moving existing website and apps over to the same design system and code base.
Design
How we work together..
Figma was the perfect place for the team to have up-to-date designs. It acted as a single source of truth for final designs that had been through grooming, and allowed developers to build the front end to accurate specifications. All work in Figma had to be sectioned and tagged so it could be discoverable by the whole team. The notes tool also helped the team work closely with our outsourced engineers, by communicating directly on the designs.
We introduced weekly design peer reviews for the team to share designs at any stage in it’s process. The idea for the reviews was to reinforce design solutions, ensure that the design system was being used and if required, provide a clear route to an improved solution. The reviews acted as an opportunity to see how effective the system was and if any elements or components needed to be added or improved upon.
Design
Conclusion
The design system I created at RSA for Tesco paved the way for more effective collaboration between designers and developers, which ultimately enabled us to deliver such an elegant solution as well as a greater level of design consistency across our apps.
The system and pattern library is changing the way we design, making the team more aware of the problems they’re trying to solve. It has demonstrated the benefits of having clear communication, objectives and keeping designs simple.
The system is far from being perfect, but I am extremely proud of how far it’s come along. The team is continuously reviewing it’s efficacy by getting it into users hands, allowing research and testing to feedback and assess its benefits and identify improvements.
