03 · Case study
Rooftop solar made simple.
Homeowners want solar but not the paperwork. Mierae handles the visit, the installation and the government subsidy. The site's job is to turn a curious visitor into a free home-visit enquiry.
Mierae Solar installs rooftop solar for homes in Andhra Pradesh and Odisha, and manages the PM Surya Ghar subsidy for the customer.
I designed and built the site around two free tools: a savings calculator and a subsidy eligibility check. Neither needs a sign-up.
The goal
Get a homeowner to a booked free home inspection in as few steps as possible.
Before opening Figma, we sit down over a coffee and talk.
What are we building? Who is it for? What problem are we solving? What does success look like?
On Mierae SolarHomeowners who want solar but not the paperwork, and a lead that means a booked home visit.
We look for the best beans before we brew.
We study competitors, users, trends and references to understand what works, what doesn't, and where we can do something different.
On Mierae SolarWhat worries homeowners about going solar: paperwork, approvals and cost.
Now we work out the right mix.
We map the user journey, information architecture and key interactions, turning a messy idea into a clear plan.
On Mierae SolarA short page: proof, process, calculator, then apply. The calculator asks only for a bill and a state.
No fancy latte art yet. Just getting the shape right.
We create wireframes and explore different layouts and flows before spending time on the final visual design.
On Mierae SolarLayouts for the hero, the three-step process and the calculator explored before the final design.
Now the personality comes in.
Typography, colours, imagery, motion and visual details come together to give the product its character.
On Mierae SolarSolar green for energy, sun orange for action, and a homeowner story in the hero.
Good experiences need a system behind them.
We build reusable components, styles and design rules so everything stays consistent as the product grows.
On Mierae SolarButtons, cards and form fields set once so every call to action looks the same.
A static design starts coming alive.
We prototype interactions, transitions and micro-animations to experience the product before development.
On Mierae SolarCalculator and eligibility interactions planned so results appear in seconds.
Time to take it from the counter to the customer.
The designs are developed into a responsive, functional product while keeping the original experience intact.
On Mierae SolarBuilt as a React website, with the calculator logic and enquiry form.
We taste everything before serving it.
We test responsiveness, interactions, usability and visual details, then refine whatever doesn't feel right.
On Mierae SolarCalculator numbers and the enquiry form checked on phones, then polished.
The experience is ready for the real world.
We launch, monitor performance and make sure the final product feels as good in reality as it did in Figma.
On Mierae SolarLive at mierae.com, serving Andhra Pradesh and Odisha.
The two paths that turn a visitor into a lead are green: the eligibility check and the calculator.
Scroll sideways to see the whole flow
Rooftop solar
DM Sans and Poppins · 500 to 700 · headlines and interface
Premium solar systems built for performance, savings, and trust.
DM Sans · 400 · body
What shipped, and where you can see it.
Free intro call, fixed quote.