01 · Telecom · B2C e-commerce
UX/UI Designer Deutsche Telekom 4 months Concept to hand-off

From Friction
to Flow

I redesigned the product configurator of a large European telecom provider. The old flow showed every decision at once. The new one guides customers through one decision at a time, with clear prices and visible progress.

White-labeled case study. Client screens are recreated under the brand "telvia".

4 monthsFrom audit to developer hand-off
3 phasesEvaluation, concept, design and delivery
50%Task success in the internal test of the old flow
4 viewportsDesigned for desktop, tablet and mobile
The problem

A configurator losing customers at every step

The old configurator showed the tariff, every configuration step and every checkout step on one crowded screen. There was no clear progress indicator, prices were hard to follow, and changing an earlier choice was difficult. Many people gave up or called support.

Customer, before"I see too many options at once. I'm not sure what things cost or what comes next, so I give up or call support."

Lost sales

Customers dropped off before checkout.

Weaker campaigns

Paid traffic landed on a page that did not convert.

Support costs

Confused customers needed help to finish simple orders.

Goals and process

Two goals, three phases

Goal 1

More completed orders

A clear, transparent flow that builds confidence at the point of purchase.

Goal 2

Healthy cross-selling

Add-ons shown as optional, useful choices, never as pressure.

01

Evaluation and insight

Find where and why people struggle.

Heuristic evaluationUX lawsGestalt reviewUsability test
02

Concept

Turn the findings into a modular flow and test it with the client.

User flowWireframesClient validation
03

Design and delivery

Build, refine with the client, and hand off to engineering.

Hi-fi prototypeIterationHand-off
Evaluation

What was wrong with the old flow

A heuristic evaluation, a Gestalt review and a quick internal test all pointed to the same three problems.

Old configurator with three highlighted areas: the price box, two step lists in the sidebar, and the remaining steps under the form
The old configurator (white-labeled).
  1. 1

    Prices hidden in a small box

    The monthly price and the price after month 6 sat in a collapsed box, away from the choices that changed them.

  2. 2

    Two step lists that look the same

    Configuration and checkout steps sat side by side. Users could not tell where they were.

  3. 3

    No sense of progress

    The remaining steps were listed under the form, with no indication of how much was left.

Methods
Heuristic evaluationGestalt reviewMiller's, Jakob's and Hick's lawsInternal usability test
4Participants
2Core tasks
3Critical issues
50%Task success
Concept

From one crowded page to modules

I broke the page into modules, one per product type, and validated the flow with the client before any visual design.

Two wireframes of the modular configurator. Numbered pins mark the progress flow, the open module, the summary bar, the chosen product, its price and the sticky summary.
Wireframes (recreated): first module open on the left, first module done on the right.
  1. 1

    Progress flow

    A stepper shows where people are.

  2. 2

    Modular configurator

    One module per product type, one open at a time.

  3. 3

    Transparent pricing

    A summary of price and configuration.

  4. 4

    Visual and contextual support

    A finished module shows the chosen product.

  5. 5

    Information clarity

    Price and "Edit" stay next to each choice.

  6. 6

    Streamlined checkout

    The summary stays sticky, with a direct way to the cart.

Approved

Modular configurator

The client approved the step-by-step approach.

Client requirement

Mostly sequential flow

Steps stay in a fixed order to support cross-selling. Customers can still skip ahead with "Zum Warenkorb".

Confirmed

Progress indicator

It keeps people oriented, especially through steps they cannot skip.

Solution

One decision at a time

01 / 04
Only the WLAN module is open and highlighted; the finished router module above is dimmed
Customer, after"I go step by step, always see my progress and my total, and can change anything before I order."
Iteration

What the client's review changed

After the prototype, the client reviewed every screen. Their comments led directly to these changes. Names are hidden.

Reviewer name
"The 'continue without' links should be more visible, as buttons. Right now they look like normal links."

Die Links „ohne … fortfahren" sollten als Button visuell sichtbarer gemacht werden.

→ Change 4
Reviewer name
"The reduced header is acceptable. The full header only comes in a later stage."

Aktueller verwendeter reduzierter Header ist akzeptabel.

→ Change 2
Reviewer name
"It is technically possible to book more than one TV Flex."

Es ist auch technisch möglich, mehrere … TV Flex zu buchen.

→ Change 3
Reviewer name
"Make the dependency on the customer's tariff clearer."

Deutlicher herausstellen: Abhängigkeit vom Tarif des Kunden.

Engineering

Two user journeys

The availability check separates new customers and switchers, so contract data shows correctly for each.

Brand

Reduced header and footer

Keeps the brand without menu distractions inside the configurator.

Usability

Product counters

Products that can be booked more than once got quantity counters.

Business

Clearer skip option

The final module got a more visible way to skip, which reduces friction.

Live prototype

Try the redesigned flow

The prototype runs right here. Switch between desktop, tablet and mobile to see how the layout adapts.

  1. 1Pick a router
  2. 2Confirm your choice
  3. 3Watch the price bar update
1280 × 800 Open full prototype ↗
Configurator preview — click Start prototype to interact
Outcome

What changed

Fewer drop-offs

The client reported a lower abandonment rate and better task completion.

Fewer pricing questions

Transparent pricing got positive feedback and reduced confusion about costs, and with it the need to call support.

Better cross-selling

The client reported a positive lift in mobile add-on attach rates, without pushy patterns.

Exact figures belong to the client and are not public.