Loading ...

Responses by Chelsea Cox, project manager; Morten Solvstrom, creative director; and Virgil Spruit, senior developer, Hello Monday.

Background: One of our core objectives was to showcase that Virgin Hyperloop is more than just an abstract idea or futuristic concept. We wanted to give users a sneak peak into the development of Hyperloop’s groundbreaking technology through features including an interactive map and location feeds. In these sections, we highlighted the different areas around the world where hyper loop routes are currently in development. We also designed a 3-D interactive story to showcase the hyper loop’s proprietary technology, enabling users to learn about how it’s designed and built. Our target audience varies from consumers to investors to government officials, so it was important that the site felt inclusive and spoke to a broad group.

Design core: The interactive 3-D components, along with the location feeds, are the site’s main features. We wanted to talk about the benefits of Hyperloop in an immersive way using interactive 3-D that invites the user to explore some of the unique benefits Hyperloop provides. Inspired by mechanical drawings and blueprints, the line art–style vignettes enable users to explore and interact with different aspects of the pod and rail.

Favorite details: The interactive 3-D components that showcase some of the technical aspects of Hyperloop and its benefits were quite unique. It was important to find a balance between conceptual 3-D, real-time renders and real photography. We used the 3-D component to explain some of the technical benefits of Hyperloop followed by real life photos and videos to show that this technology is actually plausible.

Challenges: The original timeline was very aggressive, so prioritizing our feature set was a challenge. Virgin Hyperloop also underwent an exciting brand refresh prior to the site going live. This required us to revisit the designers and incorporate the new look and feel into the existing pages retroactively. We explored various approaches until the final visual identity felt cohesive with the originally proposed designs.

Technology: We built the site with our own custom JavaScript framework that functions as a single-page application. And we’re using the three.js library for our 3-D. For our CMS, we chose Contentful, and Symfony acts as our PHP framework. The rendering of our HTML is done with Twig. For our hosting, we have gone with our preferred option of Heroku and StackPath as the CDN.

virginhyperloop.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In