A retail innovator takes a design leap forward

The Very Group is a unique digital business that combines multi-category retail and flexible payments.  

The company draws upon a rich heritage of commerce innovation. Some of its catalogue brands can trace their roots to the late 19th and early 20th centuries, when mail-order was the cutting edge of retail. Some of its other brands were at the forefront of home shopping in the 1930s and the early days of ecommerce in the 1990s. 

In 2019, the company rebranded from Shop Direct as The Very Group to reflect their focus on creating exceptional experiences for millions of customers across the UK and Ireland. 

The Very Group’s existing web platform, ATG, is approaching end of life status after well over a decade in the field. This has led to an extensive replatforming program, as TVG have sought to replace their existing web solution with a modern, flexible, microservice-based platform.

Replatforming was also viewed as an ideal opportunity to review and optimize the full design lifecycle, and the need for a comprehensive end-to-end design system was quickly identified.

The new platform, named Skyscape, brings together purpose-built, in-house services with best-in-class third-party solutions from the likes of Amplience, who provide TVG’s brand new content management system. Figma, the market leading collaborative design tool for building meaningful products, was selected as the design tool of choice.

Setting up a design system team to serve the design community and end users

It’s fair to say that The Very Group had only really dipped their toes into the ocean that is design systems up to this point, with exploration and initial setup limited to a side-of-desk labor of love for a few committed designers and developers. In the main, there was a high level of inconsistency and very little reusability across the design ecosystem.

The introduction of a focused, cross-functional design system team — made up of experienced developers, testers and product people from TVG, plus designers with significant, real-world design system expertise from Valtech — aimed to change all that.

As well as supporting the wider migration efforts, they were tasked with building a robust and comprehensive design system, fit for the future but also able to add value from the outset, and to embed that new system into the fabric of the business. No small task!

Already named Fuse in its previous incarnation, TVG’s design system really came into being in the spring of 2022 with the creation of this new team and the business’s determination to have a design system at the heart of its new platform.

Building a design system to suit TVG’s needs

Very.co.uk is The Very Group’s flagship brand, serving millions of families with its website and dedicated app. However, it’s not their only brand, joined in the portfolio by Littlewoods.com and Very Ireland. This meant that a multi-brand, multi-channel, design system approach was essential.

Another fundamental requirement was for the design system to support, if not lay the foundations for, the company’s mission for all of its websites and apps to be fully accessible to WCAG AA standards by the completion of platform migration. This came off the back of an accessibility review of the Very website, conducted by the RNIB, which flagged a range of accessibility issues that the wider business was keen to resolve as quickly as possible.

For such a transformational project, the right team needs to come together with a shared vision and passion for success.

A blended team

Meeting this challenge head on were a blended TVG and Valtech team, designed to include all of the core skills and experience required to create a design system that met TVG’s needs, including designers, developers, QA testers, delivery and product leads.

The potent formula of Valtech’s extensive design system, accessibility and content know-how, plus TVG’s years of technical, business and customer understanding, and a willingness to collaborate and passion to succeed from both sides, provided the team with everything they needed to attack the problem at pace.

Valtech’s design system UI specialists leveraged Figma’s capabilities to ensure componentry was responsive, accessible and reusable. They also helped to upskill TVG designers in the new tooling.

Experienced engineers and QAs from TVG worked closely with the Valtech designers to ensure components were built and tested to the high standards set by the squad.

Accessibility was championed across the team, but not least by Valtech’s Accessibility Lead, Annick, whose invaluable accessibility experience and developer background ensured her guidance was pragmatic and actionable for both designers and engineers.

Shaping the system

While various structures were explored, the team settled on an atomic design system taxonomy, composed of foundations, elements, components and patterns. Not unsurprisingly, the foundations module library provided the starting point, as the team sought to lock down color schemes, typography, a grid system, spacing and more.

