Beyond The Horizon

A look into the future of health and wellness through embracing immersive storytelling

Concepting, designing, and prototyping to solve
problems and create exceptional experiences

Summary

Beyond the Horizon is an immersive, abstract storytelling experience that invites guests to pause and imagine what our lives will look like based on upcoming 2021 trends. Through leveraging Unity WebGL and creating custom 3D assets, we brought what otherwise would be a PDF trend report to life in a new and interactive way.


Check out the making of Beyond The Horizon.

Details

Date: 

February 2021

Client: 

Havas Mango

Category: 

Immersive / Experiential / Interactive Web

Skills: 

Concepting / Storyboarding  / Prototyping / Sound Design

Objective

Find a way to show potential clients and future hires what Havas Mango can do

Havas Mango is an health and wellness agency that was created to shake up traditional health agencies and create immersive experiences to improve people's lives. Getting new clients during normal times is already hard enough - imagine doing that during the start of the COVID-19 pandemic. We needed to find innovative ways that would show off our smarts and talents that would be eye catching, informative, and inspire future clients and hires on what it could be like to partner with us. But how?

Concept

Create the Future of Wellness leveraging immersive web technologies

When brainstorming ways we could get new business, I suggested we show, not tell, our capabilities. Since Havas Mango started in Spring 2020, it was still a young company with not many public-facing projects to show off yet. Two strategists on the team recently created an internal 2020 and beyond wellness trend report, and I thought: why not share that with the world...while also bringing our unique Havas Mango creativity to the table? And so Beyond The Horizon was born.

Solution

Beyond the Horizon

Beyond the Horizon is an immersive, abstract storytelling experience that invites guests to pause and imagine what our lives will look like based on upcoming 2021 trends. Through leveraging Unity WebGL and creating custom 3D assets, we brought what otherwise would be a PDF trend report to life in a new and interactive way.

There were three major trends featured:

  • Active Silence focuses on finding the quiet within the hectic-ness of the everyday, beyond meditation.In this environment, users could "turn off" the environment around them to mimic the quiet and sensory-limited spaces trend.
  • Quantified Self shows that, as we rely more on tracking ourselves, our bodies become a metric for how we view our personal health.Here we invite the user to share their stat that often are used by apps to create a quantified version of their users via tracking sleep, exercise, body temp, etc.
  • New Consumer Values explains how, because of the pandemic and generational changes, people's priorities have been shifting towards improving self vs. having objects.In this final main trend environment, users are asked what's important to them: what they know (their experiences) or what they own (as a definition of self-worth).

At the end of the experience, we provide a peek into Havas Mango and how to get in touch with us further for new business leads, possible hires, etc. Health agencies and clients were used to PDF reports to provide trends in the past; whereas Beyond The Horizon challenged how trend reports could be experienced to show Havas Mango's non-traditional approach to health and wellness briefs.

How it works

Compose - "Clarify" - Correct - Send

After writing an email, the user can opt in to check their email for unclear words or phrases by clicking "Clarify." If a phrase is detected that is ambiguous or indirect, it highlights the word and pops up a dialog box that says why the word has been selected and how to correct it. After the words have been addressed, the user can send the email worry-free that their email can be understood by colleagues and clients.

Awareness: Interactive YouTube Ad

"What do you mean?" Game Show
(click the squares for alternate interpretations)

To raise recognition of indirect language in people's everyday language at work, we created a series of videos using a phrase that have multiple meanings and creates uncertainty about what the person meant. In the video above, the phrase was "come by my desk anytime." Viewers can click on the info card to access the subvideos showing the consequences of interpreting the language in various ways. While hyperbolic, it demonstrates the point that by being clear the first time around, it can remove any hesitation and miscommunication to help everyone. It would be accessible through LinkedIn users clicking on a sponsored ad or by being shared with a connection.

Concept

Use AR to animate instructions right off the page for improved context

AR provides two key features that help users further understand their environment. 1) It puts in augmented content wherever the user holds their phone camera and 2) Provides context in the X, Y, and Z axises instead of just two like traditional mobile applications.

Why this works

Use AR to animate instructions right off the page for improved context

IKEA Assembly is a mobile application that uses augmented reality to place animated instructions into the user's environment.  The little details and context that get lost in a picture can be clarified by the user walking around, moving closer and away from the model, and iconography representing key tools and actions needed.

During this project, I led the ideation, creative development, and execution of the project alongside a Design Director, UX Content Strategist, and CX Strategist. I vetted and collaborated with other network agencies for specialized 3D work throughout the asset creation and integration into our experience.

Since I was the only member on the team with an understanding of both Unity and 3D modeling, I also was the primary developer on the project to help bring the concept to life.

In the end, we were able to use the project as an additional portfolio piece as we were building the agency work up. This also showed other agencies within the Havas network our capabilities in a unique way, which led to being brought in to work on innovation projects like Life Interrupted.

Why this works

Shows Creative Potential

