manatee webar experience
Awarded not one, but two Web Excellence Awards, the Manatee Center WebAR experience is a dynamic project that blends augmented reality and virtual reality by encouraging users to step into a digital portal that transports them to the waters of Crystal River Florida — home to a healthy manatee population. When users scan the unique QR code associated with the experience, an AR portal to an underwater scene will appear directly within their current environment. Users are then encouraged to physically walk into the portal — where they will find themselves swimming alongside the local manatees in a VR experience!
Users can then move their phone in all 360º and find themselves immersed in actual underwater footage of the local wildlife. However, the main feature of the experience is showcasing the amazing conservation work being done by the Manatee Center to help preserve the manatee population of Crystal River. While in the portal, users can tap a button that will immediately change the VR scene to murky and trashy waters to give them a perspective of how the waters looked prior to conservation. Users can tap the button again, and users will notice how the underwater scene is now a cleaner and more enjoyable environment for the manatees thanks to the ongoing sustainability efforts of the Manatee Center!
Client
- Madden Media
- Discover Crystal River Florida
Platforms
WebAR
SERVICES
WebAR Development
Prompt custom AR content from a mobile browser
Custom Software
Code development specific to the project’s needs
360º Video
Immersive spherical video of existing locations that can be placed in VR
On-Site Production
Travel based on the project’s needs to capture any necessary data
Portal Development
Combining AR & VR to interact with digital elements within a real-world environment
Mobile Design
Complimentary mobile designs that are compatible with numerous mobile
devices and browsers
THE PROJECT PROCESS
The Manatee Center WebAR experience afforded us the opportunity to develop our first augmented reality-based portal. Combining AR and VR required a series of in-depth wireframes to ensure design and development were on the same page — all while providing the best possible user experience.
TIMELINE STAGES
USER STORIES
A process of identifying and organizing content.
WIREFRAMES
Planning the rough layout and structure of the site’s pages.
UI DESIGN
Applying the styles to the wireframes to achieve the final design.
DEVELOPMENT
Building the website with modern coding techniques.
QUALITY ASSURANCE
Identifying and fixing any bugs in the code on multiple devices and screen sizes.
LAUNCH
Setting up your site on a hosting service or packaging up the code and handing it over to you!
PROJECT DEVELOPMENT
Representing their client, Discover Crystal River Florida, the team at Madden Media reached out to Gravity Jack for their help in creating a shareable digital experience that lets users see first-hand the conservation and sustainability efforts the Manatee Center is undertaking on behalf of the local manatee population. Since Discover Crystal River Florida wanted to get the experience in as many hands as possible, Gravity Jack recommended utilizing WebAR — a technology that can prompt augmented reality content without downloading an app.
WebAR functionality has recently added the ability to add portals within the experience — meaning we are able to fuse our favorite technologies of augmented reality and virtual reality! For the Discover Crystal River Florida project specifically, it meant that we could open an AR underwater scene directly within the user’s environment and have them physically walk into it and immediately be immersed in 360º footage. To get this footage, the Gravity Jack crew packed their cameras, headed down to Crystal River Florida, rented scuba gear, and dove with manatees to get two days worth of footage. Equipped with the necessary 360º video, we traveled back to Washington and began the stitching and editing process. From there, we were able to install the edited footage into the AR portal.
Tieing the entire project together involved users first scanning a QR code unique to the project. Once scanned, the experience automatically opens a web browser and accesses the phone’s camera. Leveraging AR technology, the experience then places a 3D portal to a completely new world directly within the user’s environment. Users are then instructed to physically walk into the portal where they find themselves transported to an underwater VR experience. They can then move their phone in all 360º to get a complete view of the underwater scenery — such as the manatees, fish, and other elements. To showcase the conservation and sustainability efforts, the experience features a button that can alter the VR scene back and forth between murky and dirty waters to a clean and healthy environment for the manatees.
Equipped with the Manatee WebAR experience, the team at Discover Crystal River Florida is equipped promotional tool that is both educational and engaging. Thanks to the WebAR technology and not having to download an app, they also have the ability to expose the project to a much larger group of users.
3D DEVELOPMENT
The augmented reality portion of the experience required the inclusion of 3D assets. Above is the portal users would see placed in their current surroundings and would walk through to get to the VR experience.
3D Asset Optimization
Adding details and optimizing existing 3D models for mobile use
ON-SITE PRODUCTION
In coordination with the Manatee Center in Crystal River Florida, the Gravity Jack crew packed their cameras, headed down to Crystal River Florida, rented scuba gear, and dove with manatees to get two days worth of footage
360º Video
Immersive spherical video of existing locations that can be placed in VR
MOBILE DESIGNS
Creating a WebAR experience requires the ability to develop designs that will be compatible with a user’s preferred browser for web such as Chrome and Safari.
Chrome & Safari Browsers
Ability to recognize a device’s preferred browser
DESKTOP DESIGNS
The client wanted to set up a web page that hosts the unique QR code that prompts the experience. Gravity Jack designed a simple landing page that the client then included as part of their website.
Chrome & Safari Browsers
Ability to recognize a device’s preferred browser
ON A MOBILE DEVICE? SEE IT IN ACTION!
The Manatee Center WebAR experience is a dynamic project that blends augmented reality and virtual reality by encouraging users to step into a digital portal that transports them to the waters of Crystal River Florida — home to a healthy manatee population.
The Goal
Create a shareable digital experience that lets users see first-hand the conservation and sustainability efforts the Manatee Center is undertaking on behalf of the local manatee population.
Gravity Jack’s Solution
Fuse augmented reality and virtual reality together in a WebAR project that lets users experience digital content without having to download an app
The Result
Created an experience featuring an AR portal to an underwater scene. Users are then encouraged to physically walk into the portal — where they will find themselves swimming alongside the local manatees in a VR experience!
