Environmental · UI/UX · Interactive
An interactive, zone-based ocean experience for CSA.
5 zones
Each an animated layer of the ocean
Interactive
Click-to-reveal fact popups
Video
Managed landing-page background
Admin
Every zone managed from the backend
The backdrop
A marine environmental consulting firm.
CSA Ocean Sciences Inc. (CSA) is a marine environmental consulting firm specializing in multidisciplinary projects concerning potential environmental impacts of activities throughout the world.
CSA offers a wide variety of desktop and field survey services — and needed a way to make ocean-level education engaging online.
Making ocean science interactive and approachable.
A customer journey map shaped the concept design.
Project goals
An interactive way to explore ocean levels.
OceanSound hired OST to create a new interface and unique concept design — an interactive, user-friendly website that lets users learn about ocean levels.
We worked one-on-one with the client to build a customer journey map, which our experts used to prepare a customized concept design.
Our offerings
Five interactive zones, each a layer of the ocean.
Once the design was approved, we focused on UI/UX development, dividing the design into five zones to create an interactive, fun, and informative experience.
Each zone shows a layer of the ocean, has its own unique animation, and links to a popup window with facts about that layer — all easily managed from the backend admin panel.
A featured deliverable
Five interactive ocean zones
A featured deliverable
Each zone carries its own animation and blinking hotspots; clicking a dot opens an animated popup (bottom-up to open, top-down to close) describing that element — with smooth animated transitions between zones.
Challenges
Custom animation engineered for performance.
The experience demanded careful design and performance tuning to keep rich animation smooth and manageable.
- Custom Joomla Gantry 5 template
- Advanced jQuery to complete the animation
- Video background managed from the backend
- Moving elements — ships, windmill fan, dredge
- Blinking-dot popups with animated open/close
- Animated transitions between every zone
Tech stack
What's under the hood.
Want to make complex information genuinely engaging?
We design interactive, animated experiences that turn dense subject matter into something people want to explore.