Showcases the agency's creative and technical capabilities in a "show not tell" way.

Informative

Informs clients on latest trends beyond a typical PDF.

Interactive

Allows visitors to interact with the content on their own terms, going as deep or light as they like.

The Process

behind-the-scenes: user Flow sketches and prototype iterations

Concepting, designing, and prototyping to solve
problems and create exceptional experiences

Lorem ipsum dolor

Another needless source of question marks over people’s heads is links and buttons that aren’t obviously clickable. As a user, I should never have to devote a millisecond of thought to whether things are clickable — or not.

Button Text

Sit amet elit

Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to a bare minimum.

Button Text

Features

Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature seven

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature eight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Features

Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Features

Feature One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

The spectacle before us was indeed sublime.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Features

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text
Prototyping

This was the first prototype without a separate clarify button. The functionality was embedded into the send button of the email provider.

This was the second prototype using a separate clarify button, which provides an opt-in version of this service.

Coding in Atom, I used an existing plugin from Will Boyd's Github to highlight text. Afterwards, I edited it to highlight text when the word "ASAP" was detected as an example.

The Team

Core:
Aly Lopez, Design Director
Laura Santana, UX Content Strategist
Alex Marin, CX Strategist
Angelica Ortiz, Creative Technologist

Larger Team:
Melody DeZendegui, Integrated Producer
Chris Williams, Digital Engineer (Web)
David Turk, Content Lead
Tristan Stevens, Associate Managing Director

MY RESPONSIBILITIES

Concepting, Storyboarding, Prototyping, Sound Design

TOOLS USED

Unity, Blender, Illustrator

MY RESPONSIBILITIES
CONCEPTING
STORY-
BOARDING
PROTOTYPING
SOUND DESIGN
PROTOTYPING
PROTOTYPING
PROTOTYPING
CONCEPTING
SKETCH
STORY-
BOARDING
USER EXPERIENCE
STRATEGY
PROTOTYPING
UNITY
UNITY
SKETCH
SOUND DESIGN
TOOLS USED
UNITY
BLENDER
ILLUSTRATOR
UNITY
BLENDER
ILLUSTRATOR
PROTOTYPING
PROTOTYPING
PROTOTYPING

View other work

Award-winning Activation to show life with SCD and the real-world consequences

CONCEPTING

CONCEPTING / EXPERIMENTATION / ENVIRONMENT DESIGN / PROTOTYPING

A Pitch Concept During Social Distancing To Promote Safe And Mobile Wellness Visits

CONCEPTING / EXPERIENTIAL DESIGN

CONCEPTING / RESEARCH / STRATEGY / EXPERIENCE DESIGN  / SPATIAL DESIGN

An Interactive Experience Showing Partners as part of a Tangible Network inspired by sci-fi

CONCEPTING / RESEARCH / EXPERIENCE DESIGN / EXPERIENTIAL DESIGN / VENDOR MANAGEMENT

CONCEPTING / RESEARCH / EXPERIENCE DESIGN / EXPERIENTIAL DESIGN / VENDOR MANAGEMENT

experiential retail that Brings to Life An Emotion-Driven Smart Home Story (Page WIP)Project Page WIP

CONCEPTING / RESEARCH / EXPERIENCE DESIGN / VENDOR MANAGEMENT

CONCEPTING / RESEARCH / EXPERIENCE DESIGN / VENDOR MANAGEMENT

Creating A Magical Dining Experience inspired by alice in wonderland

CONCEPTING / RESEARCH / EXPERIENCE DESIGN / STORYTELLING / CREATIVE DIRECTION

CONCEPTING / RESEARCH / EXPERIENCE DESIGN / STORYTELLING / CREATIVE DIRECTION

Simplifying the in-store experience to promote "designs to be used, then noticed"

CONCEPTING / EXPERIENTIAL DESIGN / DESIGN

CONCEPTING / EXPERIENTIAL DESIGN / DESIGN

envisioning the Skyport of the Near Future For A Trendsetting Tradeshow

CONCEPTING / RESEARCH / STRATEGY / EXPERIENCE DESIGN  / SPATIAL DESIGN

CONCEPTING / RESEARCH / STRATEGY / EXPERIENCE DESIGN  / SPATIAL DESIGN

Reimagining The Future of Health & Wellness Through Unity WebGL

CONCEPTING / EXPERIENCE DESIGN / CREATIVE DIRECTION / DEVELOPMENT / VENDOR MANAGEMENT

CONCEPTING / EXPERIENCE DESIGN / CREATIVE DIRECTION / DEVELOPMENT / VENDOR MANAGEMENT

Exploration of Bridging Virtual Reality and IRL audiences for a connected and fun experience

CONCEPTING /  EXPERIENTIAL DESIGN / PROTOTYPING

CONCEPTING /  EXPERIENTIAL DESIGN / PROTOTYPING

Lorem ipsum

Legowerk UX kit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Option one

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Option two

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Option three

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.