The Brief
The Product Owner asked for a microsite to accompany the TV ad, which was the focus of the new William Hill branding campaign for summer 2019, in partnership with the unified heavyweight champion of the world, the boxer, Anthony Joshua.
The purpose of the microsite was to promote the William Hill brand, to offer people who like to bet some advice on responsible gambling from AJ himself, and to provide links to responsible gambling partners.
The key to the success of the microsite was in ensuring that we had exclusive content for fans of AJ. We were able to obtain still images of AJ from the TV ad and behind-the-scenes footage of AJ and his team.
The release of the microsite was set to coincide with the release of the TV ad to build anticipation.
Considerations
All of the imagery and videos that had been provided to us were shot in black and white and we were told that the TV ad was also going to be in black and white, so we decided that the microsite should also be predominately black and white, with some elements of colour for identification of features. Since the universal colour between the top six gambling companies is yellow, we decided one of the secondary colours should be yellow.
Agile Methodology
Once we'd established roughly how the microsite would work (using sticky notes and pencil drawings), we were able to design the architecture for the site, aka a site map. This was used for our own reference and also for the Development team to reference during the build.
The site map allowed us to share the work between us and to manage the project more easily by mounting it on a wall and discussing and marking-up progress at the end of each bi-weekly sprint.
Wireframes
We quickly mocked-up wireframes and a prototype using Adobe XD and were able to present our ideas to the Product Owner and other stakeholders. Using feedback we were able to make other iterations of the original designs then once we had approval we were able to design the complete set of pages and other features.
Style Guide
We produced a style guide to help the more junior designers within the team to maintain consistency when given a task to work on. It also helped the Development team when they started building the microsite.
Design Mock-ups For Stakeholders
Looping Video Footage
We mocked up how pages may look to visitors so that the stakeholders could see what they may look like on desktop and mobile. The idea was to make the content exciting and engaging and we decided that quick-cut video sequences at the top of each page would be the ideal way to achieve this. By looping the videos at 10 seconds we were able to keep the video file-size small which made the page load-speeds quicker.
Final Designs
The Homepage
The homepage was the main landing page for visitors. It featured a very simple ten second looping video, of AJ, staring directly into the camera pensively and blinking. This was to create a sense of drama and to give the visitor a feel for what AJ's opponents must feel just before a fight.
There were links to all other sections of the microsite from the homepage. The homepage acted as a media hub.
AJ's Journey
In this section we included testimony from AJ's team including his coach, friends, manager and physio. It gave visitors the opportunity find out more about the man behind the gloves.
Making The Ad
This section gave visitors the opportunity to read articles and watch exclusive behind-the-scenes footage of the making of the TV ad. They were introduced to AJ's sparring partner and on-screen opponent Joe Lockley and they were able to find out how the concept for the branding campaign and microsite came about.
Responsible Gambling
One key feature of the microsite was to promote responsible gambling. In the Responsible Gambling section, AJ talked about the four keys to responsibility, both in and out of the ring - Know Where You Stand, Take A Break, Keep It Fun and Control Is Everything.
News
The microsite was designed to keep regular visitors informed of all news relating to AJ and his upcoming fights. The News section was intended to be a fluid section, the content of which would be updated regularly over time to keep the microsite fresh and to improve search engine optimisation (SEO).
Linking To Williamhill.com
In addition to having a link to Williamhill.com in the burger menu, we decided that in the days before Fight Night that we would exploit the opportunity to redirect visitors to the main William Hill site in order to place a bet on the fight. The banner was shown in contrasting white and displayed a countdown timer to build tension and anticipation.
Notes for the Development team
We produced some development notes for the Development team to assist them with the build and where possible we also used animations which we designed using AfterEffects to show how interactions such as hover states where supposed to look.
