Tesco is a British multi-national groceries and general merchandise retailer. Their digital sites and apps receive over 25 million visits per month, all of which had their own style guide or design system.
Design systems
CONTENT STRATEGY
The ask from Tesco was to eliminate any inconsistency and unite teams and departments that had previously worked in silos. I worked as part of a small team, with one other designer and two developers to create a design system to be a central source of truth for all design solutions.
It was my responsibility to make sure that what we were creating was easy to use and provided the tools and explanations required.
99.9% of teams working in large corporations tend to only focus and work on what matters to them, which makes sense, until it doesn't.
Customers had been consistently telling us that they often struggle with having to do things differently on each site/app and saw Tesco as "just one place".
Here are a few examples of inconsistent aspects on different Tesco sites.
Mapping what existed
Style guide
Design system
Team
Groceries
-
Axure design system
UX - Web
F&F Clothing
Local Sketch file
-
Marketing
Clubcard
-
Storybook component library
UX - Apps
Bank
Local Figma file
-
Content
Mobile
Local Adobe Illustrator file
-
Mobile
Recipes
-
Axure design system
Content
Photo
Local Sketch file
-
Marketing
Magazine
Local Figma file
-
Content
Direct
Local Adobe XD file
-
Digital Design
Internal tooling
-
Storybook component library
While this project was lead by the UX web and app team, I presented my findings back to all teams concerned. Taking into account their thoughts and concerns.
From this, I set out the framework of what would be available in this new ecosystem. This was vital in ensuring this wasn't just a 'vanity project' and that it provided utility.
On the design side we collectively agreed to use Figma as the only design tool, largely due to it’s cloud-based collaborating capacity. Pure branding assets (logo creation etc.) remained Adobe specific.
Figma libraries
Instead of creating a Figma page for each site, we created 6 key areas that covered everything. This allowed for everyone to effectively (and efficiently) apply and update consistent design across Tesco.
The platform
The new design system was accessible via a link, eliminating the need to ask for access to a specific platform etc. which in big companies, is a big problem.
The design system provided information that was team and discipline agnostic. Everything from design guidance and developer implementation to marketing and content practices and patterns.
Interaction
To keep things as close to 'live' as possible, we included a sandbox and live action aspects, which allowed for users to play around with everything from navigation to components.