Solar Design System
Solar is a design system built for Sunrise, a telecommunications company based in Zürich, Switzerland. Its purpose is to define a cohesive visual language that enables product teams to be more efficient, consistent, and innovative. As a result, Sunrise’s digital products have become more scalable, contain less errors, and have a refined user experience.
The library is live for the public here: https://solar.sunrise.net/
My role: I was responsible for the research, design creation, testing, publishing, and advocacy of design system components
Tools: Figma, Storybook, Zeroheight
Timeline: Late 2021 - Mid 2023
Status: Live
Context + Client
Sunrise offers a range of services such as mobile, internet, and television plans to both residential and business customers. When I joined the team, Sunrise was facing issues with visual consistency. Additionally, they were scaling their team and preparing for a rebrand.
Business Value
Solar’s value includes improving brand recognition, reducing costs for design, development and maintenance, accelerating time-to-market, enhancing user experience, increasing user satisfaction and loyalty, and ultimately driving revenue growth.
Design Priorities
The design priorities for Solar are:
Consistency with the design language and principles of the system
Usability and accessibility
Scalability and room for growth
Flexibility, modularity and reusability
Quick and regular releases
Thorough and thoughtful guidelines and rules for use
Clear governance processes
Alignment with the organization's branding and business goals
Process
Understand user needs, business goals, and tech constraints
Solar serves approximately 40 designers who work on various products with different needs. Solar’s components need to be flexible so that they can fill their variety of needs, taking into account ease and speed of implementation. For each component that was requested, I gathered user needs by consulting with the relevant product teams. I needed to understand both designer needs and developer needs.
In addition, clear governance processes needed to be established, including communication about roles and responsibilities, processes for requests, changes, and approvals, change-logs, and communication channels for collaboration.
Define the priorities, scope, timeline, and potential challenges
The priorities of the project evolved over time; the highest-level priorities were defined every quarter. The scope for our team included defining governance processes, creating both design and front-end components, and increasing the ease of discovery and use. We had multiple deadlines of varying importance that were set throughout the project. Some potential challenges that were forecasted were adoption, and paving the way forward despite many unknowns.
Gather ideas and concepts
Before diving into design, I researched industry standards. I regularly referenced the design systems of industry leaders like IBM, Google, Apple, and Atlassian. I also read blog posts from Nielsen Norman Group and attended conferences from Figma. I was on a continual quest to learn what I don’t know about design systems and how to improve the management of a design system. During this stage I would also consult other designers and spend time experimenting with ideas.
Prototype
For each component, I created the design asset including all variants. I also wrote rich documentation including information on behaviour, formatting, alignment, and best practices.
Test & re-iterate
I tested each component with product teams to confirm needs have been met. I also performed additional stress-tests to define the limits of the components. I then gathered the feedback and results and tweaked the components and documentation until all parties were satisfied.
Hand-off & implement
Once design was completed, the component was handed over to our design system development team and published to Solar. The front-end library was updated in Storybook with the component shortly after for other development teams to use.
Results
Solar is currently live with 57 components and 704 variants across 31 product teams within Sunrise. The components cover different levels of atomic design, from buttons to page templates. They are available in Figma, Storybook, and on the web.
Our team has received positive feedback from the product teams we serve, and we are always learning new ways to adapt to serve our users better. The usage of our components, recorded as component insertions, is steadily growing over time - an indicator of teams finding value in Solar. Over the last year, component insertions peaked at 79,685 insertions in one day on February 26, 2023. The most used components can been seen above, with the button taking the top spot at 155,480 inserts in the last year and a current 84,977 instances in design files.
As a result of Solar, consistency in the user-experience within Sunrise’s digital products has improved. Keeping design consistency through a rebrand was relatively painless, teams are reporting that they are working more efficiently, and the handoff process from design to development has been streamlined.
Challenges
The main challenge faced with implementing Solar has been adoption. It’s difficult to communicate availability and to educate how best to use a design system to multiple teams across management, design, and development. There are still some cases of inconsistencies and misuse. Implementing the web library as a resource was the main initiative to mitigate this challenge, along with introducing a new email account with regular updates, like the example below, and increased regular verbal advocacy among teams.
There are other challenges as well, such as finding the balance between setting rigid guidelines and encouraging creativity, creating flexibility in components without causing unnecessary complexity and confusion, and creating data that proves increases in team efficiency.
Final Thoughts
Being a part of the evolution of Solar has highlighted for me the importance of having a design system in place in order to maintain a consistent brand identity, and provide a high-quality user experience for a scaling or large organization.
The impact of Solar for Sunrise has clearly been a net positive, with improvements in efficiency, scalability, and brand consistency. Personally, building components for Solar has greatly improved my technical ability working with Figma, and expanded my mind to all the possible places a powerful design software such as Figma can and could go. I also have seen the challenges working with a design system presents, and I’m excited to face these challenges in the future.