Context
Sector: Groceries, loyalty program
Sainsbury’s, is a British supermarket and the second-largest chain of supermarkets in the United Kingdom, with a 14.6% share of UK supermarket sales, and Nectar is a loyalty card scheme in the United Kingdom run by Nectar 360 Ltd, a company wholly owned by Sainsbury’s. The scheme is the largest in the United Kingdom.
Understanding the problem
It was identified that our Design System, needed to meet and serve more efficiently to the team, as it is incomplete and not attending the needs of our team, the purpose of this task was to update and make the Design system more accessible to the whole team and help the team in the development of faster deliveries.
Design Question
“How can we accelerate development and creation, with reliable and consistent components”
Research
A survey was conduct to some team members to understand the most urgent matters regarding the Design System and how we could support the team in the best possible way.
With this we can conclude that the current design system lacks not only components but also guidelines that support the team and help teams to maintain consistency in the development of projects.
Inventory & Audit
After understanding the real needs of the team, and understand how we can better serve them, was made an extensive curation of all components and elements that we have, we also investigate each file in Figma and also check what has already been implemented, also comparing the differences between IOs and Android.
But why should we invest time and resources into the Design system?
The importance of a design system is to bring consistency, agility and facilitate the routine of developers and team designers, bringing positive results in reducing time in development and UI creation.
Although we have a dedicated team working on the Luna design system, unfortunately our demand is not being met, as Nectar has unique characteristics in its components that are not included in the luna design system, therefore the implemented design system does not reflect our day-to-day reality.
Delivery
With the support of the Luna team we will align the best ways of synchronisation and delivery of components so we could align the delivery flow and versioning updates in an integrated and organic way, in this next step hosted workshops and sessions for alignment of the delivery method.
Prioritisation
With all the inputs collected, we entered the stage of prioritising which is the best way to act in a more impactful and positive way for the benefit of the team.
Based on the principles of Atomic Design, we will ensure the delivery of components that meet the needs of the design team, without compromising the flexibility and creativity of the team.
A great and extensive work was carried out to audit all our components, current and for the future of Nectar, identifying all divergences, inconsistencies and compared with the Luna Design system.
With all the inputs collected, we entered the stage of prioritising which is the best way to act in a more impactful and positive way for the benefit of the team.
We provided a powerful, adaptable design system foundation that empowers your team to create consistently and efficiently. Engineered with flexibility at its core, this system is fully modular and ready to evolve with your team’s unique needs and changing scenarios. Whether you’re scaling quickly or tailoring specific solutions, our design system is built to ensure robust performance and seamless integration every step of the way.
The Dark side of the moon (dark mode)
Project after project, our team found themselves doubling the workload by creating separate versions for dark mode—without a standardized approach. This led to inconsistencies across projects and a lack of cohesion in design. On top of the extra work, developers faced frequent questions and confusion, adding unnecessary friction and hours to development. Here’s an example of how this process impacted our projects and underscored the need for a unified approach to dark mode
