Love Alberta Forests / virtual.loveabforests.ca
Tour Alberta’s forests from the comfort of your own home
Overview
Love Alberta Forests is an awareness campaign initiative from a local non-profit, Alberta Forest Products Association (AFPA).
The objective of the campaign is to highlight the relationship between Albertans and our local forests. The Overhaul team worked with marketing agency, Berlin Communications, to plan and design an education and immersive 360° forest tour experience to help raise public awareness of the economic, environmental and social value of our forests.
In this project, I led the planning, UX strategy, and design for the Love AB Forests 360° tour experience.
Role & Duration
Designer
Information Architecture, UX Strategy and Planning, Wireframing, High Fidelity UI Design, Prototyping, Testing
September 2020 - November 2020
The Problem
Alberta Forest Products Association (AFPA) challenged us in bringing a forest tour to the homes of our users who recently began staying at home due to the pandemic. Love AB Forests interactive 360° tour is a multimedia experience that would take users on a journey through the different forests in Alberta.
Our goal was to create an immersive and educational digital experience to the couches of these users. We were challenged with planning and designing a multimedia experience that was made up of 360° walking video, 360° stationary video, aerial footage, forest audio, narration audio, closed captioning, educational content, and more on a three-week timeline.
The Process & Solutions
Mapping Out the Experience
A Content Challenge
One of the challenges in this project was making “walking through a forest” an engaging experience. I pieced together various pieces of footage to create an experience where it felt like you were being flown in and dropped off in the middle of the forest.
At this point in the process, the narration and written content were still a work in progress which posed as both a challenge and an opportunity. It took many iterations and flows to nail down what we wanted the experience to feel like, but it also gave us the flexibility to direct how we wanted to the audio to sound to our users.
Provided Rough Cut Videos
Mapping the Tour’s Flow
We worked closely with another agency, Berlin, on how we envisioned the experience to flow. The original storyboard gave the broad strokes of how we wanted a user to engage with the content. It was a pick-your-own-adventure experience where users could navigate to the forest of their choice and further discovery engaging educational data within the forest.
This storyboard was used to map the website’s flow and where each video would live within the experience. Because of the fast turnaround time, this step was crucial for all teams to get on the same page about the story inside of this experience we were trying to build.
Side by Side of Berlin and Overhaul’s Flows
Initial Desktop Interface Wireframes
Dealing With Load Times
Load screens were particularly important for this microsite due to the rich content we were using that had longer load times. I took advantage of the load screens as a way to connect the story for this experience. The load screens displayed the aerial shots of the forest tour and presented users with instructional or “fun fact” information to maintain engagement.
Immersing Users Into the Forest
I wanted to direct users to feel like they were immersed inside of the forest. Using a combination of aerial footage, 360° walking footage, and 360° stationary footage, I designed the narrative to feel like the user was landing inside the forest, walking to the destination, and exploring inside of that destination.
Giving the User Control
The Heads-Up Display
An important feature in this experience was the Heads-Up Display. Because this tour is educational and involved many types of media and information, it was important to provide users with controls to start, pause, go back, and explore inside the interface. Audio controls and closed captioning were also included in the HUD to make the experience more accessible to those who are hard of hearing.
Interface Heads-Up Display UI Elements
Heads-Up Display UI
360° Button UI
Breadcrumbs
Audio On/Off Toggle
Fullscreen Toggle
Menu
360° View Indicator
Speaking Audio Indicator & Closed Captioning
Restart
Play/Pause
Next Tour
Hotspot
360° Drag Cursor
Tour Map
Helper UI Elements
There were many unconventional interactions also included inside of the experience, I designed helper UI elements that guided them through how to navigate the website. Some of these interactions include panning inside the 360° space, hotspots, and more.
Helper UI Elements: Audio/Video Notice, Press and Drag Notice, Hotspot Description
Facilitating Learning and Exploring
The objective of this tour is to educate the public on Alberta’s forests. Additional stories were included in hotspots throughout the experience to further educate users on the flora, fauna, and animals found in the forest.
To encourage more exploration, hotspots were placed throughout the walking and stationary tours. As a user selects the hotspot, a modal opens to tell another story inside of the tour. I designed a flexible modal for the hotspots that could accommodate photo, video, audio, text, or a combination of those types of media.
Project Reflections
Plan, prototype, iterate. As a visual thinker, I find that there is great benefit in drawing or mapping out what you are building. Prototyping then adds another layer of complexity where I am able to better understand interactions and microinteractions that users will have inside of experience. And iterating helps push it further to its more complete and polished state. This project was such an example of how these steps can be used to guide you through unique design problems.
Awards
ACE Awards, Best in Show
ACE Awards, Not-For-Profit Microsite
ACE Awards, Not-For-Profit Innovative Use of Technology
ACE Awards, Innovation
Awwwards, Honors