- Adobe Photoshop
- HTML5
- CSS3
- JavaScript
In 2018, Costa Bingo went through a big change – the site was completely revamped, with the back-end updated to a newer framework and a fresh design on the front-end. Whilst the changes made a big positive impact within the community, the homepage and the lander pages weren’t getting conversions to the level that was desired.
Alongside Chris Sawyers and Paul French at Mandalay Media, we came up with a new look to help promote further page reads and conversions through the landers. We also updated the homepage to promote more click-throughs.
Through Hotjar, a website analytics program, we found that the results from the redesigns had the desired effect, with more registrations and page-scrolls from users.
The redesigned trust icons replaced some basic icons used previously to look a bit more golden and trophy-like – this provides a more “reward-winning” look to promote more trust in the brand.
The Winners table was recreated to fit in more with the rest of the site’s design. It uses an AJAX request to a winners database to fetch results, and the rows animate upwards like a vertical ticker. The law changed around this time about promoting winners by name or username, which is another reason the table was redone.
There was a big push for the loyalty club, which already had a strong visual identity, so the banner was made to reinforce that. With the diamond borders, it promotes more of an exclusivity and the look of something more valuable.
When it came to the landers, a big emphasis was made on making it mobile-first due to the amount of traffic that the landers got from mobile devices.
This meant a stacked style made most sense as it translates well across all mobile devices. With the variety of screen dimensions available, the design was made to scale upward from iPhone 5 (320 x 568 px before Safari tabs).
The use of arrows and downward-facing points promoted the idea of scrolling down for more information. It also had to be minimal to guarantee the best possible load times, which was critical to the success.
The banner area also scales down well, being made up of multiple layers containing images to accommodate smaller sizes.
Back to Work