Design

Hopper carries great strength within its brand and product, something we needed to preserve while expressing the identity of the people behind it. Our main goal for design and communication was to showcase the culture of Hopper.

Homepage: Communication is focused around the app, features and popular travel destinations. It was important to inspire visitors when they landed on the homepage.

Company: Hopper as a company, physically, and Hopper as a group of talented individuals, building a product to help people travel the world.

People: This is where we shine the light on Hopper Humans. The focus being the individuals that make Hopper and it’s culture.

The Design process took the form of 3 main phases:

Firstly, our communication design team gathered a wealth of information from Hopper’s discovery, distilling the learnings into what we call “performance copywriting”.

Next, this is translated into a lo-fi wireframe with a rough visual structure. Once we have these lo-fi wireframes in place, we can begin building a prototype to be used in our initial user tests. This is important as we’ll finalize all content and structure for the website before progressing to the final step.

The last step for design was working closely with Hopper’s in-house team to produce assets including illustrations, photos and videos. This is where the Hopper brand truly takes shape. For this project in particular, Hopper chose to have their own writers adapt our performance copywriting to match their brand’s voice and tone.

Working with Hopper’s in-house illustrator Fitz was a blast. During our collaboration, we kept in mind which pieces of his work could be translated and decomposed into code whilst maintaining technical performance. With a talented illustrator, it’s easy to go overboard and insert beautiful pieces everywhere, but this can also subtract the human aspect of Hopper, which we desired to highlight. Consequently, we were diligent in our illustration placement and made sure to balance this with photos/videos of real people. In the end, we created the perfect balance of playful illustrations with a human touch.

Technology

For each of our projects, we strive to use world-class tools. Our team decided to build Hopper.com with Gatsby (we’ve even written about Why Narative loves Gatsby ).

Gatsby is a modern website framework that builds performance into every website by leveraging the latest web technologies. It allows you to create blazing fast, compelling web experiences without needing to become a performance expert. This allowed our team to focus on the story, content, and details required to create the best user experience possible. The developer experience and plugin system meant we could work faster and focus on the people that would be visiting Hopper.com.

React is taking over the web and Gatsby allows our team to build websites with a familiar API, the same libraries, and patterns we’re already used to.

Gatsby also made it simple to pull in data from any source. This meant we were able to create a CMS with Contentful, giving full scope content management to the editors and writers at Hopper. We also used other data sources, such as Greenhouse, to build a custom careers section. In the near future, Gatsby Preview will connect the final dots of a seamless editing experience through a CMS.

Performance

Desktop, no throttling

Mobile, no throttling

Mobile, no throttling

Understanding the key metrics for what you’re looking to achieve is far more beneficial than ticking a list of industry standard checkboxes. It was critical for Hopper’s web experience to reflect their Application.

Our results were impressive, both on mobile and desktop devices, with 0 throttling. We were able to achieve First Contentful Paint at around 390ms with a speed index fo 1520ms, on mobile.