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.
The ʻĀkoʻakoʻa Reef Restoration Partnership of Hawaiʻi fuses cultural leadership, multi-modal education, advanced science, and government service to communities of corals and people on Hawaiʻi Island. Born from Dr. Greg Asner's 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.
Selected screenshots showcasing homepage, circle pages, scroll interactions, and the integration of custom animations throughout the ʻĀkoʻakoʻa website.
