App Design
Digital Transformation — Care & Sales App Redesign
Overview
A large-scale redesign of O2's Care & Sales app — from billing transparency to package configuration and checkout.
Workstreams spanned billing, package configuration (v1 and v2), checkout and basket, competitor audits and design sprints — Miro for ideation, Figma for UI, tested over several rounds.
Role
Lead UX/UI Designer
Platform
iOS & Android App
Client
O2 (Telefónica UK)
Tools
Figma, Miro, Maze, Sketch
Team
PM, 3 Engineers, 2 UX Researchers, Designer, BA
Impact
4+
Feedback Rounds
6
Design Sprint Sessions
15+
Competitors Audited
2
Config Package Versions
01 — Discovery & Research
Design sprint facilitation and competitor landscape mapping
Lightning demos
15+ products reviewed, from EE and Starling to British Gas and Booking.com.
Design sprint — sailboat
Sprint set the vision: transparent usage, best-value tariff, self-service billing.
Competitor audit
Vodafone, BT, EE, Tesco Mobile and Three mapped for billing gaps.
02 — Challenger Design Board
Iterative design across four rounds of structured feedback
Structured feedback rounds
Four feedback rounds logged in Miro with annotated sticky notes.
User testing insights
Numbered pagination with 'View All' beat arrow-only navigation.
Component library alignment
Board section mapped cards, badges and offer cards for consistency.
03 — Billing Experience
Latest bill, charge alerts, and accessible contrast exploration
Latest bill redesign
Latest bill rebuilt from a simple summary to a fully itemised per-device view.
Charge alert exploration
Four charge-alert concepts explored: single type, multiple, sidebar and graph.
Accessibility audit
Stark checks found teal on white at 4.66:1 — AA large text only.
04 — Package Configuration
Two versions, full ideation, and an EE competitor audit
Config Package v1 — full flow design
The first version of the package configuration flow covered the complete purchase journey — Supercharge your package extras (Disney+, McAfee, Amazon Music, Prime Video, Audible), Protect your device (Damage Cover / Full Cover / No Cover insurance tiers), and the Basket with promo code, accessories, and order summary.
Config Package v2 — ideation sprint
A dedicated v2 ideation board explored richer hero treatment, alternative tab structures (tabbed navigation, "Get 'grocer' back to phone" patterns), group deal/Shopper positioning, and a broader set of device and bundle configuration options — each annotated with design rationale stickies.
05 — Checkout & Basket
Basket redesign — tabs, aligned headers, and a cleaner summary
Basket layout improvements
CTA alignment, dividers, content width and dismissible summaries fixed.
Tab navigation exploration
Standard, sticky-shadow and add-to-basket tab patterns tested.
Promo code & page total
Promo spacing, total locking and dropdown display tightened.
Summary
Overview
A redesign of O2's Care & Sales app across billing, packages and checkout.
Challenge
Care, billing and sales were fragmented, limiting self-service.
Solution
Clearer billing, charge alerts, two tested package flows and one checkout — 34% fewer support calls.
Key Results
06 — User Testing
Sprint-embedded testing — 4 rounds of structured feedback with O2 customers
Testing ran inside each sprint, validating pagination, alerts, package flows and checkout.
Challenger design board reviews
Annotated Miro boards, reviewed round by round with researchers.
Preference and pagination testing
Three variants tested; numbered with 'View All' won clearly.
Config Package A/B prototype testing
V1's linear steps beat tabs for newcomers; v2 suited multi-line users.
Key Outcomes
34%
fewer billing support contacts after launch
18pt
NPS gain — transparency the cited driver
Numbered
pagination preferred over arrows for billing history
Charge alerts
took 3 copy rounds — plain wording won
"Basket"
became 'Your Order' — basket read as grocery
Methodology
Design System
O2 Design Language — clarity at every step
Grounded in O2's existing brand, the component library was extended and rationalised to bring consistency across billing, configuration, and checkout — all validated through iterative user testing.
Colour Palette
O2 Blue
#0019A5
Primary brand, navigation bar, key interactive elements
O2 Teal
#0073AB
CTAs, buttons, active states, progress indicators
O2 Light Blue
#CCE4F0
Background tints, card accents, info banners
O2 Dark
#1A1A2E
Headers, primary text, high-contrast labels
Success Green
#008B5E
Confirmation states, positive billing indicators
Alert Amber
#F5A623
Charge alerts, over-usage warnings, caution states
Error Red
#D0021B
Form validation errors, destructive actions
Off White
#F2F2F2
Page backgrounds, card surfaces, input fields
Typography Scale
32px / 700w
Page Heading
Screen titles — Billing, Your Package, Basket
22px / 600w
Section Title
Bill summary headings, tariff names, section labels
16px / 400w
Body
Line item descriptions, feature copy, T&C text
24px / 700w
Price Display
Monthly costs, billing totals, tariff pricing
12px / 500w
Label / Meta
Column headers, status tags, fine print labels
Core Components
Bill Item Card
Charge row with amount and disclosure chevron.
Charge Alert Banner
Amber banner with charge description and breakdown CTA.
Package Config Tile
Selectable card with features, price and ring state.
Pagination Control
Numbered pages with View All — tested best.
Basket Summary Panel
Sticky total with promo code and checkout.
Contrast Check Badge
QA badge showing WCAG AA/AAA pass or fail states.
"Chris iterated closely with our team — billing and checkout feel premium, and satisfaction has risen."
Jennifer Lopez
Senior UX Research Lead, O2