DESIGN SYSTEMS
A design system is not merely a set of guidelines or a repository of components. It is the cultural compass of a team, guiding innovation and assuring the commitment to user-centricity. Creativity can flourish with well-crafted boundaries, and that is how a design system shines bright.
During my career, I have been the leader and executor of design systems and other guidelines. Find out here what I have been doing in this area.
//////
SOLAR DESIGN SYSTEM / 2023
The Design System of Sunrise UPC
In 2021, Sunrise and UPC merged to become the second-largest telecommunications company in Switzerland. To streamline digital initiatives and solidify the culture of "one", Solar Design System had the mission of consolidating together all the different digital products previously created by two distinct companies.
To reach such goals, the Solar design system exists in four equally important pillars. The symbiosis of all of them assures that the guiding principles will be put into practice.
My role
Joining the team in 2021, I embraced a multifaceted role.
My responsibilities extended to the leadership within the design team, where I orchestrated the efforts of a talented trio of UX designers. This involved overseeing design reviews and implementing quality checks to ensure the highest standards of output. In addition to design team leadership, I played a leading role in establishing the technical foundation of the design library. This encompassed defining the hierarchy of variables and managing updates to the library, ensuring its adaptability and longevity.
I was also the main contributor to defining Solar governance amongst other internal teams of Sunrise, and contributed, together with the project manager, to establishing priorities for the code.
A key aspect of my work involved advocacy and education. I actively engaged in sharing and evangelising the use of components, fostering collaboration among internal and external stakeholders. By championing a unified vision and promoting widespread adoption, I contributed to the successful integration of the Solar design system across the organisation.
Design library, code library and documentation
The code and design libraries make up the technical elements of Solar. They are the building blocks of products and form, together, the component repository of the company. Together with the components from the libraries, users of Solar can find all documentation on how to use or not use each building block, and how to incorporate them in digital projects.
Both libraries and documentation are available on solar.sunrise.net. The URL is accessible by Sunrise employees and external vendors and doesn’t require an invitation/VPN. This measure reduces the initial barriers to adoption among different stakeholders.
Obs: As the Solar website is not under my supervision, the URL might be discontinued. Please get in contact if you wish to see more.
Governance
When it comes to the governance around Solar, the collaboration with Sunrise internal teams is the key element. Designers and programmers actively contributed to the creation and adjustment of elements, being also the driving piece to define priorities.
The design elements were crafted in close collaboration with UX designers allocated to the product teams. Working closely enabled also good testing rounds, allowing improvements to the components. This arrangement also increased exponentially the range of work that the Solar team delivered, as additional hands were always involved.
The delivery of code components to the digital unit was also done collaboratively. In that way, the deploys happened to serve all different squads, and when priorities should be delivered.
See the structure below for a more detailed understanding.
Accessibility: the main design principle of Solar
Accessibility was an integral part of Solar, being present in its foundations and one of the most important guiding principles of the entire project.
In efforts to implement accessibility more consistently across the organization, I kicked off a cooperation project at the University of Applied Sciences in Chur, in January 2023. A research team from the MSc. in User Experience Design analysed the current implementation of Solar in the Sunrise sales portal and compiled all the different elements of accessibility in a report. This document was used to craft the strategy of Solar in 2024.
Findings were around several points of the accessibility spectrum, such as the information hierarchy, navigation with voice-over and keyboard as well as alt-text usage.
Obs: The content of the report cannot be published in its totality. Please get in contact for further details.
Evangelising Solar: efficiency and design-centricity motto to the company
Crafting an exceptional design system is just the first step. The true magic happens when that system is embraced across the organisation. For excelling the adoption of Solar, I set up 3 different measures within my team:
1) Activating internal users → vote the name of the design system
For the design system to become more than a set of guidelines, it needed an identity. I initiated an open voting process for naming the system involving all stakeholders. This not only fostered a sense of ownership but also made the system more relatable and memorable to +200 voters. Also, the exercise provided interesting insights of who the responders were and how to conduct future communication with them.
2) Onboarding Integration → every new employee is presented to Solar
Recognising the importance of early adoption, I integrated the design system into the onboarding process for new employees. By making it an integral part of their introduction to the company, I ensured that the design system became essential to everyone in digital projects from day one.
3) Community Engagement → public speaking and networking
Actively participating in industry events. As a speaker in those events, I showcased the design system's impact and shared insights with the broader design community. As an attendee, I could exchange with peers and stay up to date on trends in the sector.
Making Solar the state-of-art of Sunrise guaranteed consistency and efficiency, enabled a better cross-functional collaboration and, mostly, unlocked the cultural impact of spreading a design-centric philosophy among the teams.
Impact
Since its creation, Solar Design System has become an integral part of Sunrise’s digital universe.
The weekly usage of design components has continuously increased within the internal design tool of Sunrise. The usage has peaked at almost 41k inserts/week. With little surprise, the lowest usage was registered during the summer and winter breaks, with some fluctuation according to seasonal cycles (e.g. Black Friday projects). The impact of the Solar Design System can also be captured by the number of users exposed to it. Again considering the internal design tool of Sunrise, almost 1.500 stakeholders are constantly in contact with the almost 700 components and 65 styles of Solar, having the design library available in 100% of new design files and collaborative boards.
There is a share of users and usage that is not captured at the moment. Those are represented by agencies that provide services to Sunrise. To that, the evidence is only through the direct exchanges with agencies.
In 2022, Sunrise had a rebrand in all the company’s communication. In the digital stream, the design system was the lead element for the rollout and used as the main documentation for all digital channels (including the support of the discontinuation of the UPC brand in Switzerland, which occurred gradually starting in May 2022).
When it comes to the financial impact, it is estimated that Solar brought 1.5 CHF of savings to the company over the year 2023. The granular view cannot be published online, but rough numbers are as follows:
• Up to 50% time saving on common patterns and journeys
• Up to 50% reduction in future managed costs (by launching better products the first time)
• Up to 25% increased product development efficiency and efficacy
• 2-3x faster time to marked
• Up to 25% faster building functional prototypes
• Improved usability, trust and brand recognition with customers
Year & place
2021 - 2023, Switzerland
2021 - 2023, Switzerland
Role
Lead UX Designer
Lead UX Designer
//////
UI KITS
A UI Kit is a curated collection of pre-designed interface elements that empowers designers to build with precision. Buttons, forms, icons – all pixel-perfect pieces of the design puzzle.
Differently from a design system, a UI Kit does not have a code library which makes maintenance faster and simpler.
//////
SUNRISE UI KITS / 2023
Assets that support different designers - internally and externally
As the Sunrise ecosystem became more complex with the rollout of the Solar Design System, an opportunity to refine UI elements became apparent.
The diverse interfaces of applications were escaping the quality assurance of the design team. Even though components were widely shared, the UI was constantly adapted to serve the specific needs of that point of the user journey.
To illustrate, there are around 4 different types of menus across Sunrise's applications, and while they all draw from the same component, variations in the number of buttons and icons became confusing to designers and developers working with such element. Instead of a seamless workflow, a few unexpected hiccups started to pop up in prototypes and development handover.
To remedy this, I kicked off a series of UI Kits. Tailored to the unique needs of specific cases, these kits were like personalised design assistants, allowing us to swiftly adapt the Solar Design System to meet the nuances of interfaces in the user journeys. They were developed closely with the teams that use the kit frequently, which contributes to a better result and raise adoption and awareness.
To date, two UI Kits are up and running (UI Kit for emails and UI Kit for Mobile Apps) and one is in the pipeline for development (UI Kit for My Sunrise).
My role
I coordinate the work with the UI Kits of Sunrise, defining priorities and managing the work of eventual contributors and deploying updates. Also under my responsibilities, the communication of new deploys and the connection between different users were centralised by me.
Year & place
2021 - 2023, Switzerland
2021 - 2023, Switzerland
Role
Lead UX Designer
Lead UX Designer
//////
INYOVA UI KIT / 2021
Facilitating prototyping in small design team
As a small but dynamic team, efficiency was paramount at Inyova. The idea of creating a UI kit emerged as the key to unlocking a cohesive design workflow with a set of design elements.
For a small team, where each member wears multiple hats, this was a game-changer. Designers could confidently iterate in the product usability, knowing that there was a provided safety net of consistency. Moreover, the UI kit at Inyova ensured that the designs seamlessly translated into development, fostering a smoother collaboration between teams.
My role
I set up the first elements of the Inyova UI Kit, testing and advocating it with other team members from day one.
Year & place
2021, Switzerland
2021, Switzerland
Role
Senior UX Designer
Senior UX Designer
//////