The Redesign: whichbingo.co.uk

The Redesign: whichbingo.co.uk

A first-ever TV campaign supported the relaunch of the UK’s largest bingo directory in February, and while pleased with the result, rebuilding the site to be fully mobile responsive was far from easy.

Published 8th February 2015

On February 9, 2015, WhichBingo launched with a brand new, fully responsive redesign. The site, a long-time market leader in the online bingo niche, originally launched in May 2005, and since then has been through a series of both major and minor redesigns and developments. But this latest re-skin was the biggest redesign project we have ever undertaken. The key aspect that made this redesign job so different was that we had to make it fully responsive to mobile and tablet users as well as desktop visitors. While we did already have a mobile version of the site, it was time to step up. With more than 30% of the site’s traffic now coming from mobile or tablet, this was an investment in the next logical step in the evolution of the site. As well as how the site works and is delivered on mobile and tablet, the project focused on addressing a number of other key aims. These included search engine friendliness to comply with recent Google algorithmic updates, as well as delivering improved user experience, commercial optimisation, presentation of information and design aesthetics. The redesign was also aimed at strengthening the brand and its core message. We believe that what we have delivered ticks all of those boxes. But, more importantly, the feedback from clients has been very positive, and universally so. To allow us a ‘fresh pair of eyes’ with which to look at the site and to ensure that UX best practice remained at the core of the redesign, we hired a professional UX designer. To simplify the process and to keep the project focused, we decided very early on to just re-skin what we already had in terms of content and structure, and then make any necessary changes to content and site features once the new design was up and running. This proved to be a very good decision. Once the designs were approved and signed off, the hard work of building the site commenced. A number of technical issues were thrown up by the complexity of the project. As any web developer or designer will confirm, mobile responsiveness in terms of which content and in what layout is delivered on which device throws up many issues. The need to provide a responsive and optimised mobile experience means that we now have a range of different device-dependent layouts that the content is delivered on. An interesting additional challenge was to ensure that client adverts worked across both mobile and desktop. The ad positions have therefore been coded to be dynamically responsive to changes in the size of the viewport. On mobile, the ad server will automatically call in the correct size of ads to fit within the reflowed design. This in itself has however caused an additional issue, as many affiliates do not yet have standard IAB-sized ads for mobile.

With the responsive CSS for all the pages taking a mobile-first approach, it was built on a custom modified version of the bootstrap framework. As part of the development process, the CSS was created in a modular fashion using LESS. Great consideration was also given to the impact of the CSS on the speed of the site. Task scripts were written which compile different verbose CSS files into single minified files. This means that fewer and smaller CSS files are used on the new site, and they can be delivered more speedily to the browser. The project also gave the inhouse web development team the opportunity to recode some of the underlying code of the site to use the new design. Again, with an eye on the speed of the site, a lot of the older code was refactored in the process in order to take advantage of the latest versions of the server software. Due to the length of the time the project took, we had to ensure that the live site was still being updated whilst the new design and development work was being done. During production, great care was taken to project manage the divergence of the two development branches. The in-house web development team’s adherence to avery tight versioning system ensured that any new features that were added to the ‘old’ live site were tracked, and could be merged into the new design at intervals so that everything was kept up to date. The size of the site, particularly the site directory, meant that even seemingly small jobs like creating new logos and graphics became big tasks. We estimate that we had to create close to 2,000 new graphics (all in-house) to deliver the new site design. One of the key strategic changes we made was to the home page. The home page we have now adopts a much cleaner and streamlined experience than our previous one, making it the portal to the rest of the site, rather than simply displaying ads, content or external links. The page now invites people into the site to discover the content, rather than pushing them away, which has ‘time on site’ benefits as well as an improved user experience. Although there wasn’t a deadline set at the time of the original brief, launching the redesign became time sensitive towards the end of the project due to the fact that we were launching our first ever TV advertising campaign. With the TV campaign going live on February 9,we set a beta test target date of the second week in January. We ran the site for a couple of weeks on a mirror server which pulled live information from the ‘real’ site whilst delivering in the new style. Whilst there were bugs, as one would expect, these were small in number and straightforward to fix.

Now that the site is live we are delighted with what we have delivered, and have been buoyed by the overwhelmingly positive feedback that we have received from clients. However, the re-skinning of the site is only the first in a pipeline of projects that includes a series of site upgrades and additional features that will continue to roll out throughout the year. Our overriding aim is to supply a quality product to our site users and quality players to our clients. This redesign aims to fulfil that brief, and we believe it does. If we had to do it all again we would probably organise ourselves a little differently, as the end result it isn’t 100% faithful to the original brief, but what we have ended up with is in many ways superior to the initial designs. The challenge now is to keep moving forward and improving. We are of the opinion that we have once again raised the bar, and know that the competition have sat up and taken notice, as one would expect. We now need to ensure that the quality level we’ve established with the redesign continues in everything we do, and also not to forget that everything we publish on the site needs to look its absolute best on mobile and tablet, and not just the desktop. 

“With more than 30% of the site’s traffi c now coming from mobile or tablet, this was an investment that was the next logical step in the site’s evolution.”

“We estimate that we had to create close to 2,000 new graphics - all in-house - to deliver the new site design.”

Advertisement