Core elements and components closely followed, quickly consigning TVG’s days of more than 50 different button styles to a thing of the past. A separate modules library just for the apps ensured the flexibility to surface native patterns and interactions. After just six months together, the team had built, tested and released more than 30 different design system modules, many of which were actively being used by squads who were migrating experiences to the new Skyscape platform.

Users wanting to get their hands on the new modules were given three different points of entry to the system, each one specifically catering for different user needs. Designs for every module are stored in a Figma library, enabling designers to effortlessly incorporate the components into their own layouts. Working examples of each component can be viewed and configured in Storybook, which is ideal for developers wanting to give modules a test run before they add the code to their builds.

The team also used Frontify to build and launch an Experience Hub, which, among other things, contains detailed documentation, usage guidance and example images for every module. A dedicated content writer from Valtech helped to establish a consistent and inclusive approach to this documentation.

Tokenization helped enable fluid theming in Storybook, allowing users to quickly and easily pivot between the different brand executions, and future-proofing the design system against any future rebrands or new brands. Carefully curated modules, from typography scales and spacing increments to content banners and carousels, were exposed within the CMS to empower content teams without sacrificing wider consistency.

Governance models, built with and around users, and designed to standardize everything from contribution to communication, were established early on in the process and helped to grow and shape the design system, while frequent showcases to the wider organization helped to increase awareness and drive adoption.

Research and testing for continuous improvement

TVG already had a wealth of existing user research findings and experiment results to draw on, which helped to shape the requirements for specific modules, and to ensure the customer was always at the heart of the team’s decision making. The team also held regular interviews with internal users to help them understand what was working and which were the most important areas to improve.

As the design system matured, and more components became available to the product squads, those squads were able to use more of them in their research prototypes and feed any component-specific insight back into the design system.

Fully developed journeys were also able to be tested by Fable’s network of assistive technology users (Fable is an external research partner of TVG’s, specializing in accessibility), helping the team to quickly detect and fix any accessibility issues.

Despite the blended TVG and Valtech team coming to an end in July 2023, the Fuse design system continues to go from strength to strength.

Now home to more than 60 different modules (a number that’s growing all the time) used regularly by at least 10 different teams and hundreds of individuals around the business, the crucial role it currently plays not only in platform migration, but almost all of TVG’s customer-facing initiatives, is testament to the amazing work completed by that team in the relatively short time it was together.

Like all good design systems, Fuse has:

• Streamlined business processes

• Improved collaboration in and across teams

• Freed up designers and developers to do more interesting and important work

• Made customer experiences more performant, consistent and accessible

• Crucially, saved the business time and money by cutting build and design time in half.

Around 500 users have visited the Experience Hub to find out more about the design system and its components since it launched in January 2023, and the Fuse module library in Figma has seen over 290k inserts in the past 12 months.

User Experience Manager Lis Mancini described how TVG are “already reaping the benefits of the collaboration with Valtech in terms of improvements to the customer experience, engineering efficiency and allowing our UX team to focus more on experience design and less on UI improvements.”

Design system Product Manager Lee Somers talked about how it’s “revolutionised the way we think about, and execute, experience design in The Very Group, laying solid foundations on which performant, consistent and accessible customer experiences will be built for years to come.”

Our mission is to create a world class digital experience that gives our customers ease, choice and understanding. Foundational to this is an end-to-end journey that is contemporary, consistent and accessible, which is exactly what Fuse now gives us. The creation of Fuse was also a perfect example of how we like to engage with partners; bringing clarity on the business and customer problem and pairing our internal knowledge with the expertise of a partner to deliver great outcomes for our customers and colleagues.

- Paul Hornby, Digital Customer Experience Director at The Very Group

The continued growth and ongoing success of Fuse, and the pivotal role it now plays in TVG’s strategic initiatives, shows what can be achieved when motivated individuals with the right blend of skills, knowledge and experience are brought together to answer a clear brief.

The pairing of TVG’s acute business and customer understanding with Valtech’s design system, accessibility and content expertise enabled the cross-organizational team to build both a system, and an ethos, that has, and will continue to, support the company’s long-term goals, long after they completed the initial assignment.