Digital Transformation
App & Ecommerce Platform — Mobile Connectivity Redesigned
Overview
A redesign of Sky Mobile's app and ecommerce — account management, package discovery and checkout.
An app and desktop platform for plans, usage and upgrades — clarity first, in Sky's magenta and rainbow palette.
Role
Lead UX/UI Designer
Platform
iOS & Android App + Desktop
Client
Sky Mobile (Telefónica UK)
Tools
Figma, Sketch, Principle
Team
PM, 2 Engineers, UX Researcher, Designer
Impact
8M+
Active Users
4.6★
App Rating
32%
Engagement Lift
3
Campaign Waves
01 — Social Media Campaign
We're tripling data — a bold, vibrant campaign
Bold colour palette
The magenta-to-purple gradient, instantly recognisable.
Playful messaging
"We're tripling data" with celebratory emojis and SIM iconography — making complex telecom offers feel accessible and exciting.
Multi-channel consistency
Facebook, Instagram, and in-app messaging share the same visual language, reinforcing the campaign across journeys.
02 — App Interface Design
Making mobile plans simple and intuitive
Data Usage & Plan Management
Circular data visualisations show at-a-glance usage, combined with clear plan information and actionable CTAs for upgrades. The magenta accent colour draws attention to key interactions.
Plan Details & Offers
A structured card-based layout breaks down plan components (data, calls, texts, international saver) with colour-coded sections for quick scanning and decision-making.
Data visualisation
Circular progress indicators and colour-coded rings make data consumption (3.8GB of 5GB) tangible at a glance.
Clear hierarchy
Primary actions ("Manage my plan", "Upgrade") prioritised with magenta buttons; secondary options use lighter styling.
Consistent typography
Clean sans hierarchy with large, readable body text.
03 — Design System & Brand
A cohesive visual language across all touchpoints
The design system unifies the rainbow identity across iOS, Android and desktop.
Colour Palette
Sky Magenta
#E0006E
Primary brand colour — CTAs, active states, data ring highlights, key interactions
Sky Orange
#FF6B35
Campaign gradient — social ads, promotional banners, hero backgrounds
Sky Purple
#7B2D8B
Rainbow gradient endpoint — brand illustrations, icon system accents
Sky Pink
#FF69B4
Mid-gradient tone — campaign visuals, celebration states, loading indicators
Sky White
#FFFFFF
Primary content surface — card backgrounds, form inputs, product panels
Dark Slate
#1A1A2A
Dark mode backgrounds, header overlays, footer surfaces
Text Primary
#1C1C1E
Body copy, plan names, pricing figures, product titles
Text Secondary
#6E6E78
Labels, hints, metadata, secondary plan details
Typography Scale
48px / 700w
Display / Hero
Campaign headlines — 'We're tripling data', hero page titles
32px / 600w
Heading 1
Section headers — 'Find your perfect phone', 'Your plan'
22px / 600w
Heading 2
Card headings, plan names, product titles
16px / 400w
Body
Plan descriptions, onboarding copy, product details
12px / 500w
Label / Badge
Filter tags, plan feature bullets, step labels
28px / 700w
Price
Monthly pricing figures — dominant anchor in product and plan cards
Core Components
Data Usage Ring
Circular GB progress, shifting to amber near the limit.
Plan Card
Features, colour-coded sections and a magenta CTA.
Phone Product Card
Device, colours, social proof and price without a detail page.
Progress Stepper
Five-step checkout with green completion ticks.
Brand Filter Pill
Scrollable brand pills, magenta when active.
Promotional Banner
Contextual offer strip, dismissible per session.
Summary
Overview
A redesign of Sky Mobile's app and ecommerce, simplifying plans and checkout for 8M+ users.
Challenge
Tariffs were hard to read, data usage unclear, upgrades fragmented across app and desktop.
Solution
One app with clear data rings and checkout, plus responsive ecommerce — up 32% engagement, 4.6★.
Key Results
04 — User Testing
Real customer validation — testing plan comprehension and checkout confidence
App and desktop testing covered data comprehension, upgrade clarity and checkout drop-off.
In-home app observation sessions
Own handsets, own lighting — testing the data ring in real conditions.
Checkout A/B prototype testing
Accessories after plan vs as a standalone step, flow tracked end to end.
Competitor benchmarking sessions
Side-by-side tests measured clarity, trust and ease of comparison.
Key Outcomes
32%
engagement gain after the data ring redesign
4.6★
App Store rating, up from 3.8★
Variant B
checkout adopted — 66% more accessory attachment
"Piggybank?"
most-asked question — explanation card added
Brand filters
cut time-to-selection by 41%
Methodology
05 — Ecommerce Phone Discovery
Browsing and selecting the perfect phone
Brand filter navigation
Apple, Samsung, Google and more, to narrow the catalogue fast.
Social proof badges
'#1 bestseller' and 'Trending' badges guide the undecided.
Clear pricing cards
Device, colours and monthly price at a glance.
06 — Product Detail & Checkout Flow
A guided 5-step checkout reducing drop-off
Progress stepper
Five steps from phone to checkout, with completion ticks.
Contextual promotions
Upsells surface at the right moment, never blocking the flow.
Accessories upsell
Add-ons spread across the monthly plan — Buds at £7/mo.
"Chris modernised our app and ecommerce platform — the system keeps every touchpoint consistent."
Andrew Watson
VP Digital Products, Sky Mobile