We challenged ourselves to mix whiskey and water, so to speak. We wanted to elevate the idea of a ‘human focused technology brand’ by putting people at the center of all of the stories, treating the creation of technological products as a craft, exuding passion and age-old wisdom. We made a rule that we wouldn’t showcase any glossy products without sharing the thoughts, people and stories behind them.

We intended the website to merge the qualities of a product site with the storytelling aspects of a blog, achieving this by including the Essential team’s narrative throughout.

We made 100 people the heroes of Essential because, well, they are. By highlighting the approachable nature of the company we intended to show that Essential was far from being another faceless giant. That they are a company that strives to be better, not bigger.

Throughout the site we wanted to offer users the chance to get a true ‘behind-the-scenes’ look at the Essential team and what drives them. Unlike the way in which many tech companies represent themselves, the shots we captured of Essential are straight-talking and unpolished. They invite the user to see a busy, creative working environment - messy desks where ideas come to life, passionate people proudly showcasing their work, and even the office pups! We teamed up with renowned photographer Geordie Wood, who shot all the photos for the website.

A key ingredient in our creative process is to prototype our ideas. Early on in a project, they help us communicate ideas within our team and the client. Later in the process prototypes help bridge the gap between design and code - enabling us to break away from siloed thinking and ensuring communication between designers and developers is fluid. It prompted us to think - Is a visual idea feasible in code? Prototyping often helps answer these questions and improve the end result. Sometimes we go for low fidelity paper prototypes and other times we code fully functional high-tech prototypes. The specific project decides which is more suitable.

In the Essential project, we created prototypes for all sections of the site. This was due to a relatively short timeline, where “solving it in the code” wasn’t an option. We needed to know exactly how every bit of the site interaction would work before moving into code.

In the website there’s a section where we show a 3d-exploded version of the phone. Here’s the prototype steps that helped us reach the end result.

Starting out with a simple paper sketch, moving into a low-fidelity prototype, helped us collaborate with our 3D Animator, making sure we all knew what the intention of this section was. At the same time we were able to verify that the animation would run in a web browser. We didn’t have any product CAD-files at this point, but staying at this detail level helped us talk about the idea rather than the rendering details.

As we got the product CAD-files from the product design team and approval of the low-fidelity prototype, we focused on animation timing in a medium-fidelity prototype. We explored letting the product animation sync with the mouse-scroll position, but found it provided a jagged experience to the user.

As the product renderings reached their final detail level we did high-fidelity prototypes to test how the product finish fit into the overall style of the website. This was especially useful when exporting video assets for our dev team.