XFINITY Digital Welcome Guide

Background & Brief

Whenever someone signs up for the XFINITY service, they receive, along with their hardware, instructions on how to install, activate and use their equipment. In the past, these instructions came in printed brochures, each tailored to the equipment, the plan they chose and market segment they were in. Printing all of these brochures caused a lot of logistical headaches in addition to being wasteful.

XFINITY asked the team to translate all of the content in the printed brochures to a digital experience. The resulting website needed to be easily updated, easily navigable given all of the different kinds of content and enticing to interact with.

Sketches and Prototypes

The team started with assessing the content in the brochure then, working with the client, expanded the scope of the content to include more relevant information. Card sorting exercises were done to assess how the content should be organized. Sketches were done to start the process of exploration. Paper prototypes were created to play with possible interactions and layouts.

An early paper prototype of the of the site. Each section had sub-sections which needed to be presented in a logical order.
Another paper prototype. This was an exploration of how to feature the X1 remotes. The idea was to highlight certain buttons and explain what each does.
This was a paper prototype to test expanding content.
Early sketches of the site were useful for a focusing the conversation around presentation and layout.
More sketches of layouts.
Clickable prototypes were created to demonstrate proposed interactivity to the team and client. These prototypes were created in Axure.

Coding & Launch

After rounds of collaboration with user-testing, the team, and the client, the site’s creative was designed by the art directors, copy was written by the copy writers and the coded by our developers.

First iteration of the site when it launched.
Internal page of the site. This is the remote interaction.

Scaling Up

Once the site was launched, the client wanted to roll out the Digital Welcome Guide to include all markets and all combinations of services. This meant creating 15 different versions of the site. The development team had to refactor the code to make everything modular and create a multi-site architecture. This also meant wrangling new pieces of content depending on which market and which services.