In depth

Founder of Android gives birth to a new brand

Essential was born from Andy Rubin’s vision for a clean, simple and clutter free technology experience. Along with his team of tech-wizards, they set out to create a communication tool that lived up to that vision. No longer would the experience be a battle against constant updates and unnecessary features, but a seamless solution to the user’s needs. The result; Essential PH1.


At Hello Monday we immediately connected with the Essential vision, having a shared understanding of the challenges that today's tech product consumers face, and believing wholeheartedly in the importance of having a pro-people approach as the face of a cutting edge technology company. We were asked to build the first ever Essential website, with the goal of communicating the values of the company, introducing the team behind the vision, and showcasing their first products to launch into the market.


Human focused technology

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.com 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.


Imagery concept

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.


Prototyping with a purpose

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.


Type:

Experiences

Client:

Essential

Deliverables:

Development, UI, UX, Concept, 3D-Modeling

Essential - Founder of Android gives birth to a new brand

Essential’s products are new, but the story is ancient. It would of course be extremely strange to compare it to the movie 300. So let’s do that. While King Leonidas is leading 300 Spartans with Herculean bodies and sharp blades into the battle against the Persian army of 300,000 soldiers, Andy Rubin is leading 100 tech superstars with insane skills and sharp brains into an epic consumer tech battle. The Hollywood version is admittedly a bit more dramatic, but the people are essential. They are the difference between winning and losing.

This is why we decided to include them in the narrative and merge the qualities of a product site with the storytelling aspects of a blog. We literally made a rule that we’d never show glossy products without sharing the thoughts and the people behind them. We made 100 people the heroes on Essential.com - because that's what they are. Secondly, tech companies can easily become faceless giants, and Essential is a counteraction to this approach. The company is not about being more or bigger. It’s about being better.

In depth

01

Human focused technology

02

Imagery concept

03

Prototyping with a purpose

Concept

We intended 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.

Project awarded:

Creative Circle

Digital - User Experience Design (UI), Silver
Digital - Product sites & Apps, Silver


Awwwards

Site of the Day


The FWA

Site of the Day


Related projects

Something something
We creates joyful digital ideas, products, brand identities and experiences that connect the hearts of brands to the hearts of their audiences.