Image default
Guest Articles

Adobe Automated Tools for UI/UX Design Brings Miami Garden to Homes

Stay-at-home orders were keeping fans of the Fairchild Tropical Botanic Gardens away, just when they needed the park’s calming presence the most. Here’s how Republica Havas brought the garden to them.

The Fairchild Tropical Botanic Garden is an oasis of calm and a refuge from Miami’s often-frenetic pace. When the COVID-19 pandemic started and the city was forced to deal with the health crisis and corresponding social impact, the garden was forced to close its doors. For many, their place to find peace was no longer visitable when they were feeling the most vulnerable.

“It was a bummer, but it was the smartest and safest thing to do. A lot of people who couldn’t go into the office or anywhere else were looking for big, open spaces. They were looking for places to relax, and that was suddenly gone,” said Jason Wolske. Jason is an executive creative director at Republica Havas, and much like the company he works for, calls Miami home.

“We had to figure out a way to make sure that people could still experience the Fairchild Tropical Botanic Garden in a time when needing to disconnect, to somehow not think about all the stresses of the world, was very important.” Fairchild is a regular client of Republica Havas, so Jason, along with fellow executive creative director Danny Alvarez and a team of 17, set out to bring the garden’s visual and audio experience to people at home. Using Adobe XD, Adobe Premiere Pro, and some cutting-edge video and sound technology, they created a website, called Earth Unplugged, just in time for Earth Day. The goal was to transport people to the garden whenever they wanted, right from the safety of their own homes.

Read on for more details on how they did it, and the impact it’s had on the garden’s membership (and anyone who needs a dose of tropical calm in their life right now).

Recreating the visual splendor of a tropical garden via a web experience

Fairchild makes an impact — walking through the garden is a feast for the eyes (the “A Million Orchids” part of the park, for example, actually has a million orchids). When brainstorming how they were going to bring the garden experience to people at home, the Republica Havas team knew they needed a strong visual component, along with a compelling sound experience that would make someone feel as if they were really there, immersed in the garden’s vegetation. Havas decided they would build a landing page, on Fairchild’s site, where people could truly take in the splendor. During two mornings, shortly after Miami’s shelter-in-place order took effect, Jason and Danny led a small film crew, following strict social-distancing rules, through the garden to capture 4K video.

As soon as their garden scenes were shot, the Havas crew returned to their own homes and uploaded the footage to Premiere Pro. In just a couple days, the team had several completed video tours of parts of the garden.

“Everything from color correction to gradients, we were able to do this within two days working remotely. It’s like an edit house and an application all in one, so we could explore these videos quickly and export them as different types of assets and sizes too. We all know it’s not just exporting one size for just YouTube anymore. The world of social media has come upon us so we have all those different unique dimensions when it comes to stories or do one on ones,” said Danny Alvarez.

Using Adobe XD, the team then designed and prototyped a web experience that would allow members of Fairchild, accessing the page via an email newsletter, to watch videos and listen to the sounds of various parts of the garden.

Collaborating quickly in Adobe XD to create a multimedia experience

With vibrant 4K video and rich audio in tow, Republica Havas needed to build a home for all of this content that would capture the garden’s beauty while also making it as easy as possible for those accessing the landing page to jump into a calming experience. Fairchild’s plan was to offer access to this page as a perk for members of the garden; those individuals would receive a link in their regular newsletter to take a virtual visit.

“With this newsletter, we knew we were going to be able to reach the main members that are missing the garden probably the most right now,” Jason said. Using XD, the team prototyped a web experience for their footage and audio, iterating and swapping assets/moving elements in the design until it had the right combination of being easy to use and visually stunning. All of this had to be done virtually; with their offices closed, the team relied on Adobe XD’s collaboration features as they perfected this experience.

“You can’t really walk over to someone’s desk right now and tap them on the shoulder to say, ‘I’d like you to move these two pictures over to the left.’ XD’s a great way to communicate remotely; I see it almost like a designer’s chat of sorts within the agency. We can get in there, mark things up, and be very specific as far as edits. Because of these features, we were able to knock this experience out quickly,” he said.

“If it wasn’t for XD, we probably wouldn’t have been able to do this,” Danny added. “It would have been the old-school way of ‘Let me send you over a screenshot. Then you recomp the screenshot and send it back to me.’ XD really helped us bring all the feedback into one place, and it was a great communication tool to work with in the situation that we’re in.”

User testing to design a calming experience for all ages, especially older people sheltering at home

