Project Details
Client:
Expertise:
Lead UX/UI Designer & E-commerce Manager
Scope:
UI Kit & Design System
Website & E-commerce UX/UI
Component & Layout System
CMS Migration Support
Developer Handoff
Description
Leading the redesign of Salt’s e-commerce platform and building a scalable design system to support the migration to Magnolia CMS. Salt is Switzerland’s third largest telecommunications provider, serving over a million mobile customers and a rapidly growing fibre network. As part of the migration from Drupal to Magnolia CMS, the digital platform required a complete redesign and the creation of a scalable UI foundation for Salt’s evolving e-commerce ecosystem. The project established a reusable component architecture, redesigned key e-commerce journeys, and aligned product, engineering, marketing, and design teams around a shared UX foundation for Salt’s digital platform.
01 - PROJECT CONTEXT
Context & Business Challenge
Salt’s digital platform is currently migrating to Magnolia CMS to enable greater scalability and a modular architecture. The existing experience lacked consistency and structured layouts, making content difficult to maintain and scale. Customer feedback also revealed that users struggled to understand offers, plan differences, and bundles, creating friction in the purchase journey. This project aimed to clarify the offer structure, improve the customer journey, and lay the foundation for a scalable design system across Salt’s e-commerce ecosystem.
02 - SYSTEM STRATEGY
Design System & Architecture Foundation
The redesign was approached as a platform transformation rather than a one-off visual update. A scalable design system was built around Magnolia’s component architecture to ensure consistency, faster delivery, and long-term scalability across Salt’s digital ecosystem. The system was also designed to support multi-brand scalability, enabling the same component architecture and UX foundations to be adapted and deployed across additional brands such as Gomo and Lidl, while maintaining visual flexibility and brand-specific identity.
ARCHITECTURE
Layouts mapped directly to Magnolia components, enabling flexible and scalable page creation.
SYSTEM
Standardised UI components to reduce duplication, accelerate delivery, and ensure consistency across the ecosystem.
UX
Structured layouts and clear hierarchy designed to improve decision-making and increase conversion across product and checkout journeys.
CONSISTENCY
Unified visual language across mobile, fibre, and e-commerce experiences.
Platform Audit & UX Issue
An audit of the existing platform revealed inconsistent layouts, unclear content hierarchy, and fragmented user journeys. Users struggled to understand plan differences, bundled offers, and product structures, increasing cognitive load and reducing confidence during the purchase journey. These insights defined the key UX priorities for rebuilding the experience.
Homepage Drupal → Magnolia
Devices page Drupal → Magnolia
Simopage Drupal → Magnolia
Page zoning & layout structure
Based on the audit insights, a new page structure was defined to create clearer information hierarchy and more consistent layouts across the platform. The new zoning system introduced reusable sections, improved content grouping, and simplified plan comparison to support scalability within the Magnolia CMS environment.
Responsive high-fidelity components
Components were designed with a mobile-first approach to ensure consistent behaviour across desktop, tablet, and mobile breakpoints.
High-fidelity wireframes
High-fidelity wireframes translated structural zoning into detailed page layouts, defining content hierarchy, interaction patterns, and UX writing. They helped validate plan structures and ensure users could easily understand and compare offers. Wireframes were reviewed through cross-team workshops with product, marketing, and development stakeholders to align functionality, user flows, and technical feasibility before moving into final UI design.
Homepage: Prioritises offer visibility, plan comparison, and product discovery.
Product Page: Clarifies device configuration, plan selection, and purchase actions to support faster decisions.
Product Page: Clarifies device configuration, plan selection, and purchase actions to support faster decisions.
Modular Component System
A reusable component library was created to standardise layouts and interactions across the platform. This modular approach reduced duplication, improved design consistency, and enabled faster creation of new pages and features.
Reusable pricing card components with multiple variants and states.
Button system covering sizes, hierarchy, and interaction states.
Device configurator components built for Magnolia CMS integration.
Component Specifications & Requirements
Each component was documented with functional and technical specifications aligned with Magnolia CMS, ensuring accurate implementation, consistency, and scalability.
Design System & Magnolia CMS Integration
The design system was built in alignment with Magnolia CMS component architecture, ensuring seamless integration between design and development. Its modular structure enables the system to be reused and adapted across multiple brands while maintaining each brand’s visual identity.
Salt UI Kit
Core design tokens, typography scale, and Magnolia-aligned components.
Lidl Connect UI Kit
Adaptation of the design system to the Lidl Connect brand.
Gomo UI Kit
Brand implementation using the shared component architecture.
03 - EXPERIENCE DESIGN
UX & E-commerce Experience
Key e-commerce journeys were redesigned to improve clarity, reduce friction, and support user decision-making. Clear visual hierarchy, structured layouts, and simplified comparison flows help users understand offers faster and navigate the purchase process with greater confidence. The experience establishes a scalable UX foundation aligned with Salt’s design system architecture.
Final UI & Key User Journeys
The final interface reflects a consistent, scalable, and conversion-focused experience across desktop and mobile. Structured layouts, reusable components, and clear visual hierarchy ensure a consistent and scalable digital experience. The final interface was tested with real users to validate the clarity of the experience and ensure that key journeys such as plan comparison, device configuration, and checkout were easy to understand and complete.
Step 01 - Discover & Compare
Homepage experience
Step 02 - Configure & Purchase
Product & bundle selection
Step 03 – Choose a Mobile Plan
SIMO mobile plans experience
Step 04 – Explore Internet & TV Offers
Home internet & TV experience
04 - DESIGN SYSTEM
Developer Collaboration & Implementation
Close collaboration with developers ensured accurate implementation of the design system and Magnolia-aligned components. Detailed specifications, component documentation, and design tokens enabled efficient development and consistent rollout of new features. The project required cross-team alignment between product, engineering, marketing, and design stakeholders to establish a shared foundation for Salt’s digital platform.
05 - OUTCOMES
Results & Impact
The project established the foundation of a scalable design system aligned with Magnolia CMS, enabling faster page creation and more consistent user experiences across Salt’s digital ecosystem. The redesigned structure simplifies plan comparison and clarifies offer hierarchies, helping users better understand subscriptions, devices, and bundle options during the purchase journey. The modular component architecture also improves content scalability, allowing teams to create and deploy new pages more efficiently while maintaining design consistency across multiple brands.