A custom-designed and developed website for ʻĀkoʻakoʻa, a coral resilience project combining science, culture, education, and government partnerships. Built in Webflow with custom Lottie and Spline animations that bring the brand system to life and showcase the project's scope across Hawaiʻi Island's west coast.
ʻĀkoʻakoʻa is a coral resilience project spearheaded by Dr. Greg Asner, born from his work with the Global Airborne Observatory mapping corals on the west side of Hawaiʻi Island. The project operates at the intersection of four equally important pillars: Science, Culture, Education, and Government. Each pillar is represented as a circle in the visual identity, symbolizing their interconnection and equal weight in the project's success.
The website needed to communicate that ʻĀkoʻakoʻa isn't simply a science initiative, but a community-grounded effort deeply rooted in cultural advisories, partnerships with government at every level (county, state, and federal), and comprehensive educational programming. The challenge was creating a digital presence that honored all four pillars equally while showcasing the unprecedented scope and scientific rigor of the mapping work.
I designed and developed the site in Webflow, working directly from the visual identity system I had created for the project. The brand and website fed into each other throughout development, with design decisions in one medium informing and strengthening the other. This tight integration ensured visual consistency and allowed the identity to expand naturally into its digital expression.
The site includes custom Lottie and Spline animations that activate key moments throughout the experience. The homepage hero features a custom Lottie line animation that traces the ʻĀkoʻakoʻa logo form as an entry point. I reused this animation in a horizontal scroll section where it's tied to scroll position, revealing Global Airborne Observatory imagery of the entire coastline from ʻUpolu Point in the north to South Point as users navigate through the section. This scroll interaction visualizes the geographic breadth of the project area in a way that static imagery couldn't capture.
On the Circles page and individual pillar pages (Science, Culture, Education, Government), I created 3D Spline animations of the four circles from the logo. These animations rotate and interact as users explore each section, reinforcing the visual language of interconnection and balance between the four pillars.
The site architecture includes sections for the project overview, detailed information on each of the four circles, team bios, funder and partner recognition, and educational resources. Content was developed collaboratively with Greg Asner and the ʻĀkoʻakoʻa team, with photography and videography captured by Andrew Hara and Joey Trisolini.
The result is a site that communicates scientific credibility, cultural respect, community engagement, and governmental partnership in equal measure, reflecting the true nature of the ʻĀkoʻakoʻa project.
The primary challenge was balancing the visual weight and narrative importance of four distinct pillars—Science, Culture, Education, and Government—without prioritizing any one over the others. The project operates in the space where these domains intersect, and the website needed to reflect that equilibrium clearly.
Managing content from multiple stakeholders with different communication styles and priorities required careful information architecture planning. I worked to structure the site so each pillar could tell its story fully while maintaining visual and conceptual coherence across the whole.
Creating the scroll-triggered Lottie animation tied to the coastline imagery required custom JavaScript to sync animation progress with horizontal scroll position. The goal was to create a seamless reveal that felt intuitive and enhanced the storytelling around the project's geographic scope.
The Spline 3D animations added visual interest to the circle concept, but required performance optimization to ensure smooth loading and interaction across devices. Balancing animation complexity with page performance meant iterating on the 3D models and export settings.
Because I had designed the visual identity, I was able to make real-time design decisions during website development that strengthened both the brand system and the digital experience. The two processes informed each other continuously, allowing for a more cohesive final result than if they had been developed separately.
Working with Andrew Hara and Joey Trisolini's photography and videography gave the site rich visual content that grounded the science in place and showed the human side of the project—community members, cultural practitioners, scientists, and educators working together in the field.
The site launched in January 2024 after development throughout 2023, and serves as the primary digital home for the ʻĀkoʻakoʻa project.
Selected screenshots showcasing homepage, circle pages, scroll interactions, and the integration of custom animations throughout the ʻĀkoʻakoʻa website.
