Soline Renewable Energy

The challenge

Soline isn’t a simple company to explain. They work with distributed micro and mini generators, electric vehicle chargers, BESS storage, and business models that are still under development. It’s a renewable energy company with at least 4 different fronts running at the same time.

The problem: how do you put all of that into a website without it looking like a mess? The audience is mixed and each group is looking for something different. Investors want to see numbers, business model, and expansion strategy. Companies want a solar energy quote. Partners want to understand if Soline has the structure for a joint operation. Everyone arrives through the same door.

Most solar energy websites solve this by listing services on a generic page. But Soline has real technical data (capacity in kWp and MWp, number of projects, installed power) that needs to be visible without scaring off non-technical visitors.

The solution

The main work here wasn’t code — it was information architecture. Before writing a single line of HTML, I mapped out the 3 visitor profiles and what each one needs to find within the first 30 seconds:

Investor: traction numbers, business model, growth strategy, who’s behind it. Corporate client: what Soline does for them, how much they save, how the process works. Partner: company structure, locations, types of possible partnerships.

From there, I organized the sections in an order that serves all three without making anyone scroll through irrelevant content:

• Hero with a direct value proposition and segmented CTAs (quote vs. explore projects)
• Credibility with real operational numbers — technical people read the data, non-technical people see that the numbers are big and trust it
• The 3 business pillars (micro-generation, DC chargers, mobility) with visual cards. Each pillar is self-contained — visitors only read what matters to them
• Technical capacity data for generators separated by category (micro DGs vs mini DGs) with a clean table
• Business models with visual explanation by type: solar, wind, BESS, transmission. Each model has its own visual context to avoid walls of text
• About the founder with photo and bio — in infrastructure businesses, the CEO’s face sells
• Proven savings with comparative numbers: fuel vs. electric
• Map of locations and strategic placement types
• Partnerships and phased expansion strategy (validation → expansion → scale)
• Traction numbers: 50+ locations, 5 cities, 36+ chargers

Design

Orange/coral palette as an energy accent on a light background. The color choice wasn’t aesthetic — orange conveys energy and movement, which is exactly the brand’s positioning. A tone that balances corporate credibility with approachability. Visitors need to feel “serious company” without feeling “bureaucratic company.”

Cards with real photos of installations and solar panels. Layout that alternates dense sections (technical data, tables) with breathing room (CTAs, white space) so the visitor doesn’t get overwhelmed with too much information at once.

Performance

Astro SSG with Lighthouse 95+. Specific challenge here: the site has a lot of field photos (solar panels, installations, team) that are naturally heavy. All were optimized in WebP with actual display dimensions and lazy loading. The visual weight of the site is high, but the technical weight stayed low.

Results

• Website that organizes 4 different business fronts into clear navigation
• 3 visitor profiles (investor, client, partner) find what they’re looking for without getting lost
• Complex technical data (kWp, MWp, business models) presented without scaring non-technical audiences
• Expansion strategy and traction numbers visible for investors
• Lighthouse 95+ even with a high volume of field photography