Salt Mobile
Context

Salt was moving its website from Drupal to Magnolia CMS. The existing experience lacked consistency and structure: content was hard to manage and offers were hard to understand.

Challenge

Simplify how offers are structured, make the customer journey clearer, and build a design system that scales with the new CMS.

My role

Lead UX/UI Designer and E-commerce Manager, end to end: audit, UX, UI, design system and handoff. I mentored a designer, guided graphic designers through component reviews, and aligned business, product and IT.

Salt Mobile: 01 / Context
01Audit

Audit of the existing journeys

I reviewed the homepage, device pages and plan pages side by side. Layouts were inconsistent, hierarchy was unclear and journeys were fragmented, which made plans and offers hard to compare.

Drag the handles below to compare the three templates redesigned first.

02Structure

A modular page zoning system

Before any visual design, I defined how pages are built: a zoning system aligned with Magnolia's component architecture, mobile first.

High-fidelity wireframes then became the shared reference for product, marketing and engineering.

Salt Mobile: 03 / Audit
Salt Mobile, image 6
Salt Mobile: 04 / Before and after
Salt Mobile, image 8
Salt Mobile, image 9
03Components

Components built for conversion and for the CMS

Each component was designed once and reused across mobile, fibre and e-commerce pages.

  • 01Pricing cards for B2C, B2B and Fiber
  • 02A clear button hierarchy
  • 03A device configurator designed for Magnolia integration
Salt Mobile: 05 / Wireframes
Salt Mobile, image 11
Salt Mobile, image 12
Salt Mobile: 06 / Components
04Multi-brand

One base, themed per brand

The key decision: one shared component base, with brand differences handled by themes instead of duplicated libraries. The brands had to stay distinct, but rebuilding components for every campaign was what created the inconsistency.

The Salt UI kit became the base for Lidl Connect. Switch the brand below: the component stays the same, only the tokens change.

Primary
#0A0A0A
Accent
#2DB34A
Card radius
16px
Button radius
pill
Headline weight
700
Simplified tokens and sample content, for illustration.
SaltBest seller
Mobile M
  • Unlimited calls and SMS
  • 20 GB data in Switzerland
  • No commitment
CHF29.95/ month
Choose plan
Salt Mobile: 07 / Multi-brand
Salt Mobile, image 15
05Journeys

Four key journeys, redesigned

  • 01Discover and compare devices
  • 02Configure and purchase
  • 03Choose a mobile plan
  • 04Explore internet and TV offers
Salt Mobile: 08 / Key journeys
Salt Mobile, image 17
Salt Mobile, image 18
Salt Mobile, image 19
Salt Mobile, image 20
Salt Mobile, image 21
Salt Mobile, image 22
Salt Mobile, image 23
Salt Mobile, image 24
06Governance

Quality as a release condition

Specifications, component documentation, design tokens and CMS requirements were written with the developers, so the system could be implemented and maintained in Magnolia.

I then formalised quality and compliance standards (WCAG, publication criteria) and built them into the release process. Accessibility stopped being a late fix and became a condition for going live.

Figma became the shared source of truth across the company. I drove its adoption team by team, showing each one what it gained.

Salt Mobile: 09 / Implementation and results
Salt Mobile, image 26
Outcome
  • 2x mobile product conversion in 8 months, after redesigning product tables, product pages and checkout
  • 50+ reusable components shared across brands
  • Accessibility and publication checks built into every release
  • Faster page creation across teams
Next projectView project ↗
Lidl Connect