Sky Protect
The Brief.
Domestic & General partnered with Sky in order to provide protection and repair policies for customers who needed their Sky equipment covering. The product, Sky Protect, ensured that a customer's Sky box, satellite dish, Sky router, cabling and other devices were covered should a fault occur and need repairing or replacing. Both companies felt that a subsidiary website needed creating to promote the Sky Protect product to customers. The website needed to highlight all the benefits to entice customers and allow them to obtain a quote and purchase a protection plan, based on their setup. Promotional materials such as email campaigns, would also be needed after the site's launch to broadcast the availability of the new product. As Sky Protect would sit within Sky's domain, their branding and visual aesthetic had to be adhered to when designing the email and website UI in desktop and mobile resolutions. Therefore it was necessary for Sky to send over their brand style guide as well as the assets needed for implementation. After validating the problem and defining the requirements set out in the initial meetings with the client, a project map was created where objectives were established and tasks were assigned to each team.
User Experience.
When Domestic & General and the client had agreed upon the site's content from a product and legal perspective, it was sent to the UX Team. They began to develop a content inventory, define the flow of information with regards to the information hierarchy and determine the website's organisational structure. From here user flows and journeys were drafted, examined and refined to ensure that users were able to complete the site's main task of obtaining a quote and purchasing a protection policy, efficiently and effectively. There were some instances where customers had received a letter through the post and thus, an interactive modal was deemed the best approach for users to input their details and obtain their quote. The UX Team felt that a 'Support' page would be needed for users who had questions regarding the Sky Protect policy, equipment or about the product itself and thus, decided that the FAQ method would be appropriate to adopt. Other flows that were subjected to scrutiny pertained to viewing key information with ease, such as the product benefits and prices.
Desktop and mobile wireframes were designed to outline the page's structure and points of interaction. These wireframes were cross-referenced with the user personas that Sky had sent over, to ensure that the interface being designed would meet the implicit and explicit needs of a variety of different user types. The wireframes had to be a reflection of understanding the user and what they wanted to accomplish. From the business's perspective, the relevant KPIs had to be defined with the key metrics being enveloped within the wireframes. The main CTA that took the user to the quote and buy process was to be measured to determine where drop-off rates may be experienced on the site. Upon completion of the wireframes, they were presented to internal teams working on the project where feedback was gathered and amendments were implemented. The revised wireframes were ready to then be shown to the wider team audience, including Sky, where approval was given and the project progressed into the UI phase.
Ideally usability testing would've been included at this stage to determine whether the wireframes did indeed meet and support the requirements of the user. The information hierarchy and user flows would be tested to measure how effectively tasks were to complete, how engaging they found the interface to be and whether the users found the wireframes both useful and usable. Testing would've also highlighted any occurrence of pain points that may have been overlooked in the design process.
UI Conceptualisation.
The UI of the Sky Protect site involved the application of Sky's branding to all the design elements. Research was conducted on Sky's site to learn how their branding is applied to typefaces, use of imagery, alignment, colours, gradients, links, call-to-action buttons and spacings in order to recreate their brand for Domestic & General's product.
Current iteration of Sky's UI
The header on the Sky Protect site featured two logos, navigation links and a 'Log in / Register' CTA. This CTA was considered a secondary action and thus, a secondary tier branding style was applied. Separating the header and the hero section below, I incorporated Sky's 'mirror flash' that would move across the width of the page upon user scroll. The hero consisted of a H1 title, supporting content and a primary CTA that began the user on the 'Quote & buy' journey. Sky would periodically send over imagery for programmes they wanted to promote. This material would feature in the hero section in addition to the image compositions, consisting of various devices.
The sections below the hero sat on a background that utilised the same gradient colour scheme as Sky. Structurally these sections used alternating layouts between imagery and copy in lieu of the full-width, programme promo sections featured on Sky's site. These sections featured copy informing the user what Sky Protect was and a list of what was included, supported by an image composition of devices the policy covers, a branded infographic and icons. I opted for a stacked layout of the aforementioned elements when designing the mobile version. The last section of the page was used as a first step in the primary user journey of obtaining a quote. The four main types of Sky boxes were showcased, accompanied by a text link should the user not see their particular box advertised and a 'Build my cover' CTA to take the user onto the next step.
A later iteration of the UI omitted the hero image at the client's request and opted for a simpler solution. The revised hero design resided on the same background space as the sections below it and featured a video, created by Sky, outlining the product and included benefits. Iconography sat underneath the introductory copy to show the user the range of devices covered at a glance. The additional content added to the home page meant a revision in the information hierarchy was needed.
Upon collaboration with the UX Team, a new flow of information was created where each section had titles to help compartmentalise the information. The benefits section could be refined in its layout of additional benefits and together with the 'Service Pledge' content, the alternating layout of image and copy could be maintained on the desktop version. Moreover Sky had requested that the home page feature the different prices associated with each type of package deal. After further collaboration with the UX Team, it was decided the best approach was place each package deal into columns. I designed the image compositions, featuring Sky's content, and applied the same font size and content alignment as per the client's site. The 'Build my cover' section was kept the same, which helped the flow of information preceding it. The Support page was relatively unchanged during the design update and maintained a three box approach, aligned horizontally and revealing a series of questions upon interaction. On desktop and mobile the functionality was kept same but the column layout was swapped for rows on mobile.
Whilst completing the UI designs throughout the project's history, I maintained a series of internal reviews with the UX and UI teams to iron out any creases within the design and gaining feedback before sending to the client for final review and approval. Once Sky were happy to give the go-ahead, the assets were prepared, exported and sent back to the client's development team. When the front-end had been coded, Sky would send the links over for review, presenting great opportunities to work closely with such a big brand.
Early and later UI designs of the Sky Protect site
Post Production.
After the launch of Sky Protect, an email campaign was set up to inform Sky's UK customers of the new protection policy. Continuing with the application of Sky's branding, I designed desktop and mobile versions of the email. Mirroring the design and structure of Sky Protect's homepage, the alignment of the content was kept consistent. The mobile version utilised a horizontal orientation between imagery and content in the pricing section and relied less heavily on a stacked, vertical orientation. The email showcased the same gradients for the background and titles as the website as well as maintaining the same style of iconography and CTAs. The email was coded by Domestic & General's development team, where I would act as a consultant for the developers when building the front-end. I also help test the email as various email clients output email style properties differently. Using the 'emailonacid' testing website, the Development Team and I collaborated in building a consistent design for the different email clients. The code and assets were sent over to Sky and approximately a week later, all of Sky's UK customers received the email.
Other post production designs involved the creation of a stand-alone footer page to highlight a new call-out service that Sky provides, Service Call Protect. The page was to feature a simple hero section, accompanied by benefits and price comparison sections underneath. The same font styles, image cut-outs (omitted from mobile to push the content further up the page), use of section sub-titles, iconography and colours used on the main Sky Protect site were applied to this new page. The alignment of icons and supporting copy on desktop ran the width of the page but would see a grid alignment used on the mobile version. However to maintain a comparison chart aesthetic, the same orientation of elements was kept the same across the two screen resolutions. Sky had requested that a badge was to be designed, advertising a £5 saving when compared to the standard call-out service. A roundel was designed, incorporating the use of Sky's branded gradient and typeface, which would add a nice element of contrast to the light colour scheme of the page. After gaining positive feedback from Sky, I carried out the minor amendments requested to the design. The process of asset preparation and development review with their development team was repeated, once the green light was obtained on the UI.
Sky Protect email campaign design
Service Call Protect UI design
