Sky Business website build

The Sky Business website homepage

I recently worked on the front end for the new Sky business website.

Update: Since posting this article and working on this site (nearly two years ago) Sky have rebuilt and updated it. You can view the site as it was back then through this Internet archive link. The current site is here.

The site is actually two sites, one of which is split into two parts, but they mostly use a common set of styles. I was the first front end developer on the project, responsible for the initial styles and markup and then later assisted by a colleague to complete the front end work. The whole site is fully responsive.

Sky Business - Prospect

The Sky Business site is split into two halves - one for potential customers and one for existing customers. The half aimed at potential customers is relatively straightforward, consisting of an introductory custom 3D carousel from which the user chooses their type of business (pub, restaurant, hotel, etc.) followed by a page outlining the products and benefits that Sky can offer.

One of the Sky Business Prospect areas.

Each main page features responsive carousels that I built to fit the responsive design. They use bxslider for the JS but a custom set of styles to allow different configurations at different screen sizes. Every time you see a carousel on the site it uses the same basic code, but with subtle variations depending on what's requied. Most of the rest of the page elements are much simpler, relying on imagery and presentation to get their point across.

Ashley Firth and myself built the majority of these main pages and some were later built by Ant Owide, who also worked on the Go Further sections.

Sky Business - Customer

The other half of the site allows signed-in customers to do a variety of tasks. Probably the biggest and most complex is the Sports Fixture planning area. This allows a venue owner to select what sporting events they intend to show, which then appears in their entry in the Pub Finder site. This was written by Ashley Firth and myself and was a complex challenge as it required date filters as varied as 'today', 'this week' and 'next month' to work in harmony with sport type, competition type and a free text search. Additionally, selected fixtures must then appear in a popover window that allows the user to publish the results. All of this works within the page without backend interactions until the final selections are submitted.

The Sports Fixture planning area.

The rest of the site includes a Marketing hub area (allowing the user to purchase a variety of Sky-themed products for their venue), basket and checkout areas, and a 'my profile' area. This area allows further details to be entered about the user's venue, which are then output to the Pub Finder website.

The Sports Fixture planning area, showing the selection/save window (for logged in users).

Here's a video that explains how the site fits together from a customer perspective.

Pubfinder

Finally, once a venue owner has signed up and filled out all their details, the Pub Finder website allows people to locate venues near to them that are showing Sky sports. This involves a search leading to a Google map of an area displaying all nearby venues showing Sky sports and their further details.

Pubfinder results page.

The site is designed primarily for mobile and is a really useful tool if you're looking for a pub to watch a game in. Ashley Firth built most of the pages for this site using the styles from the rest of the site as a starting point. I worked quite heavily on the JavaScript for the searching towards the end of the project.

Related

This article is tagged with