Burberry’s Design System
Behind the scenes
By Inês Margarido and Patrícia Murta, Digital Product Designers at Burberry.
With a rich history spanning over 167 years, Burberry is renowned for iconic pieces like the Trench Coat and the Cashmere Check Scarf. In 2021, the appointment of Daniel Lee as creative director marked a significant shift in the brand’s direction, welcoming a new era of innovation and modern expression. To align with this transformation, Burberry undertook a rebranding initiative, unveiling a fresh visual identity that embraced the brand’s heritage while incorporating contemporary elements.
A key component of this rebrand was a thorough revamp of the brand’s e-commerce website, ensuring seamless integration with the new visual language and providing a consistent and engaging shopping experience for Burberry’s global clientele. This project presented a valuable opportunity for the design team to streamline its workflows, reorganise assets, and enhance collaboration.
This article explores the intricacies of developing and implementing a robust design system within a large organisation, highlighting the challenges, opportunities, and transformative impact on Burberry’s digital landscape.
The Rebrand
The rebrand revitalised the brand’s visual identity, restoring the heritage mark’s serif font, reimagined the iconic check pattern, and reintroduced the Equestrian Knight Design (EKD) with its “Prorsum” flag, symbolising the brand’s unwavering spirit of progress. In a bold move, Burberry adopted a vibrant shade of blue as its new brand colour, reflecting its dynamic and forward-thinking approach.
This spirit of innovation extended to the brand’s digital presence, warranting a refresh of its e-commerce website. The new website embodies the brand’s core values, combining utility and simplicity with a touch of playfulness and experimentation. It seamlessly integrates with the brand’s new visual identity, ensuring a consistent and engaging shopping experience for Burberry’s global audience.
To achieve this seamless integration and maintain consistency across all digital platforms, we implemented a robust and functional design system. This centralised library serves as source of truth for designers, developers, and managers, enabling efficient collaboration and ensuring that the brand’s unique identity shines through in every digital touchpoint.
Improved Website Areas
Our main navigation remains at the top of the pages, but it’s more straightforward, functional and organised than before, with visual elements nodding to Burberry’s refreshed brand identity. Users can still explore products by gender or category and unearth exciting product launches, runway presentations and campaigns. These editorial pages bring the brand to life, seamlessly blending user interface design and content.
Imagery is now the focal point of several pages, creating rhythm, supporting richer storytelling and giving the deserved attention to our products. Our blue colour carefully highlights specific elements, showing they are interactive by bringing attention to them.
On the pages where we list our products, image carousels allow customers to view each product’s variations, including the assortment of colours and sizes. To help users find what they are looking for on this extensive list of products, we reorganised filters, locating them and sort functionality in the side panel. Also, the exposed filters are now placed at the top of the page for quick access to main categories.
Product pages now offer upgraded information for size, fit, fabric and care so customers can make more informed choices when purchasing our luxury products. An image gallery with zoom functionality has also been introduced, offering an enhanced way for our customers to explore finer product details.
Besides a visual rebrand, our company also had the perfect opportunity to rethink working methods. As a collaborative design team, we took this time to create a functional design system, which was crucial to doing all these changes efficiently and keeping consistency.
Design Systems for Large Companies
Back in 2021 it was already clear that we needed to work with libraries, a single place where all components would belong and could be reused throughout different files and projects.
However, as different design teams started to grow and business needs were evolving, chaos began. We had too many different libraries. This led to components, text styles and colours being duplicated in multiple places. As a result, this has led to a lack of documentation and has fostered the persistence of outdated components within certain libraries. Design teams initially began detaching instances, eventually leading to a gradual disuse of those same libraries.
Back then, nobody was in charge of keeping track of and organising these libraries, ensuring we stayed up-to-date with the latest features on Figma or the most updated components we were using in production.
In 2022, this all changed. We began dedicating more time to go through each single component that we were using across all different platforms and grouping them all into a single place. This was when we created Thomas Design System.
This was a huge step for us. In a company as big as Burberry, a Design System definitely helps and enhances communication and collaboration between different teams and ensures that we are all on the same page.
We’ve created a single Figma file where all our different text styles, colours, grids, spacings, components and guidelines are documented. As you can imagine, this was not an easy task. We asked all 20+ of our designers to begin using this new system on every project they started to work on. Consequently, we scheduled a series of workshops to make sure that we were all aligned. We held multiple workshops that improved knowledge sharing. Additionally, educational pieces around Figma’s new features that were not being used at the time, such as components, variants and auto layout, were introduced to the whole team.
Nova Design System
As mentioned, 2023 was also the year that Burberry rebranded its identity: a new Creative Director, collections, logo, colours and components library. The refreshed design system, ‘Nova’, takes its name from a brightly shining newborn star.
This time around, we not only wanted to change and store our patterns, but we also wanted to create new ones from scratch. As a design team, our focus was to offer a unique experience for our customers. Our intention was to bring a fresh look to our e-commerce platform and ensure we reflect the brand language throughout our customer flows.
We encouraged the team to play and experiment without the constraints of the software. It took almost a year to finalise this project and showcase the brand language to the world. When the time came to deliver, we discovered we had crafted a streamlined style guide — with fewer components and more concise documentation.
To bring our design system back to life, this time, we worked as a large team with a rejuvenated energy. It was a chance to increase team collaboration, having multiple people working alongside one another with one common goal. Weekly sessions and different workshops took place and helped us, as a whole, to stay aligned with new features and the way we wanted to build our new system. At that moment, we also realised the structure might need some adjustments to enhance efficiency.
We’ve concluded that our requirements extend beyond a centralised Design System for general components and guidelines. In addition to this comprehensive framework, we recognise the necessity for smaller libraries dedicated to more specific components. Given our ongoing work across the website, such as Product Listing Page, Product Description Page, Checkout, Homepage, Storytelling pages, and more, we must establish separate files housing components tailored to these specific areas. This approach ensures a more efficient, targeted management of the diverse elements utilised throughout the site.
In our design system teamwork, we enthusiastically added new components, reviewed old ones, and meticulously reviewed our documentation. The collective dedication of our team ensured a seamless integration of elements while maintaining a streamlined, up-to-date system.
Additionally, recognising the pivotal role of collaboration between design and development teams, we proactively initiated dialogues with developers across various projects. We aimed to foster improved communication channels and ensure a harmonised strategy for implementing the design system on their end. By facilitating these cross-team discussions, we ensured that design and development seamlessly aligned, fostering consistency and cohesion throughout the system.
Wrap-up
A lot has changed from having a style guide with few components and lacking documentation to having a complex and well-documented Design System. It was a challenge creating, applying and maintaining it, considering the size of our team. But the effort was worth it!
Now that our files are more organised and use components, if we need to change something on the website, it’s much easier and quicker for our team to modify and update components in the design files. This also means that whenever we start designing a new page or changing one that already exists, we don’t need to create all components from scratch. The best part? The design team can focus on other important things, such as:
- Spending more time on research
- Designing more solutions for new features
- Testing if our current solutions are the best fit
At Burberry, we value collaboration and teamwork in the delivery of high-quality products. So, involving each team member in this change process and receiving their contributions was the key to making everyone feel comfortable using ‘Nova’. We now have two designers managing all modifications, which means no more components are depreciated, outdated, or duplicated.
We are committed to keeping this new way of working, keeping our Design System updated, and finding ways to improve it and evolve.
If this process sounded familiar to you, let us know what the challenges were for your team, what you did differently, and what the most important takeaway was.
Soon, we’ll share how new Figma features also allowed us to optimise complex old components to reduce the number of variants. So stay tuned!
