Enhancement of user experience for the UI kit.
Role:
Lead Designer
Industry:
Internet provider
Duration:
On Going
Introduction
Joining Lyse's Design System Team
In November 2023, I joined Lyse's design system team, a leading provider of electricity, internet, and television services in Norway. My initial objective seemed straightforward: to contribute by testing and refining existing components, creating new ones, and writing documentation. However, after my integration, several critical issues surfaced that required a realignment of the mission.
Design and Development Process
To address the challenges, the following immediate actions were implemented:
To address these issues, I focused on improving user experience at the component level, simplifying customization and enhancing responsiveness.
I created rituals for knowledge sharing, such as workshops and regular updates, to build awareness around the design system.
I developed an adoption strategy to encourage contributions and enhance engagement with the design system.
Communication channels were established across all levels, keeping everyone informed and involved in the design system's progress.
Looking ahead, the following mid-term initiatives were planned for the next six months:
We developed Version 2 of the design system with a stronger focus on scalability.
A white-label design system with variables was created to easily swap between different brand styles depending on the environment.
Documentation was made more accessible to ensure easier adoption and reference.
Problem Identification
Upon thorough evaluation, several key challenges were identified that required immediate attention:
One major issue was the lack of engagement and adoption of the design system. Designers frequently detached components from the system because they found them difficult to use, undermining the system's intended purpose.
Components were complex to use due to responsiveness issues and an overload of customization options, making them challenging to work with.
Another significant challenge was the multi-brand inconsistency within the UI Kit. Housing three different brands, the kit was cluttered with too many branded components, leading to confusion and inconsistency in design application across brands.
Documentation was hard to access, being embedded within the design file. This made it difficult for users to locate key information, slowing down the design process and posing challenges for new team members and external collaborators.
Design Process
The following steps were undertaken to enhance the design system:
Conducted user audits to understand how, when, and where the design system was being used, as well as which components were most valuable.
Identified gaps in documentation and missing components.
Began building the core components of the design system, ensuring they were versatile and easy to implement.
Create contribution and adoption process to increase the number of users
Implementation and Results
To ensure successful deployment, the following implementation strategies were executed:
Created comprehensive documentation and guidelines to support the design system.
Prototyped and tested components to ensure they functioned as intended across different use cases.
Iterated on feedback, refining the components as necessary.
Set up a maintenance and roll-out process to manage contributions, updates, and releases for the design system.
Results
The impact of these efforts can be summarized as follows:
Achieved a 32% increase in adoption within just three months, demonstrating that the design system is being actively utilized across teams.
Overall contributions to the system have risen, reflecting a growing engagement from the design community.
Designers are now actively seeking our guidance for questions and learning opportunities, fostering a collaborative environment.
Notable reduction in component detachment, with fewer instances of designers reporting issues with non-functional UI components.
Next steps?
See Form V.2.00 case :)
