Evolving the design system to support an expanding suite of global mobile applications
At the start of 2024, I was invited to join the design system team at Nespresso to evolve their existing libraries, which served both the Web and Mobile squads within the business. Although I was part of the wider web DS team, which had a centralised group of contributors, I managed the global mobile app direction that served five different customer mobile applications across both iOS and Android. These applications included two boutique shopping experiences, two vending machine touch points, and one smart machine connectivity app.
Although these apps have different purposes and user-direction, the business mandate required all to be served by the same core component library and foundational guidelines, making them visually aligned without conflicting and easier to manage from one source of truth. Incremental enhancements to the experience was core to the strategy as targets were set that the design system had to have impacts on;
↑ 63%
increased downloads
> 50%
increase in active users
↓ 28%
average uninstalls reduction in iOS and Android
↑ 5%
purchase frequency increase
Functionality differed but the visual style and text hierarchy remained consistent for brand continuity
Scaling our offering
The flagship Boutique app was already working with core libraries and kicking off with the MVP e-commerce app initially for US and UK markets, expanding to 5 more by Q4 2024 and 26 globally by 2025. Other apps were in early infancy with little adoption or understanding. Core components identified were originally from Web libraries but customised to create iOS and Android variants with specific native functionality. Early documentation was also taken from Web and altered for mobile needs.
Because Boutique squads had worked with the design system for a couple of quarters, collaboration and contribution methods were understood. Beyond using the core library, designers contributed individual experience components into a separate library hooked to foundations but not multi-purpose enough for usage outside their workflows. General component composition between core and experience was good, but obvious improvements were needed in accessibility, composition and scalability for usage across the whole suite of apps.
Challenge one
Survey quantifying
Understanding priorities on new and existing DS usage would help me plan and present a revised roadmap to product heads and leads for the remainder of the year. The survey was sent to design, engineering, and product owners and managers for wider insights into challenges being faced. Summarizing this data helped me set updated OKRs that drive task management decision-making, ensuring time and cost efficiency.
Transparency on Boutique's deadlines and roadmaps was key, as component changes here would have huge impacts, potentially derailing them. Component updates needed to show value beyond cosmetic, considering use cases within our other apps.
Ways of working agreement
Lack of communication and process was clearly evident from the beginning. A few things impacting this were;
Testing and QA infrastructure were difficult due to business security restrictions
Comms with engineering and how they communicated with other app engineering squads were almost non-existent
Merges and releases weren't thoroughly explained to squads
Misalignments between design and code component parity
This caused a bottleneck as squads didn't know the right person(s) to speak to for requests, particularly with technical issues and breaking changes impacting deadlines. Working closely with the core framework team responsible for components, I identified improvements that would help us and enhance our impact on product teams. Additional weekly catch-ups, tailored refinement and planning sessions and better testing phases saw core component inclusion increase by 37% and sprint support tickets reduce by 42%.
These improvements led to creating a wider product team DS forum channel with dedicated chats for development, design and accessibility for all members to raise issues and make requests. This gave the entire product team visibility on all matters impacting all platforms, both web and app, achieving shared continuity.
Documentation
Component documentation was adequate initially and sat within Figma as the first e-commerce apps were in early development. However, to raise the design system's profile to the business and showcase our impacts, documentation of our libraries needed to be accessible outside Figma. This also acts as a centralised hub where all knowledge and guidance can be shared. This was created in SharePoint due to the Microsoft suite of products available in the org.
The updated Boutique app launched in beta in February 2025
Challenge two
Design token opportunity
Although the Foundations library had an extensive range of styles from the Nespresso brand, the naming convention lacked correlation between purpose of usage and how they were implemented in designs. The small Boutique squads could initially navigate this with shared understanding, but as usage grew to the wider range of apps the design system supported, this posed a problem both logically and from scalability perspective.
I wanted to ensure creating a holistic design token structure wasn't just added to libraries but understood throughout the product org. This would explain its rationale and educate the team on benefits it would bring. The ambition was demonstrating how solid token infrastructure can elevate our shared design language and scale beyond the app framework into all 80+ global web markets. I even took this one step further when hypothesising if Nestlé could take design tokens and scale them into a single-source destination for corporations to contain guidance across multiple brands
Tokens were initially presented within the app workflow, but need for them became more formalised as the business direction for 2025 focused on a web revamp of Nespresso.com.
Challenge three
Web revamp
The purpose of an updated web presence was to increase the luxury persona amongst Nespresso customers. The brand has continued seeing consumers becoming younger, more brand-conscious and keen to invest in higher-priced machines and accessories besides coffee. Nespresso's boutique retail destinations have a level of quality which the digital side doesn't. This was a major drive in conceptualising what will become the new brand direction of 2026. The foundational work I'd proposed prior, and the whole design system team, were integral in setting guidance for all design decision-making of this revamp.
As a lot of initial exploration into how design tokens would be executed was created, I adapted this into a 2.0 framework, defining our naming conventions with DS frontend engineers and liaising with the accessibility team—for example, scaling our colour palettes and working with typography dynamically. This was a legal requirement from the business, which also helped guide the revamp team on better decision-making and enforced best practices.
Variables power our design tokens which feature in all component documentation
With more foundational guidance defined, the design system team began working alongside revamp designers to first create a set of core library components. This range of 20 most commonly used components was decided from our analytical data of inclusions within global websites.
Design tokens expanded to also cover breakpoints and component-specific usages
In turn, our new web components formed the basis for larger web block common patterns such as navigations, content panels and product grids. Tokens evolved further here due to desired outcomes of web blocks. After agreeing with engineering on specific breakpoints to design for, I needed to ensure our components and web blocks utilised tokens correctly so product designers could swap appearance in their layouts without designing for all breakpoints.
Our motion tokens then helped guide prototypes of how animation and transitions played into user experience.
Reflection
Effecting positive change in larger organizations takes time—multi-squad alignment, budget and time restrictions, and 3rd party tool integration causing delays. In retrospectives, many shared issues were difficult to change, so adapting to the landscape was challenging. Frustrations were equally echoed in app squads with length of estimates on tasks and testing environment blockers.
efficiency gain on components built and used from the design system vs. without
Average employee cost x 25 active users x our efficiency gain gives us a approx. total cost saving to the business
In amongst all this, however, scaling a design system to serve an increase of 150% more mobile applications, including an additional 42% component creation, pushed adoption rates in the right direction. Opening our documentation beyond Figma also gave other product team members the opportunity to not only consume but also contribute to our guidance, such as UX writing and accessibility guidelines.
Credits
©2017—2026 Selected works / Jon Atkins