Sky Protect
TL;DR / Summary.
I led the UI design to deliver the Sky Protect website and supporting promotional materials. After defining requirements, the UX team created user flows and wireframes, which were approved by Sky. I then produced the UI using Sky’s branding, iterated through several design phases, and collaborated closely with Sky’s developers during build reviews. Post-launch, I designed the national email campaign and a supplementary promotional page, ensuring consistency across all touch-points.
The Brief.
Domestic & General partnered with Sky to offer Sky Protect - an insurance product covering Sky equipment such as boxes, routers, cabling and satellite dishes. Both companies agreed that a dedicated website was needed to explain the product, highlight its benefits, and allow customers to get a quote and purchase a plan. Supporting promotional materials, including an email campaign, were also required.
​
As Sky Protect sat within Sky’s domain, all design work had to follow Sky’s brand guidelines. Once the problem and requirements were agreed in early meetings, Sky supplied assets and a style guide. A project plan was then created, outlining objectives and assigning tasks across teams.
User Experience.
After product and legal approval of the site content, the UX team created a content inventory, structured the information hierarchy, and outlined the site architecture. User flows and journeys were developed to ensure customers could easily obtain a quote and buy a policy. An interactive modal was introduced for users who arrived via postal letters, enabling quick data entry. A Support page using an FAQ format was also proposed.
Desktop and mobile wireframes were created and validated against user personas provided by Sky. These wireframes embedded business KPIs, such as tracking the primary “Quote & buy” CTA, to understand potential drop-off points. After internal review and revisions, the wireframes were approved by Sky and moved into the UI phase.
Although ideal, formal usability testing was not included. This would have measured task success, identified usability issues, and validated the information hierarchy and user flows.
UI Conceptualisation.
The UI phase involved conducting research on Sky’s main site to ensure visual consistency; paying close attention to Sky’s application of branding attributes across layouts, typography, colour, imagery, gradients, CTAs and spacing.
Current iteration of Sky's UI
​​The header included logos, navigation and a secondary “Log in / Register” CTA. A branded “mirror flash” animation contained the hero section, which featured a title, supporting copy and a primary CTA, alongside promotional imagery supplied by Sky. Subsequent sections used Sky’s gradient backgrounds and alternating layouts to communicate key product information, supported by imagery, icons and infographics. The final section showcased Sky box types and linked users directly into the quote journey.
​
A later iteration, requested by Sky, replaced the hero image with a product video and introduced Sky's new Service Pledge. This meant a reorganisation of the page's information was needed to improve hierarchy. Additionally, this provided an opportunity to include new design patterns, such as the package pricing columns, and improve existing areas of the design to further align with Sky's branding. The 'Support' page retained its three-box structure with interactive questions, which adapted for mobile using a row layout.
​
Throughout the UI phase, regular internal reviews helped refine the designs before presenting them to Sky for approval. Once approved, all assets were exported and sent to Sky’s development team. Front-end builds were reviewed collaboratively to ensure brand accuracy and maintain design integrity.
Early design iterations of the Sky Protect site.
Later UI designs of the Sky Protect site
Post Production.
After launch, I designed desktop and mobile versions of the Sky Protect announcement email campaign, mirroring the look and feel of the website. The Development Team built the email while I consulted and assisted with testing across major email clients using Email on Acid. Once finalised and approved, Sky deployed the campaign to all UK customers.
​
Additional post-production work included a standalone page promoting Sky’s Service Call Protect. This page reused the Sky Protect visual language, typography, gradients, icons and structured layouts. A branded gradient roundel was designed to highlight a £5 saving. After positive feedback and minor revisions, assets were prepared and passed to Sky’s developers, following the same review process.
Sky Protect email campaign design
Service Call Protect UI design
