Screens showing how the new design system was implemented in mobile version.
The first thing I did was to analyze the differences between the same components in different products.
Some of the colors designed for the portfolio were later incorporated into the design system.
An example of the different left panels that existed in the portfolio. This was later redesigned, see image below.
The redesigned left panel component with specifications for developer team to develop.
Overview
Our goal was to create a scalable design system for the ABB OptiFact™ software portfolio. Drawing inspiration from the original ABB design system, we crafted a new, modern, and scalable design system. This was translated into coded components and strategically implemented across the entire portfolio of seven products, ensuring a seamless and consistent user experience.
My role
As UX lead, I conducted a comprehensive review of existing products, identifying components used across multiple products. Analyzing differences and similarities, I leveraged this research to create improved components. These were subsequently implemented in the portfolio, enhancing overall design consistency and functionality.
Problem
The absence of a design system in a software portfolio can lead to development complexities, communication challenges and inconsistencies. Implementing a design system is essential for streamlining development, ensuring a cohesive user experience and maintaining brand consistency within the software portfolio.
Outcome
A novel design system featuring scalable components tailored to diverse product requirements was instituted, ensuring uniformity across the entire portfolio. This standardization not only fostered brand recognition but also contributed to an enhanced user experience for the users using ABB systems globally.
Accomplishments
Designed and implemented a comprehensive design system, including components, patterns, and guidelines, to enhance usability and user experience in the software interfaces.
Collaborated cross-functionally to ensure successful implementation of the design system and effective communication with developers and stakeholders.
Demonstrated tangible results, including significant time and resource savings, streamlined workflows, and improved scalability in response to evolving software requirements.
Emphasized a user-centric approach, supported by user research, educational materials and positive feedback and metrics, showcasing a commitment to creating a cohesive and efficient design system.