The shelter-in-place order didn’t just make it harder for the Republica Havas team to collaborate with each other, it also made it trickier to create an experience that would truly serve those that need it most. With prototypes completed, the team banded together to find user-testing participants in their own networks, especially people who were less technologically savvy, who could access the experience on their varying devices.

“We were able to test everything within a matter of 30 minutes or so, after determining people who could test for us, and gain feedback from multiple sources on desktops, on tablets, and people looking on their phones. We effectively QA’d the experience before putting anything into the final asset. XD essentially let us build a little dummy test and try out our ideas before it went live, so we could ensure that people of all ages and abilities could use it,” said Jason. For him, Danny, and their team, simplicity in this experience was key.

“We wanted to share these experiences in a very simple digital space, without complicating it. We know many of the fans and members of Fairchild are a bit older. When we start to get too much into a techy world, it scares them off. By testing in XD, we could ensure it was simple. Get there, press play, enjoy it. And I think that’s what we accomplished.”

Using ambisonic sound to create an immersive experience

As mentioned above, a key component of the Fairchild experience Havas set out to create has to do with audio, not video. It might seem odd at first — a garden is inherently a highly visual experience — but for Jason and Danny it was the sounds of Fairchild that make it the impactful and highly relaxing visitor experience it is. They decided to capture and use ambisonic sound, a technology many will be familiar with from VR experiences. It’s full audio immersion — Havas set up production in eight sections of the garden, each with a unique sound. To capture the experience, they used a special four-channel mic to record sound from all directions at the same time.

“The ambisonic mic picks up everything around you, so that if the waterfall in the garden is behind you, 50 yards to the right, you’ll hear it back there. And if a bird flies by in front of you, you’ll hear the bird go from your left ear to your right ear and off into the distance,” said Jason.

The Havas team took the ambisonic mic to various parts of the garden, which have very different soundscapes than one another. “There is a vast array, from desert to lowland to rain forest,” said Danny.

The end result is a testament to our love of sound, and how important sound is in creating immersive experiences. “You feel like you’re being teleported, transported to another environment,” he added.

Launching on a (very different) Earth Day, with a soundtrack by Mother Nature

In other years, the garden would have held an in-person event to celebrate Earth Day. But this year, the occasion had to be different. That’s why the Havas team went all out and quickly turned around the experience. It’s not the same as experiencing the gardens in real life, of course, but the Havas experience provided the next best option, created with spectacular 4K video, ambisonic sound, and with the help of Adobe XD and Premiere Pro. The response has been huge.

“On social, people have been sharing photos of them with their kids eating dinner with the footage playing in the background. It’s actually relaxing people and soothing people during this time. There’s nothing like actually being there, it’s that special, but we wanted to make it as close of an experience as we could virtually. A lot of members are even asking for albums of the sounds,” said Danny.

“Mother Nature as a recording artist, and nature as art,” Jason added with a laugh. “It’s been incredible.”

https://www.instagram.com/tv/B_SBCTIJP-4/?utm_source=ig_embed&utm_campaign=loading

The Fairchild team has now opened up the experience for everyone, and you can check out all the tracks and videos of “Earth Unplugged” for yourself. Each video runs five minutes or less. For the best audio experience, the Havas team recommends using headphones!

Listen on Spotify and Apple Music.


The above video and audio web experience, created by Republica Havas for the Fairchild Tropical Botanic Garden, was designed with the combined efforts of: 

Jorge A. Plasencia, Co-founder, Chairman & CEO
Luis Casamayor, Co-founder, President & CCO
Anthony Bianco, Executive Vice President & General Manager
Danny Alvarez, Executive Creative Director
Jason Wolske, Executive Creative Director
Tina Assadpour, Sr. Copywriter
Ramiro Carranza, Sr. Art Director
Ignacio Martel, Sr. Art Director
Gus Fernandez, Head of Production
Rick Morales, Video Editor
Asley Malboa, Senior Web Developer
Alexis Regalado, Account Director
LaTasha Stirrup, Senior Account Manager
Daniella Biffi, Director of Communications
Amanda Murguido, PR Account Manager
Abe Zarran, Senior Manager, Creative Operations
James Tejada, Owner/Head Systems Tech, Unreal Systems

Related posts

5 Ways E-Commerce Stores Can Keep Customers Safe During Cyber Season

Jason Floyd

How Responsible AI Can Augment Business Processes and Improve the Customer Experience

Benjamin Cox

Should Your Business be Using AI?

Wilson Pang