Myti

New York, US · 2020

Product presentation website with WebGL and CSS animations. The entire website is an animated storytelling experience for a team of disruptors in the field of security and asset protection technology. Brought to life through 3D and sound-enabled interaction feedback, scroll telling, and video explainers.

01CONTEXT

MYTI represents a quantum leap in security and asset protection technology. They are a group of disrupters from NASA, the security industry, machine learning, computer vision, engineering, and behavioral sciences combining expertise and vision to reimagine the way we approach security and asset protection.

A team of geniuses. That required nothing less than genius design.

We were contracted to create a series of educative product-presentation microsites meant to convey the spirit of the product and its impact on people's life.

02ambition

MYTI is a high-potential startup with an innovative product.

On one side we have an audience of future users who are faced with a new product that they know little about. On the other hand, we're also going to a different kind of audience, comprised of potential investors who are searching for a life-changing product that they can support.

Therefore, our goals were to: build a platform that will allow us to quickly roll out multiple websites or webpages, or update an existing one when needed; give our users higher control over how the information on the website is delivered to the audience, so that showcased information can be accompanied in real-time by direct comments or pauses and create a space for conversation; provide the audience with several ways in which they can interact with the product.

03Challenge

In the same tradition of pushing the boundaries, proved by our client, we're aiming to push the website beyond its traditional limitation and create a highly portable medium for our client to use to start conversations around the product and collect user feedback as fast as possible.

04experience

An ambitious blend between a worldwide accessible presentation website and a remote-controlled pitching deck.

Extensive scrolly telling, that's storytelling enabled by the website's default flowing nature enhanced with mouse scroll-triggered milestone events, together with carefully placed micro-interactions aims to keep the reader invested until and beyond the punchline. The wait is worth it.

05technology

The browser's native capabilities were about to be put to the test. Cross-browser and cross-device compatibility has never been more critical than now.

While we advocate supporting a larger than usual array of mediums for our regular work, in this case, low browser compatibility can mean breaking mission-critical functionality, and not just mere progressive enhancement.

Touch detection, sound-enabled interaction feedback, and smooth 3D experiences are not only difficult to implement but also challenging to keep consistent across various browsers. This has not stopped us.

The interactive experience is achieved through a combination of web sockets enabled communication, well-proportioned copy, along with mixed JavaScript and CSS animations.

06Front-end

The landing screen texture animations were created using PixiJS's 2D WebGL renderer. Displacement sprite filters were used to create a magnifying effect attached to mouse movement.

Howler.js is used to enhance the experience with sound effects that are meant to create an improved sensorial experience for the user, providing him with a peek preview of what using the product feels like in real life.

Scrollama, along with Animate.css were later used to create a compelling storytelling experience. The Intersection Observer API allowed us to programmatically adjust the user experience based on reaching certain milestones within the page.

There is no doubt that the right styling and timing can make or break a good user experience. We have researched and applied the best use practices.

07Back-end

The backbone of the application was built with PHP and Laravel.

Laravel's Passport authentication library together with pusher.com's pub/sub messaging infrastructure paved the way for us to build a real-time authorization system that allows the administrators to reveal or obscure parts of the site on demand.

Security is an important aspect for our client. Amazon Web Services provides us with a reliable, secure, and highly scalable infrastructure for our web app.

08mobile

Our research says our user base is always on the go with little time at their disposal.

Therefore, all content was optimized for a smooth mobile experience, without sacrificing any mission-critical functionality.

Touch (mobile) and pointer (desktop) events behavior unification was another important aspect of the user experience.