Renesource

I met with Renesource to understand its challenges, then researched customer expectations and competitors, including Buskowitz Energy, MSpectrum and Solaric. Competitors used completed installations and recognisable client logos to establish trust, but left room for stronger visual presentation.

I developed a strategy to make Renesource’s achievements more visible, strengthen credibility and give prospective customers a reason to enquire.

I translated the research into wireframes structured around how customers evaluate a solar provider. Project footage and client logos establish credibility early, completed work demonstrates experience, and the calculator and consultation give visitors clear next steps.

I presented the wireframes to the team and secured approval before developing the designs in Figma. Auto Layout, grids, reusable components and responsive layouts created a consistent visual system aligned with the brand and helped reproduce the designs in Webflow.

I built the approved designs in Webflow. Drone footage I requested from the team and client logos introduced Renesource through visual proof; leadership profiles and the company’s process added context.

An animated globe showed where Renesource had operated. I used GSAP for its location markers and ScrollTrigger for numerical impact counters, showing installed capacity, financial savings and environmental impact without asking visitors to read a lengthy company history. Essential information remains accessible without animation.

Each project needed technical specifications, supporting media and environmental and financial impact figures. I replaced manual page building with Webflow CMS collections and reusable templates, using clearly named fields and reference relationships to connect projects with their media. Custom code and CSS kept technical data consistent across pages.

Completed entries populate project pages and listings automatically. I used the same approach for the blog and trained the team to manage both independently. The 14-page site can be updated without editing layouts, writing code or relying on a developer.

The calculator answers a key buyer question: how much could solar save, and when might it pay for itself? I built a JavaScript calculation engine, with AI assisting parts of the implementation, that estimates energy consumption from an electricity bill. City-specific tariffs and peak sun hours, target solar offset and available roof area inform the recommended system size.

Residential and commercial properties use different assumptions for consumption, export credits and installation costs. Results include estimated generation, savings, investment, payback and panel count. A location autocomplete supplies the relevant city data as users type.

Visitors submit their contact details to access a personalised estimate. I made the interface keyboard-operable with ARIA tab and listbox semantics, arrow-key navigation, Enter to select, Escape to dismiss suggestions and visible focus states across screen sizes.

I structured content, headings, metadata and internal links around Renesource’s actual services, locations and completed work. Project CMS pages can expand this content as new installations are published; I also configured homepage search and Open Graph metadata.

Before launch, I tested responsive layouts, loading, layout stability and custom interactions, including the calculator’s keyboard functionality and focus states.