Shape - Design System Implementation
Electrolux
Implementing Shape
Electrolux Aftermarket-site is their separate website for original spare parts & accessories. Electrolux main site was being implemented with a new token based design system, Shape. We were assigned to redesign the whole aftermarket website and streamline it with Electrolux original site.
While Shape provided the core components, several modules required adaptation for the aftermarket context. New components were designed to extend the system while maintaining visual and functional consistency.
Landing page - Mobile
Users can quickly reach the product they need, either by entering a product ID or navigating through category paths.
Landing page - Search interaction
The hero module allows users to search by product number directly from the landing page. As they type, relevant suggestions appear instantly, helping users find compatible spare parts without extra steps.
Product details page - Mobile
A structured and information-rich layout that helps users confirm compatibility and make confident purchase decisions. The page includes product details, pricing, installation guidance, and tools to verify if the part fits their appliance.
Product details page - Desktop
The product pages were designed to work seamlessly across devices, maintaining structure and clarity whether viewed on desktop or mobile.
Global navigation - Desktop
Designed the global navigation to be intuitive and consistent across desktop and mobile, guiding users seamlessly through the site.
Global navigation - Mobile
A three-step mobile navigation that balances hierarchy and simplicity, ensuring users can navigate complex structures effortlessly.
Consistent, yet adaptable
The design system was built on a strong token-based foundation, enabling flexible adaptations across multiple brand sites. By reusing the same core components, each brand could maintain its unique identity while staying consistent in structure, spacing, and interaction patterns.
Consistent System
Showcasing how shared components and structure create visual consistency, while allowing each brand to express its own identity.
UI Overview
Selection of a few components and interface elements.
Category page
Designed to help users find the right spare part for their appliance. The layout focuses on structured filtering.
Basket page
Basket page designed to give users a clear overview of selected products and totals, with intuitive actions for editing or removing items.