GHG Accounting Website
From an outdated landing page to a high-performance, custom-coded interactive platform.
Overview
GHG Accounting is a specialized sustainability firm helping global organizations navigate emissions tracking and decarbonization strategies. When I began this project, their digital presence was a single, outdated page that failed to communicate their expertise or the complexity of their software solutions. I led a multi-year evolution, first rescuing the brand in Webflow and eventually migrating the entire system to a custom-coded architecture for total performance and ownership.
Client
Year
Role
Tools
The Problem
The original site was a bottleneck for growth:
- Rigid Structure: A single-page layout that couldn't support new services or software content.
- Visual Noise: Confusing navigation and dense "walls of text" that frustrated users.
- Outdated Branding: An aesthetic that didn't reflect the firm's role as a global environmental leader.
The Goal
The main objective was to transform the outdated digital presence into a high-performance ecosystem that aligns with the brand's growth and technical needs.
Redefine the Visual Identity: Establish a professional and modern aesthetic through a new design system that builds immediate user trust.
Enhance Information Hierarchy: Restructure the user flow to ensure complex information is easy to navigate and digest.
Optimize Technical Performance: Rebuild the platform using a "Pro-Code" approach to eliminate bloat, improve SEO, and ensure lightning-fast speeds.
Ensure Future Scalability: Develop a custom, independent system that supports multilingual content and allows for long-term growth without platform dependencies.
My Design & Development Process
UI & Motion Storytelling
I built a professional design system in Figma using a nature-inspired palette. To explain complex carbon data, I illustrated assets in Illustrator and animated them via Lottie to create an interactive narrative.
Technical Challenge: The Hero Synchronization
The project's centerpiece is the interactive hero background.
- The Task: Create a cinematic, multi-layered environment in After Effects.
- The Result: I synchronized dozens of Lottie layers for the final build, achieving high-fidelity motion that stays incredibly lightweight for the browser.
The Refactor: From Builder to Pro-Code
When the client outgrew third-party hosting, I rebuilt the entire site:
- Performance: Refactored the UI with Tailwind CSS, removing thousands of lines of unused code.
- Logic: Engineered a JavaScript CMS to manage dynamic content and translations locally without a heavy database.
Final Results & Reflection
Looking back at these four years, I’m honestly so proud of how this project and I grew together. It wasn't just about making the site look "modern",it was about completely rebuilding the foundation so it could actually support where the business was heading.
- Owning the Code: Moving from Webflow to a custom-coded stack was a huge shift for us. Now, the client has a professional, high-performance site they truly own, without being stuck with the limits or costs of a third-party builder.
- Thinking Global: Scaling the original landing page into a system that handles 7 languages was a massive technical challenge. It really pushed me to think deeper about UX architecture and how to keep things organized at scale.
- Leveling Up: This project was where I really mastered Tailwind CSS and custom JS logic. It proved to me that to get the best results for a client, you have to be willing to leave the comfort of visual tools and get your hands into the code.
