SolarAbo enables swiss energy suppliers to offer solar power systems to home owners as either lease option or direct purchase. On a white-label platform which hosts an online calculator, interested parties can request offers for both rental and purchase options.

Client Engergie Zukunft Schweiz AG

Team size 4

Time on project 11 months

Solar Systems Leased 30+

Platform reach 100.000+

A screenshot from the SolarAbo homepage displayed in a Macbook. It shows an image of a couple that stands closely together in front of their home which has solar panels applied to the roof. Text on the image present the marketing claims, main benefits and the call to action for the offering.

My Roles

In a team of four, consisting of a project manager and a product developer from the client side (Energie Zukunft Schweiz) and a full-stack developer, I was responsible for the design and its technical implementation in the product.

UX/UI Designer
Together with stakeholders of EZS and the lead developer I identified and documented the requirements. Based on this, user flow, wireframes, UI and web design for the main steps of the user journey were created: Landing page, online calculator and offer page. For quick feedback cycles I developed a large part of the design directly in the browser in close cooperation with the stakeholders.

UI Developer
In a Ruby on Rails web application I implemented the responsive web design. Mainly HTML, CSS and ERB for templating were used. A special challenge was the generation of PDF versions of the offers. These had to be printable and consistent in appearance with the website.

Concept and Wireframes

Quick sketches in the beginning helped me to align my understanding of the requirements for the website with the stakeholders of EZS. Based on the raw concepts, requirements and initial content designs, I was able to quickly develop wireframes that enabled focused communication, rapid feedback and iteration with stakeholders. Also smaller, mobile devices were taken into account from the beginning. Corresponding drafts illustrate how layout components adapt to smartphone screens, for example.

The image presents four low-fidelity wireframes of the three main pages of solarabo.

Low-fidelity wireframes for the three main steps of the user journey on the website. Besides getting all stakeholders on the same page regarding the general design direction, they helped to identify content needs e.g. for textual content as well as imagery such as photos an illustrations. The approval of these concepts marked the starting point for further design work.

Visual Design and Illustration

Illustrations help the target group to understand the product. They explain the economic benefits of a photovoltaic system and how it can be installed on the customer’s roof in just a few simple steps with SolarAbo.

Drafts for illustrations as hand-drawn pencil sketches.

Quickly created hand-drawn pencil sketches like these helped me to convey my ideas without much effort. When the direction was set and approved I used Adobe Illustrator and Sketch to create the actual illustrations.

Four illustrations that show how users would get from website over on-site visit of solar experts to their own photovoltaic system.

To describe the process how the photovoltaic system would make its way on to the user’s roof, I created a series of four illustrations that cover the main steps in the customer journe: Website, on-site visit of installers, construction and eventually the operation of the system.

This image illustrates an example calculation and shows a four person family that lives in a typical house with a certain roof size. The image also shows how the electricity mix is made up of self-produced solar electricity and grid electricity.

Making an example calculation easier to understand by illustrating which factors have an influence on the profitability of the system. This illustration visualizes how a photovoltaic system would work for a typical 4-person family houshold. It illustrates how the electricity mix is made up of self-produced solar electricity and grid electricity.

Landing page & offer calculator

Landing page

A one-pager presents the product “SolarAbo”, its benefits and how it works.

The full-screen hero module explains in brief the main advantages of SolarAbo and invites with a call-to-action to create an offer. The format-filling photography is intended to support the message and show the result — the solar system on the roof of a typical home.

The responsive implementation takes this into account by ensuring that this information is almost always visible in full when the page is first loaded, regardless of screen size.

Offer calculator

The main functional feature of the SolarAbo website is the offer calculator. Interested users enter the key data of their roof in a six-step form. In addition to the address, roof type, pitch and orientation, the roof surface can be marked on an interactive map. All values together form the basis for the creation of an individual preliminary offer.

Following the natural downwards scrolling path, users are guided step by step through all necessary information. Special attention was paid to the comfortable usability even on smaller devices.

The offer

Based on the information in the previous calculator, a quotation is created. This communicates in clear figures which possibilities the respective roof offers and at which costs which benefit can be generated.

A detailed explanation of all positions makes the basics of the calculation transparent to users and explains details. Finally, the offer can be requested as a PDF document. Alternatively, an on-site discussion with a consultant is offered.

Lead generation and offer PDF

It is only at this point that user data is collected and treated as qualified leads from that point on. The next call-to-action for an on-site consultation appointment is contained in an e-mail and the offer PDF which users will receive once they submit some contact information.

The PDF is generated directly from the online version of the offer and transferred into a printable format using CSS.

What they are saying

Matti has shown a very good understanding for our customers’ needs. In a constructive exchange with us, he developed creative solutions that helped us to establish SolarAbo as an easily understandable and successful product. He was a reliable partner whose support we could count on. Especially when things had to move fast. Our cooperation was very pleasant and characterized by Matti’s solution-oriented and pragmatic approach.

A black and white portrait of Lars lars_konersmann.jpg Lars Konersmann Head of Solar & Member of the Board, Energie Zukunft Schweiz AG