Reimagining a flexible plan experience at scale

Client
EE
Duration
6 months
Platform
Responsive web
Role
Product designer
Team
Product owners
Digital copywriter
User researcher
Solution architect
Development squads
Deliverables
User flows
Wireframes
Interactive prototypes
High-fidelity visuals
Design system specs
Expertise
‍Strategy
UX
UI
Tools
Sketch
Principle
Invision

The UK's no. 1 network

With over 35 million customers, EE runs the largest and most advanced mobile network in the UK.

Business problem

Smartphone consumers are opting to hang on to their existing smartphones for longer and growing increasingly wary of getting tied into rigid two year-long phone contracts.

Challenge

Reimagine the smartphone plan experience to facilitate a range of new flexible plans, open new streams of revenue and pave the way for the forthcoming 5G launch.

Process

Implementing a design approach for rapid iteration and learning was crucial to keeping things manageable. We had a relatively short timeline. Numerous internal stakeholders would have to collaborate efficiently for us to hit our deadlines.
The process

Making sense of things

The first step was to get a feel of the multiple product purchasing journeys. This helped to build a clearer picture of how all the convoluted user experiences fitted together.
Journey touch points

Learning about the users

Usability testing the existing experience with numerous participants revealed important answers to the below questions.
  1. Was anything slowing users down?
  2. Which parts were too complex?
  3. Were there any new opportunities?

Observations

First-hand observations of what the common pain points were on mobile and desktop.
Previous product details pagePrevious product details page
Previous basket pageThe previous basket page

Research insights

Through further quantitative analysis we created a concrete understanding of what drives people's purchasing decisions.
  1. Data and price came out as the top features.
  2. Minutes, text and roaming came in as mid-tier.
  3. Plan name and benefits were least important.
Research insights
The workshop

Managing stakeholder priorities

Regular meetings with all the key stakeholders from numerous different departments enabled us to have tough conversations around prioritisation; together we identified risks, aligned on expectations and constructed a shared vision.

Focusing on goals not features

Framing the business objectives and user needs into focussed opportunity statements formed the foundation for the new experience. This helped us to explore ideas, gain alignment and drive decision making.
How might we statements

A better user flow

Further to our new strategy, I quickly identified key user flows and realigned them to facilitate as few steps and user interaction as possible.
The new checkout user flow
Wireframes

Identifying solutions

Once I had a good idea of the IA, I created early stage wireframes.

Prioritising small screens

The screens were designed mobile first to ensure that the most important content could be surfaced in the smallest spaces. The main interactive content was placed within the thumb's natural, sweeping arc to support one handed usage.
The thumb zone

The design system

I created a component-based design system in order to speed up development, accommodate scalability and improve overall site performance.
Atomic design

Colours & typography

Aqua and Yellow are EE’s two primary colours. Teal and Aqua may be similar, but it’s used to make sure designs are AA compliant and accessible to everyone. Consistent use of EE’s custom typefaces Nobblee and Rubrik is key in helping them to stand out from the crowd.
Colours
Typography
Iconography

Iconography

I redesigned EE’s iconography to maximize the impact of our designs across all applications, so that they were:
  1. Optimised for high pixel density displays.
  2. Maintained their legibility at small sizes.
  3. Provided ample touch targets.
  4. Reusable and interchangeable.

Unified spacing

Using an 8pt grid for an object’s dimensions and spacing, alongside a 4pt text baseline grid instantly provided consistency between components and user experience.
8pt grid
Components

Components

Each component was built to accommodate scalability, and work in harmony alongside each other.

Modules

Creating a systemic approach to the cards allowed for the intelligent organisation of information into more digestible chunks, aiding scannability.
Card UI

Testing and iterating the prototypes

High fidelity interactive prototypes were created to establish a realistic experience to encourage constructive user feedback. Iterative loops of design, test and learn helped to optimise the experience.

View mobile prototype ↗
View desktop prototype ↗

The impact

At the time of writing (2 months since launch), the redesign of the phone plan experience has had a significantly positive and measurable impact for both EE’s business and users.
The impact