Product
SHAPE Design System
Role
Director UX
Year
2018 - 2022
Keywords
Design System / Product Design / Design Leadership / Process Development / Web / Mobile / Appliance / Components / Design Tokens / Figma / Automation / Workflow / Accessibility / Design Engineering / Visual Design / Org Design
Electrolux
Project Overview
SHAPE is Electrolux Group’s design system, uniting web, mobile, and appliance platforms to deliver a cohesive and premium brand experience. By standardizing design tokens, UI components, and workflows through tools like Figma plugins and a robust portal, SHAPE streamlines design and development, reducing costs and time-to-market. With a focus on consistency, user research, and collaboration between designers and developers, SHAPE empowers teams to create innovative, user-friendly experiences while fostering a strong design culture across the organization.
Project Overview
SHAPE is Electrolux Group’s design system, uniting web, mobile, and appliance platforms to deliver a cohesive and premium brand experience. By standardizing design tokens, UI components, and workflows through tools like Figma plugins and a robust portal, SHAPE streamlines design and development, reducing costs and time-to-market. With a focus on consistency, user research, and collaboration between designers and developers, SHAPE empowers teams to create innovative, user-friendly experiences while fostering a strong design culture across the organization.
The Problem
When I joined Electrolux there was no global design function and it was composed of very strong, and distinct, regional business unit design teams. I was hired to create a new global design organization for UX in order to strengthen the brand experience and leverage the best solutions (design patterns) for each product instead of reinventing many different solutions for the exact same product all around the world.
The Problem
When I joined Electrolux there was no global design function and it was composed of very strong, and distinct, regional business unit design teams. I was hired to create a new global design organization for UX in order to strengthen the brand experience and leverage the best solutions (design patterns) for each product instead of reinventing many different solutions for the exact same product all around the world.
The Solution
The SHAPE Design System contained reusable UI components and patterns for mobile, physical products, and voice. When launched, Electrolux had 44 unique mobile applications across the world with low usage and high cost to maintain and update. Part of my inital effort was to bring the individual owners of these applications together to begin agreeing on new ways of working together and collaborating through the use of common design elements. The success of this demonstrated to executive management there was an opportunity to scale this throughout all of software development and product management, leading to a significant reorganization to focus on one global mobile application and modular electronics to be used across the product lines
The Solution
The SHAPE Design System contained reusable UI components and patterns for mobile, physical products, and voice. When launched, Electrolux had 44 unique mobile applications across the world with low usage and high cost to maintain and update. Part of my inital effort was to bring the individual owners of these applications together to begin agreeing on new ways of working together and collaborating through the use of common design elements. The success of this demonstrated to executive management there was an opportunity to scale this throughout all of software development and product management, leading to a significant reorganization to focus on one global mobile application and modular electronics to be used across the product lines
The Result
Streamlined design and development processes, reducing time and cost for digital product creation.
Achieved consistent brand alignment across all Electrolux products and platforms.
Delivered a well-documented, user-friendly design system portal for seamless adoption.
Established standardized design tokens and reusable UI components, enhancing scalability.
Improved customer experiences with cohesive and engaging user interfaces.
Fostered a strong design culture and trust in the system among designers and developers.
The Result
Streamlined design and development processes, reducing time and cost for digital product creation.
Achieved consistent brand alignment across all Electrolux products and platforms.
Delivered a well-documented, user-friendly design system portal for seamless adoption.
Established standardized design tokens and reusable UI components, enhancing scalability.
Improved customer experiences with cohesive and engaging user interfaces.
Fostered a strong design culture and trust in the system among designers and developers.
Getting People Together
The process of developing a cohesive user interface and experience for a global brand like Electrolux began by acknowledging the fragmented nature of the existing design structure. Electrolux historically operated with a decentralized design approach, where each Business Area managed its own design. This structure proved successful for regional, non-connected products, but it resulted in a fractured user experience for connected products and global offerings.
Recognizing the need for a unified and consistent brand experience, the project initiated by bringing together designers from different teams and disciplines across all the global business areas. For the first time ever.
This collaborative approach aimed to foster a shared understanding of user needs, business objectives, and design solutions. Workshops played a crucial role in this process, facilitating discussions, brainstorming sessions, and the development of a common design language.
Getting People Together
The process of developing a cohesive user interface and experience for a global brand like Electrolux began by acknowledging the fragmented nature of the existing design structure. Electrolux historically operated with a decentralized design approach, where each Business Area managed its own design. This structure proved successful for regional, non-connected products, but it resulted in a fractured user experience for connected products and global offerings.
Recognizing the need for a unified and consistent brand experience, the project initiated by bringing together designers from different teams and disciplines across all the global business areas. For the first time ever.
This collaborative approach aimed to foster a shared understanding of user needs, business objectives, and design solutions. Workshops played a crucial role in this process, facilitating discussions, brainstorming sessions, and the development of a common design language.
Deconstructing Complexity
Following the initial workshops and the formation of a centralized design team, the project moved towards establishing a comprehensive understanding of the existing user interface landscape across Electrolux products. This involved a hands-on, tactile approach to mapping all the different controls and interaction patterns.
The team meticulously printed out screenshots from various requirements documents, essentially creating a physical archive of existing user interfaces. These paper screenshots were then carefully cut out, representing individual UI elements and interaction patterns.
By physically grouping these cutouts, the team could visualize the extent of inconsistencies and redundancies across different products and platforms. This analog method provided a tangible representation of the design challenge, allowing the team to identify patterns, highlight discrepancies, and ultimately inform the development of a unified and consistent design system.
Deconstructing Complexity
Following the initial workshops and the formation of a centralized design team, the project moved towards establishing a comprehensive understanding of the existing user interface landscape across Electrolux products. This involved a hands-on, tactile approach to mapping all the different controls and interaction patterns.
The team meticulously printed out screenshots from various requirements documents, essentially creating a physical archive of existing user interfaces. These paper screenshots were then carefully cut out, representing individual UI elements and interaction patterns.
By physically grouping these cutouts, the team could visualize the extent of inconsistencies and redundancies across different products and platforms. This analog method provided a tangible representation of the design challenge, allowing the team to identify patterns, highlight discrepancies, and ultimately inform the development of a unified and consistent design system.
Roadmap
After addressing inconsistencies in the user interface landscape, the SHAPE Design System team developed a roadmap to guide its evolution. The plan extends SHAPE beyond individual UI components to include:
Physical and digital user interfaces, ensuring a unified brand experience across all touchpoints.
Integrated prototyping, design, and development toolchains, fostering collaboration and high-fidelity builds between engineering and design teams.
A shared vocabulary for consistent feature names, controls, and iconography, simplifying user learning across products.
User feedback integration, leveraging data from sensors, remote monitoring, and user behavior to refine both the product and its development process.
This roadmap transforms SHAPE into a comprehensive system, addressing the complexities of delivering a cohesive user experience for a global brand like Electrolux.
Roadmap
After addressing inconsistencies in the user interface landscape, the SHAPE Design System team developed a roadmap to guide its evolution. The plan extends SHAPE beyond individual UI components to include:
Physical and digital user interfaces, ensuring a unified brand experience across all touchpoints.
Integrated prototyping, design, and development toolchains, fostering collaboration and high-fidelity builds between engineering and design teams.
A shared vocabulary for consistent feature names, controls, and iconography, simplifying user learning across products.
User feedback integration, leveraging data from sensors, remote monitoring, and user behavior to refine both the product and its development process.
This roadmap transforms SHAPE into a comprehensive system, addressing the complexities of delivering a cohesive user experience for a global brand like Electrolux.
Mobile First
The initial focus of the SHAPE Design System was on native mobile applications. This strategic decision stemmed from the recognition that mobile interactions were becoming increasingly crucial to the user experience of Electrolux products. The team recognized the need to create a cohesive and consistent experience across various mobile touchpoints, including companion apps, product control interfaces, and customer support channels.
By prioritizing mobile, the team aimed to establish a solid foundation for a unified design language that could later be extended to other platforms, such as web and appliances. This approach also aligned with the growing trend of users relying on their mobile devices to interact with smart home appliances and access product information. Focusing on mobile allowed the SHAPE team to quickly iterate and test design patterns in a rapidly evolving technological landscape. This early emphasis on mobile UI design laid the groundwork for a more comprehensive and user-centered design system that would ultimately encompass the entire Electrolux brand ecosystem.
Mobile First
The initial focus of the SHAPE Design System was on native mobile applications. This strategic decision stemmed from the recognition that mobile interactions were becoming increasingly crucial to the user experience of Electrolux products. The team recognized the need to create a cohesive and consistent experience across various mobile touchpoints, including companion apps, product control interfaces, and customer support channels.
By prioritizing mobile, the team aimed to establish a solid foundation for a unified design language that could later be extended to other platforms, such as web and appliances. This approach also aligned with the growing trend of users relying on their mobile devices to interact with smart home appliances and access product information. Focusing on mobile allowed the SHAPE team to quickly iterate and test design patterns in a rapidly evolving technological landscape. This early emphasis on mobile UI design laid the groundwork for a more comprehensive and user-centered design system that would ultimately encompass the entire Electrolux brand ecosystem.
The Physical UI
The development of SHAPE for physical user interfaces presented a unique challenge, as it required bridging the gap between the digital realm of mobile apps and the tangible, physical controls of home appliances. It was my vision to create a unified user experience across both physical and digital touchpoints, extending the SHAPE Design System to encompass this crucial aspect of the Electrolux brand experience.
After the initial success of implementing SHAPE for mobile applications, the team was prepared to address the fragmentation and inconsistency that existed within the physical user interfaces of various Electrolux appliances. This involved considering not only the buttons, knobs, and displays on the appliances themselves, but also the accompanying physical elements such as user manuals, installation guides, and packaging.
The Physical UI
The development of SHAPE for physical user interfaces presented a unique challenge, as it required bridging the gap between the digital realm of mobile apps and the tangible, physical controls of home appliances. It was my vision to create a unified user experience across both physical and digital touchpoints, extending the SHAPE Design System to encompass this crucial aspect of the Electrolux brand experience.
After the initial success of implementing SHAPE for mobile applications, the team was prepared to address the fragmentation and inconsistency that existed within the physical user interfaces of various Electrolux appliances. This involved considering not only the buttons, knobs, and displays on the appliances themselves, but also the accompanying physical elements such as user manuals, installation guides, and packaging.
Key Learnings
Centralized design governance drives consistency and efficiency. Breaking down silos and fostering cross-team collaboration is essential.
Visualizing complex systems accelerates understanding and consensus. The analog method of grouping UI elements proved highly effective in identifying design challenges and opportunities.
Adaptability and scalability are vital for a design system’s success. SHAPE’s expansion to web, physical UIs, sound, and CMF illustrates its flexibility.
User-centered design ensures relevance and impact. Incorporating user research and feedback throughout SHAPE’s development aligned the system with user needs.
The SHAPE Design System exemplifies the power of unified vision and collaboration, streamlining design and development while creating a cohesive, consistent, and user-friendly brand experience for Electrolux.
Key Learnings
Centralized design governance drives consistency and efficiency. Breaking down silos and fostering cross-team collaboration is essential.
Visualizing complex systems accelerates understanding and consensus. The analog method of grouping UI elements proved highly effective in identifying design challenges and opportunities.
Adaptability and scalability are vital for a design system’s success. SHAPE’s expansion to web, physical UIs, sound, and CMF illustrates its flexibility.
User-centered design ensures relevance and impact. Incorporating user research and feedback throughout SHAPE’s development aligned the system with user needs.
The SHAPE Design System exemplifies the power of unified vision and collaboration, streamlining design and development while creating a cohesive, consistent, and user-friendly brand experience for Electrolux.
My Role
Pitched the SHAPE Design System to executive leadership, securing funding and organizational buy-in
Led the initiative from inception through three major releases, building cross-functional momentum
Hired and onboarded the first Design System Lead and Engineer, establishing a dedicated team and governance model
Directed design strategy across mobile, web, voice, sound, and physical interfaces
Developed and promoted processes, governance models, and organizational alignment for adoption
Accountable for all deliverables, demonstrating ROI, and implementing the operational and governance model
My Role
Pitched the SHAPE Design System to executive leadership, securing funding and organizational buy-in
Led the initiative from inception through three major releases, building cross-functional momentum
Hired and onboarded the first Design System Lead and Engineer, establishing a dedicated team and governance model
Directed design strategy across mobile, web, voice, sound, and physical interfaces
Developed and promoted processes, governance models, and organizational alignment for adoption
Accountable for all deliverables, demonstrating ROI, and implementing the operational and governance model