Lifestyle Solar

UX Strategy, UI Design & Webflow Development

Lifestyle Solar needed a conversion-focused website to communicate their solar services and generate qualified leads. I led the project end-to-end, from UX strategy and UI design to building the final responsive site in Webflow.

Role: Senior UI/UX Designer & Webflow Developer
Scope: UX, UI, and Front-end implementation
Tools: Figma, Webflow
Focus: Lead conversion, trust building, responsive performance

Before

Front view of a modern single-story house with a manicured front lawn, driveway, and trees in the background.

Aerial view of a residential neighborhood with houses featuring solar panels on the roofs.

Screenshot of a website homepage for Lifestyle Solar with a blue and white color scheme, featuring navigation links and a main section highlighting solar installation services in Fresno, California, with icons and text about their services and qualifications.

Image of a modern house with solar panels on the roof, surrounded by green trees and grass, promoting backup batteries for solar energy.

Screenshot of a website homepage for 'Lifestyle Solar' with section titles 'Solar Made Simple', 'Quoting/Financing', and 'Design & Permitting'. The page describes the company's solar energy services with a dark-themed background and white text.

Aerial view of a commercial building with solar panels on the roof, adjacent to a parking lot with several cars, next to a busy street with moving cars and a large office building in the background.

Audience

The primary audience included homeowners researching solar energy solutions. Users were typically early in the decision-making process and looking for clarity around costs, installation timelines, and long-term savings.

Goal

Create a trust-driven experience that clearly communicates the benefits of solar while guiding users toward requesting a quote or scheduling a consultation.

Role

Senior UI/UX Designer & Webflow Developer. Led the project end-to-end, including UX strategy, wireframing, UI design, prototyping, and building Phase One in Webflow.

Process

Research → Wireframes → UI Design → Webflow Build. A lean, iterative process focused on improving clarity, usability, and conversion.

Challenges

Balancing a premium visual style with accessibility and performance. I explored multiple hero layouts, CTA treatments, and icon systems before identifying a direction that improved clarity while maintaining a polished visual aesthetic.

I focused on creating a clean layout that emphasizes clarity, trust, and strong visual hierarchy. The design introduces a stronger visual hierarchy, simplified messaging, and strategically placed call-to-action elements to guide users through the decision-making process.

Multiple overlapping website screenshots of a solar energy company's webpage featuring home solar panels, project information, pricing plans, and a modern interior home space.

Interactive Prototype

I created a high-fidelity prototype in Figma and implemented the experience in Webflow to validate user flow, visual hierarchy, and key interactions.

Supporting pages were designed to improve user flow, visual hierarchy, and engagement while guiding users toward conversion.

A Fresh Look Across Every Page

View Prototype

Screenshots of a website homepage for Lifestyle Solar, featuring sections on solar energy benefits, plan comparison, project details, and contact forms, with images of solar panels, a Tesla Powerwall, and a solar-powered home.

Mobile Experience

Responsive layouts ensured a seamless experience across devices.

View Prototype

Exploration & Iterations

Balancing a premium visual style with accessibility and performance while maintaining clarity for first-time solar customers.

Homepage of a solar energy company's website, featuring a modern house with solar panels on the roof, blue sky, and lawn. Includes menu options for Home, Builders, Services, Support, and a call-to-action button for a free quote. Icons for installs, solar equity, monitoring, and recognition are visible. Lower section shows backup batteries with a 'Learn More' button.

Flyer or brochure describing solar energy services, with icons and information on installs, community support, monitoring, and recognition, and a photo of modern solar equipment outside a house.

Modern house with solar panels on roof and green lawn in front, overlaid with promotional text about solar energy services and company statistics.

Homepage of a solar energy company called Lifestyle Solar featuring a large modern house with solar panels on the roof, a section for recent projects showing aerial images of various solar installations, and a section at the bottom highlighting company values such as internal logistics, in-house expertise, single point of contact, and preferred partnerships.

Information Architecture

A streamlined sitemap reduced clutter and guided users to key conversion pages such as quote and FAQ.

A website sitemap or flowchart with color-coded sections including homepage, navigation, hero, about, pricing, contact, battery, partner, benefits, projects, footer, product, company, support, and various subsections connected with lines.

View Information Architecture

Results & Impact

Although the full redesign was paused due to internal changes, I successfully delivered and implemented Phase One in Webflow. This initial release established a modern foundation, improved usability, and created a scalable framework for future expansion.

Freelance Projects