We believe that every project we touch should be a win. Our growing track record says that we're headed in the right direction.
The Oceanic Pro League has been growing ever since its' inception in 2015. After 2 seasons, the brand was revamped with a new logo and visual language. It was time for a homepage makeover.
See how we brought the OPL homepage inline with the new visual identity and solve some functional problems.
The homepage very obviously needed a visual overhaul - but while we were at it, we wanted to solve some functional issues
When the OPL started, there was not much editorial content. After 2 seasons of growth, there was now a lot more content coming out - articles; videos; interviews - and we wanted to bring the homepage up to scratch to facilitate all of this fan-value.
Our goal was to update the visuals while also addressing the layout and content heirarchies.
The original OPL website and logo (top left).
The 2018 OPL logo.
The original site did not utilise the width of the browser
When widdening the original website, each article would just scale-up, meaning that a maximum of 3 editorial pieces were available on the opening fold. By placing the navigation bar on the side for wider monitors, we were able to bring in more content into the fold (increasing article editorial count to 4; complete browsable schedule and standings and optional call-out leaderboard banner).
Understanding the audience (gamers) and their habits/characteristics (high resolution monitors) allowed us to find an opportunity to increase our website's realestate.
Although modern web-users are used to scrolling, bringing parts of editorial content into the fold can encourage deeper exploration.
One of the issues with the previous site was that the schedule and standings took up a lot of space.
Because the schedule and standings required a lot of space previously, it was set below the editorial content. We knew that those pieces of content were one of the primary things that OPL fans wanted to see when first arriving to the homepage - but we did not want to sacrifice editorial content in place of it. As such, we designed a much more condensed module that could facilitate both pieces of content.
By designing an interactive module, we solved the space and heirarchy issue and were able to place the schedule and standings in-line with the main headline.
UI and UX proposal