Strategy

Okayplayer has been online since 1999, which means they have created a lot of content over the years. The site has gone through many changes and iterations since then but this next phase was set to be one of its largest. This update marked a shift in focus for the company and editorial team as they wanted to focus on broader, lifestyle-oriented topics rather than solely arts-focused. We were tasked with rebuilding the website to allow for this transition as well as to modernize their code base to better suit the wide array of platforms and devices used to enjoy their content.

Planning

When planning the process for such a large project, we reviewed the existing data; the user experience; server settings; and overall speed. Because the website had so much existing data, an update of all content created previously would not be possible without a considerable time investment by a content editor. Instead, we decided to reorganize content classifications and focused on separating existing classifications into custom groups. This helped the administrators clearly define the purpose of each content part and allowed for a wider range of rich media elements to be incorporated within each part. Once we had a clear plan in place, we reworked the URL structure to best suit ongoing search engine optimization initiatives and cleaned up obsolete content that was no longer in use.

Platform Architecture

In this phase of the project, we detailed every aspect of the website’s structure and components. Detailed site maps and user flows were outlined as were interactive prototypes and mood boards. We wanted to make sure that every content type and layout connected to another so that the user journey would never be interrupted. It was during this phase that we also solidified the technical specifications and outlined all integrations that would be included during the development phase.

Design

The design of this website aimed to expand upon the existing Okayplayer brand by adding digital considerations.  Working with Rachelle Letain, we crafted a style guide that encompassed a wide range of rich media elements that work seamlessly with one another to create engaging and interactive experiences. A comprehensive set of templates was designed to best suit the vast spectrum of content types, providing consistent and balanced output in every case. It was important that the content was the centrepiece of each article, with careful attention paid to typography, imagery, and video. The navigation and user experience of the website was designed to be flexible and easy to interact with in order to allow users the ability to seamlessly move through different sections of the website with ease, regardless of their device or platform.

Development

Once we had detailed technical specifications, wireframes, and final designs, it was time to create the final product. The most important part of the development for this project was ensuring that all the components and features work on a broad range of user platforms. Previous versions of the Okayplayer website were not responsive and used two separate device-specific websites to render content. We did away with this approach, due to the fact that the web is no longer limited to mobile and desktop, and built a cutting-edge platform with a sharp focus on speed and simplicity.

The platform build included a new administration panel which now allows Okayplayer editors the control they need to create a wide range of mixed media and embeddable content. This, combined with modern asynchronous technology, allows the website to perform instantaneous tasks without having to rely on slow page reloads. These features appear in various user interface elements across the website including the live search element, the ‘load more’ button, and all forms and user input elements. The final piece of the development phase included a review of the website’s server environment. This was to ensure that all of the work we had put in would function as anticipated; and that the final product would perform at the highest of standards in nearly every circumstance.

Integrations & Analytics

This website includes many integrations and third-party applications including detailed analytics, web fonts, social media sharing with analytics, email newsletter sign-ups, embedded form captures, and customized advertising settings for multiple major advertising networks. To accomplish this, we created a simple mechanism for administrators to select the advertising network they would like the website to use, which would render specific advertisements where needed.