Nest HQ

Nest HQ is an independent media platform creating engaging music-based content and releasing free, independent music on it's own label.

Nest 6 Product
  • Creative industry
  • User-centred design
  • Strategy
  • Development
Neal Rahman, Executive Editor

Thank you for everything you've done for us, and for helping see this vision come to life. You guys did such a tremendous job and I hope we work together again in the future.

The Challenge

While their content was current and contemporary, the design and technology used for their website was not and so they commissioned us to bring it up-to-date with modern practice.

Nest 3 Challenge

Strategic Thinking

Audience

Nest's audience are digital natives and are not averse to abandoning content part way through if it's not catching their attention. While Nest work to ensure their content is engaging and immersive, we would need to look at how we would design the website to meet the characteristics of its users.

Performance matters

With up to 250,000 active monthly users, the website is not only integral to Nest HQ's success, but any code bloat or increase in bandwidth required to download content could be costly. We would have to ensure that pages could be built in as lightweight way as possible.

Income generation

While they had built a large audience with their unique and insightful content, Nest's only income was through label releases and promotion of OWSLA's clothing line. To help sustain their team we would need to explore further income streams that didn't compromise their values.

Nest 2 Deliverable

Delivery

Immersive discovery

Mimicking a successful feature of the existing Nest website, we designed both listing and article templates to produce an infinite stream of content and, to make it even easier for users to change content streams, we planned to surface alternative content right in the middle of the article they're reading. These recommended articles are intelligently suggested based on the user's reading patterns, whether we are trying to match them or challenge them into trying something different.

Lightweight design and codebase

With the majority of the websites audience using mobile devices on the go, we ensured it would still load quickly by creating a clean and straightforward design system with as little font weights as possible.

Rich content was incorporated using either embed codes or, in the case of the music player, using native audio controls. This reduced the need to install heavy libraries that would increase the download time of each page.

Low-key advertising and purchasable content

The need for advertising to generate income for Nest was clear but because they were selective about their advertisers, we could design our own portal and ensure we didn't interrupt the aesthetic of the design itself.

We also integrated with Craft Commerce to allow readers to purchase merchandise directly from the editorial content that described it, without having to visit the 'shop'.

Fast and built to scale

To ensure that the audio player would continue to play across different pages we used the Nuxt.js framework to power the front end of the site and, to make the website as fast as possible, we used a JAMStack app deployed to a Content Delivery Network (CDN), effectively allowing us to host the site in multiple locations close to end users around the world. Combined with smart caching this meant we were able ensure near instant page loads.

Nest also serve up a large volume of traffic. By rendering the front end of the app on Zeit's CDN and only loading data from Craft, we were able to scale the site up while keeping the experience fast and responsive and the ongoing cost much lower than with a conventional architecture.

Nest 4 Product
Nest 5 Product
Nest 7 Product
Nest 1 Hero