Personalizing Solar

Meraki Solar of New Mexico is a modern application that connects local customers searching for solar with the proper representative nearest to them. We put a face to solar by creating a great customer experience when learning more about Solar and its benefits. A sleek app that works on mobile, desktop and all devices.

One App for Solar!

A modernized approach to bringing rooftop solar directly to customers. Making it easy to get a quote and connect with an expert Meraki Solar Representative.

My Role

My role was to take on mutiple hats by designing, and developing a fullstack progressive web app using React & Next.js. I was the lead developer responsible for ideation and implementation of the entire application.

Timeline

This was a 3 phased project that began with ideation & research, then designing the UI, and finally by building the complete fullstack application and implementing a dynamic marketing strategy.

What was asked?

Meraki Solar Solutions is a nation-wide distributor of premium solar panels and solar solutions. I was asked to create a new modern web app for an entirely new Meraki branch in the state of New Mexico.

A PWA using Next.js

This Progressive Web App is called "Meraki Solar NM".

The Challenge

To create a localized experience using functional programming methods and introduce a complete backend and frontend using React and Node.js. Think of the app as a funnel for getting a quote or learning more about rooftop solar.

People want to see faces, not corporate jargon.

To build trust and integrity with your customers you cannot hide behind a brand or company, you must show your face and reviews/testimonials. By connecting visually in this manner you increase your chances of them contacting you and wanting to learn more about solar. The key is to be authentic and your customers will see it from a mile away.

Introducing company values.

The Meraki meaning is this...to do something with soul, creativity, or love...to put something of yourself into your work.

A quick sitemap for solar leads.

I divided all the actions and the funnels into a simple sitemap where I categorized them by content, pages and components. The goal was to guide customers through the app with more information, values, and by building trust. Then by making "learning more" about solar simple, by clicking 1 of 3 call to actions that funnel to a submit form.

Online Leads are tough to come by.

Rooftop solar is not a cheap investment, so the problem faced was making "Solar Simple" and building an experience that would give the customers all the information they were seeking about solar to make their switch seem less daunting.

Personalizing Solar without being too pushy.

Solar is a high ticket sale and to gain more customers you must personalize the experience and speak directly to the shopper. By answering all their questions and giving the value they were desperately searching for. Sometimes people are looking to be sold and just need that slight push to allow them to make their own buying decision.

Don't buy solar today, get a free quote and see if it works within your budget, you might be suprised at how affordable it can be!

Quality Images, and real people!

You know when you are shopping online and you check the reviews first to see what others think? The same goes for purchasing solar. By localizing solar and getting smiling faces of various customers you immediately make the potential buyer feel at ease with their decision to learn more or get a free quote. If they see one happy customer on your website they feel more comfortable, but if they see 20+ customers you have solved the problem of skepticism.

Design & Development

We took inspiration from Tesla Solar and added an entirely new spin with a completely new modernized and sleek design. A dark themed solar website that introduces yellow, a color that screams electricity, energy and power!

React.js components are like puzzle pieces.

After the design and research phase it was time to assemble the puzzle or in other words build the entire application and send it into production. This process involved creating a backend using Node.js and GraphQL, styling components with CSS, and turning into optimized app with great SEO perfomance using Next.js.

This process took the longest, but during this phase I learned so much, and overcame various obstacles. Although It was challenges to take on a design & developer role simultaneously, I had fun building the application and learned alot along the way.

Make the experience unique.

Image and video is everything, so it is no surprise that a company’s brand needs to be seen as “exclusive and unique,” and exceed customer expectations. In other words, find a way to make your customers feel special and personalize the user experience.

Stand behind your companies values

As a company selling a high ticket item like rooftop solar, the product does half of the work. The other half is left to the company to express the importance of values, their difference, and mission. It is not always about selling a product, but making sure no corners are being cut, so the customer gains more confidence in their buying decision.