Project Overview
Tools Used: WordPress, Figma
Industry: Hydrogen Storage Solutions
Enzo Cavelier, the founder of Hebe Network, a company specializing in hydrogen storage solutions using underground tanks, approached me with a clear objective: to elevate the aesthetics and usability of the Hebe Network website. The previous site had limited usability, lacked a responsive design, and offered a less-than-ideal user experience. Enzo’s goal was to make Hebe Network’s innovative approach to renewable energy storage as accessible and visually compelling as possible.
Project Goals and Challenges
The project’s primary goals included:
- Improving Usability: Enhancing the user interface to make navigation more intuitive for visitors.
- Aesthetic Upgrades: Redesign the site to reflect better the company’s focus on innovation in renewable energy storage.
- Full Responsiveness: Ensuring the website looks and functions seamlessly across all devices.
However, I faced a significant technical challenge early on. The site’s PHP version was outdated, which led to compatibility issues with several essential plugins. Additionally, the existing UI design hindered user engagement, and mobile responsiveness was poor.
My Approach
I began with a client consultation over Zoom to clarify Enzo’s goals and identify key areas for improvement. Leveraging our previous collaborations, I crafted a clear plan to streamline the redesign process.
1. Sitemap & Prototyping: Using insights from our discussion, I created a sitemap and developed prototypes in Figma, refining them over a few iterations based on Enzo’s feedback.
2. Design & Development: Once the prototypes were approved, I transitioned to WordPress for the main build. I implemented a bold, dynamic design that symbolized Hebe Network’s focus on sustainable energy, incorporating striking typography and movement to bring energy and visual interest to the hero section.
3. Technical Adjustments: To address the PHP version issue, I cleared the cache and reinstalled the site, updating it to the latest PHP version in cPanel. This allowed me to work seamlessly with the latest plugins, ensuring a more stable and modern foundation for the website.
Key Features and Standout Design Elements
The redesigned site includes several unique features that enhance both usability and aesthetic appeal:
- Hero Section with Dynamic Typographic Movement: The hero section uses bold fonts with subtle animations, reflecting the company’s mission of driving change in renewable energy.
- Interactive Popup Menu: A hamburger icon with dynamic tagging activates a popup menu, simplifying navigation without cluttering the interface. This feature makes navigation smooth, whether on desktop or mobile.
Results and Impact
The redesign delivered impressive results, significantly boosting the website’s performance and user engagement:
- Usability & Responsiveness: The site is now fully responsive, providing a seamless experience on mobile, tablet, and desktop devices.
- Improved Performance Ratings: GTmetrix reports show that performance metrics improved, with an 80% performance score and an 87% structure score.
- Increased Conversions: Following the redesign, Hebe Network reported a 30% increase in conversions. This uptick reflects the enhanced usability and visual appeal that encourage users to explore further and take action.
Client Feedback
Enzo was thrilled with the result, expressing that the website surpassed his expectations. He was especially grateful for the dynamic design and streamlined functionality, which now align perfectly with Hebe Network’s brand values and goals.
