Story 3 Movistar · Telefónica · multidevice

Designing across
connected consumer experiences

Three products. Three interaction models.

3Products
−12%Call centre calls
2019Released
End to end Multiplatform Interaction design Design systems Technical constraints
Two years at frog for Telefónica, across web, mobile and television. This case follows Smart WiFi Selfcare all the way down. Some of this work cannot be shown as it was built. The interfaces here are redrawn and the data is altered; the decisions, constraints and outcomes are not.
01
The work

Three products. Three different design challenges.

Conexión Segura: a security dashboard listing threats blocked this month, devices covered, trusted pages and permission requests.
01 · Web

Conexión Segura

Security self-service dashboard.

Business goal

Increase service activation and improve service management.

Smart WiFi Selfcare: the diagnostic running, its results, and the help content that follows from them.
02 · Mobile · iOS + Android

Smart WiFi Selfcare

Connectivity diagnosis and self-service.

Business goal

Increase self-service and reduce calls to 1002.

Living Apps on television: an IKEA interior design course with its episodes laid out along the bottom of the screen.
03 · TV · Remote · Voice

Living Apps

TV experiences and partner-built Living Apps.

Business goal

Enable Telefónica partners to create and update Living Apps more independently.

The challenge

Design simple experiences while working within very different technical, business and interaction constraints.

02
Smart WiFi Selfcare

How can the experience make a slow technical process understandable enough that users stay with it instead of abandoning it and calling support?

The problem

Movistar's Smart WiFi experience spanned different touchpoints, but users needed to understand and manage a technically complex connectivity problem.

Business goal

Increase self-service and reduce dependence on customer support.

The Selfcare screens stacked together: the autodiagnostic menu, the speed test with its download and upload figures, the quality verdict, and the illustrated help topics on cable care and device load.
Smart WiFi Selfcare · the touchpoints the feature spans
Business goal

Decrease calls to 1002 by making users feel in control.

03
My role

Designing inside the constraints, not around them

I was the UX designer on the feature, working within Movistar's existing design system and alongside the engineering team building it.

  • 01End-to-end interaction and navigation flow for the Selfcare feature
  • 02Edge-case mapping with engineering across iOS and Android
  • 03Motion design for the diagnostic sequence, to make waiting legible
  • 04A set of original illustrations for the help and FAQ content
  • 05Final designs delivered within the Movistar design system
The work

The flow engineering could break

I brought a wireflow to every grooming session. Not a finished design for approval: a working flow that engineering could break, so technical reality shaped it while it was still cheap to change.

The Selfcare wireflow: every screen of the diagnostic journey connected by decision points, with the permission refusals, the location-disabled states and the recovery paths drawn in alongside the happy path.
Wireflow taken into grooming · Smart WiFi Selfcare, Movistar
The idea

“There are two kinds of time: clock time and brain time.”

The test was slow and would stay slow. Accepting that moved the problem from speed to comprehension, and comprehension was solvable.

The diagnostic running on the phone: a single expanding pulse with the stage named underneath, so the wait reads as progress rather than absence.
The test running
Smart WiFi

Final UI

The shipped Selfcare screens laid out together: the autodiagnostic menu, the speed test running, download and upload results, the quality verdict with its recommendation, and the illustrated help articles on cable care, interference and device load.
Smart WiFi Selfcare · the shipped experience
The research

Where the problems were written down

A workshop wall: hand-written notes about what users do not understand, grouped into themes and pinned beside sketched screen options for the dashboard, the device list and the notifications.
Workshop wall · synthesis and early screen options
04
How I would measure it

Do people stay with the wait?

No product analytics were available to me on this work, so this is the plan rather than the result. Written as it would go to the team.

Target behaviourFinishing the diagnostic instead of abandoning it partway and calling support
Event to instrumentTest started, test completed, test abandoned, and the stage it was abandoned at
The questionWhere in the sequence do people leave, and does naming that stage change it?
At thirty daysAbandonment concentrated at one stage is a copy problem. Spread evenly, it is a duration problem
03
The outcome

People diagnosed their own connection

We couldn't make the test faster. We could make the waiting understandable.

−12%Call centre calls
Released2019, inside the Movistar Smart WiFi app
Experience

Progress · feedback · motion · illustration.

System

iOS + Android · technical states · permissions · device conditions · navigation · edge cases.

The build

Wireflows brought into engineering grooming · close front-end collaboration · Movistar Mystica design system · micro-interactions · illustrations.

Business goal

The design didn't remove the technical constraint. It translated it into an experience people could understand and complete.