Sky Protect
TL;DR / Summary.
As a Mid-weight UI Designer at Domestic & General, working across the company's high-profile brand partnerships, the Sky Protect project represented one of the most significant client collaborations of my time there. Domestic & General partnered with Sky to create a dedicated subsidiary website promoting Sky Protect; a protection policy covering a range of Sky equipment.
The project spanned multiple design phases and deliverables; the Sky Protect website in desktop and mobile, a later revised iteration incorporating Sky's updated Service Pledge and package pricing, a dedicated Support page, a national email campaign deployed to all UK Sky customers post-launch, and a standalone Service Call Protect promotional page. Throughout, all design work had to faithfully adhere to Sky's brand guidelines, requiring a thorough independent study of Sky's visual language before a single screen was designed.
Working closely with the UX Team on wireframes and user flows, and collaborating directly with Sky's development team during build reviews, the project was delivered with Sky's approval across all phases and touch-points. A visit to Sky's London office with the Senior Content Writer and Senior Developer provided an invaluable opportunity to deepen our understanding of the brand, their design direction, and their operations first-hand.
The Brief.
Domestic & General partnered with Sky to offer Sky Protect; an equipment protection policy covering Sky boxes, satellite dishes, routers, cabling, and other connected devices, ensuring customers were covered should a fault occur and require repair or replacement. Both companies agreed that a dedicated subsidiary website was needed to explain the product, highlight its benefits, and allow customers to obtain a quote and purchase a plan tailored to their setup. Supporting promotional materials, including an email campaign to broadcast the product's availability to Sky's UK customer base, were also identified as requirements from the outset.
As Sky Protect would sit within Sky's domain, all design work had to faithfully follow Sky's brand guidelines to ensure a seamless experience for customers moving between Sky's main site and the subsidiary one. Sky supplied their brand style guide and assets accordingly. Once the requirements and objectives were validated in the initial meetings, a project plan was created outlining deliverables and assigning tasks across the relevant teams.
Sky Protect: Presentation slide created for the Domestic & General's Design Director
UX Research and Wireframing.
Following product and legal approval of the site content, the UX Team developed a content inventory, structured the information hierarchy, and outlined the site architecture. User flows and journeys were carefully mapped to ensure customers could efficiently obtain a quote and purchase a policy. Users arriving via postal letters were also accommodated through an interactive modal, enabling quick data entry to begin the quote journey. A dedicated Support page was also proposed, adopting an FAQ format to help customers quickly find answers around the Sky Protect policy.
Desktop and mobile wireframes were produced and cross-referenced with user personas provided by Sky, ensuring the interface being designed would meet the implicit and explicit needs of a variety of user types. Business KPIs were embedded within the wireframes from the outset, with the primary "Quote and buy" CTA identified as the key metric for measuring drop-off rates throughout the customer journey. Throughout the wireframing process, I worked alongside the UX Team, feeding into reviews and ensuring design considerations were factored in ahead of the UI phase. Following internal reviews and revisions, the wireframes were presented to Sky and received their approval.
A more thorough process would have included formal usability testing at this stage to measure task success, validate the information hierarchy and user flows, and identify any pain points that may have been overlooked. This would have provided valuable data to refine the wireframes further, however time and resource constraints meant the project progressed based on the internal review process instead.
Sky.com: Reviewing the client's UI
UI Design.
Before any design work began, I conducted thorough research on Sky's main website to understand how their visual language was applied across layouts, typography, colour, imagery, gradients, CTAs, and spacing. This independent study, combined with a visit to Sky's London office alongside the Senior Content Writer and Senior Developer, provided an invaluable opportunity to deepen our understanding of Sky's brand direction, design principles, and operations first-hand, ensuring the Sky Protect designs would feel authentically native to their ecosystem.
The header featured dual logos, navigation links, and a secondary "Log in / Register" CTA styled to Sky's secondary tier branding. Separating the header from the hero, Sky's branded "mirror flash" animation was incorporated, moving across the width of the page on scroll. The hero section featured a primary heading, supporting copy, and the primary "Quote and buy" CTA, alongside promotional programme imagery periodically supplied by Sky. Subsequent sections used Sky's gradient backgrounds and alternating image and copy layouts to communicate the product's key benefits, supported by device imagery, branded iconography, and infographics. The bottom section showcased a range of Sky box types which, upon user selection, linked customers directly into the quote journey.
Early design iterations of the Sky Protect site.
A later iteration, requested by Sky, replaced the hero image with a product video and introduced their updated Service Pledge, requiring a reorganisation of the information hierarchy. This provided an opportunity to refine existing areas of the design and introduce new patterns to better align with Sky's evolving brand. A package pricing column layout was created from scratch using assets provided by Sky, arranged into a package-build composition for each pricing tier to visually represent the type and extent of coverage available, helping users understand what each plan included before entering the quote journey. The Support page maintained a tile-based structure, consistent with Sky's application of similar components across their site, featuring interactive FAQs that revealed answers on selection, with the tiles removed on mobile in favour of a cleaner, more streamlined layout.
Throughout the UI phase, regular internal reviews with the UX and UI teams helped refine the designs before presenting to Sky for approval. Once approved, assets were exported and sent to Sky's development team, with front-end builds reviewed collaboratively to ensure brand accuracy and design integrity across all pages and resolutions.
Later UI designs of the Sky Protect site
Post-Launch Performance.
Following the launch of Sky Protect, I designed desktop and mobile versions of an announcement email campaign to inform Sky's UK customer base of the new protection policy. The email mirrored the look and feel of the website; applying Sky's gradient treatment to titles and backgrounds, integrating the package-build compositions and reusing the same iconography, typography, and colour palette to maintain visual consistency. The mobile version was adapted to ensure the layout remained clear and engaging at smaller sizes. The Development Team coded the email whilst I acted as a consultant, answering questions and providing guidance throughout. Testing across major email clients was conducted collaboratively using Email on Acid, ensuring a consistent output regardless of platform. Once finalised and approved, Sky deployed the campaign to all UK customers nationwide.
Sky Protect email: early campaign design
Additional post-launch work included a standalone promotional page for Sky's Service Call Protect offering, reusing the Sky Protect visual language, typography, gradients, icons, and structured layouts to maintain consistency across the wider product suite. A gradient roundel was designed to highlight a £5 saving compared to the standard call-out service, adding a point of visual contrast to the page's lighter colour scheme. Following positive feedback and minor revisions, assets were prepared and passed to Sky's development team following the same review process established throughout the project.
Further email designs were subsequently commissioned by Sky as follow-up campaigns to encourage customers to purchase a protection plan. These designs were developed and approved by Sky, incorporating the roundel motif, package-build device compositions, title and background gradient treatment, and Sky iconography to create a cohesive and persuasive follow-up communication that maintained full alignment with the Sky Protect product.
Service Call Protect UI design
Sky Protect email: follow-up campaign design