LAVO

Hydrogen Education Microsite

Websites / 

Experience Design / 

Deliverables

Information Architecture

Wireframes

Creative Concepts

Website Designs

3D Object Animation

Website Build

Cutting-edge technology requires a cutting edge digital experience. Mobile-optimised 3D animation in the browser certainly qualifies, but creating a smooth experience nd fast load time to engage kids of all ages was a challenging brief. But we love a challenge, and a "Oh, cool!" web experience.

Industry Sector

Energy

Year

2021

Timeline

6 weeks

Project Type

Web Design / Creative Concept / 3D Animation

Objective

After already engaging Evolut to roll out a new website, green energy innovation scale-up LAVO wanted to raise the bar on their digital experience with an educational microsite.

The brief: to teach kids of all ages about hydrogen, water and how they are pivotal to the world's green energy future. Rather than dry chemistry theory, however, the experience would start its life as part of a museum installation – so a WOW experience for mobile was called for.

We needed to create an educational journey for mobile that would keep even the shortest attention spans engaged with colour, movement and a surprise at every turn.

CONCEPT & MOOD BOARD

Approach

Working closely with our client, we decided that a 3D "fly-through" animated experience would allow us to tell a story that moves from outer space, through Earth's atmosphere to our oceans and down to the molecular level.

But the constraints were significant. The experience was to be delivered for mobile via a QR code within a museum exhibit, and needed to run smoothly in the browser. Oh, and we had six weeks to exhibition launch.

Not ones to shy away from a challenge, we knew that modern advances in browser-based animation meant that a smooth 3D experience is now possible. Animation that was once only possible in gaming and dedicated 3D software environments can now be optimised to perform well within most modern browsers.

Add to that a stylised "low-poly" look and feel and we felt we would both align with the scientific subject matter, while keeping the 3D objects light enough to perform well in a mobile web browser.

Problem Solving

Compatibility

Mobile 3D experiences have until recently only been delivered with dedicated solutions like Unity, Blender, Maya and others. But 3D has moved into the modern browser, so if we could deliver a quality browser-based experience, we would avoid the time and complexity of producing iOS and Android apps and submitting through the major app stores.

Performance

Cool experiences rapidly get less cool with every second of load time. We knew we couldn't deliver an amazing microsite that took 30 seconds to load, because users wouldn't stick around to see it. WebGL is the technology that unlocks this capability, but it is not yet a mature technology, so we needed to tread carefully and be sure to optimise for speed.

Storytelling

The story of hydrogen is a universal one, from outer space down to the molecular structure of water on Earth. Telling that story sounded a lot like jumping on a spaceship, setting a course for Earth and not stopping until we hit the ocean floor. Interaction – along a fixed storyline with a cool 3D zoom effect was the best way to take users on that trip.

Delivery

WebGL development and 3D animation are just some of the highly specialised skills we have access to at Evolut, but with such an agressive timeline and new technology, an agile approach was essential. Prototyping using a Github Page allowed us to test our 3D objects and animation performance in real time before adding complexity to the site.

Product showcase

Many educational experiences come with a commercial imperative – and this one was designed to inform while helping to showcase LAVO's innovative hydrogen battery and roadmap of hydrogen-powered products.

They are easy products to showcase, and existing content helped greatly, but the product "explosion" animations supplied needed to be seamlessly integrated into the microsite experience – not tacked on as a sales afterthought.

The storyline was constructed to blend the existing animations with the new 3D style and link the old and new looks within the overall narrative.


Future development requirements meant that much of the microsite content was to be integrated into the client's main website. The white background would mean that this section would be usable as a stand-alone product showcase.

RESULTS

Deadline: Achieved
Client: Very happy
Website average load time: 2 seconds
WOW factor: Delivered

Ready to evolve your digital experience?

We use digital to help businesses transform, find customers and stay relevant. Let’s connect :)

Connect With Us

+61 402 853 722contact@evolut.com.au

Office

WeWork
310 Edward St
Brisbane QLD 4000
© Evolut Group. All rights reserved
crossmenu