Blaustrom

WebsiteUI/UXConfiguratorResponsive design

A website for Blaustrom, a Bavarian company that sells solar power systems for homes: solar panels, batteries and EV charging stations.

My role

Designer

Site structure and page layouts
The four-step configurator
Logo and logo animation
Desktop, tablet and phone layouts
Icons, sliders and the style guide

Team

I was the only designer and worked with Blaustrom’s founder. Their developers built the site.

01 / 05

Main page

The site is one long page with five sections, one for each menu item. The first section opens on a dark screen with the logo, followed by a slider with three slides on the blue gradient.

First screen
The logo, the line “It’s all about energy” and a “Design System now!” button.
We make electricity blue
A solar system with a battery can cover up to 80% of a home’s electricity. Blaustrom supplies the rest from regional renewable sources.
Your energy future from a single source
A line drawing of a farm, solar panels, a wind turbine, a house and an electric car. Each plus button opens a short note about that part of the system.
From Registration to Z
The five steps Blaustrom takes care of: inquiry, planning, installation, registration and operation.

First screen: the menu, a large blue b, the line It's all about energy and a blue Design System now! button on a dark background

Slide We make electricity blue: text on the left and a photo of a house with solar panels at dusk on the right

Slide Your energy future from a single source: a plus button on the line drawing is clicked and a note about the electricity meter opens

Slide From Registration to Z: text on the left and five round icons joined by a dotted line: inquiry, planning, installation, registration, operation

02 / 05

About us

The text explains how Blaustrom differs from a usual energy supplier. Customers produce most of their electricity with their own solar system, and Blaustrom delivers only small amounts of Bavarian electricity from the grid. Next to the text is the founder, Fabian Eckl, with a short bio and links to his profiles.

About section: the heading Blaustrom is innovative and different with three paragraphs, and on the right a round photo of the founder Fabian Eckl with a bio in italics

03 / 05

Product partners

A slider with the four brands Blaustrom installs: BYD batteries, SolaX inverters, LG solar modules and ABL charging stations. Each slide has three key points with icons, a short text, the brand logo, a link to the brand’s website, a datasheet download and a video.

04 / 05

Configurator

The configurator plans a system in four steps. Each step is its own screen, and the bar at the top shows which steps are done. The first screen asks for the address and whether the customer already has a solar system.

Step 1: a satellite map of a house on the left, and on the right two roof areas, A in blue and B in yellow, each with kWp, orientation and a roof angle slider

A satellite map of the house. Each roof area gets a letter and its own row with the size in kWp, the orientation and a slider for the roof angle from 0° to 50°. A roof area that should not be used can be switched off.

Step 2: Choose your consumer group with Home, Farm and Business, and a slider with person icons set to 4 persons above a field with 4500 kWh

Home, farm or business. For a home, a yellow slider with household sizes from one to six people sets the yearly electricity use. The number in kWh below it can also be typed in.

Step 3: Who is your actual energy supplier? with a drop-down, and What is your kWh price? with a slider set to 27 cents

The customer picks their current supplier from a list and sets what they pay per kWh on a slider from 15 to 35 cents.

Step 4: three cards with 68%, 78% and 72% local blaustrom rate, each listing solar system, yearly production, battery, grid consumption and grid feed, with a Take it button

Three systems to choose from. Each card shows the share of electricity the home would produce itself, the size of the solar system and the battery, the yearly production, and how much electricity would come from and go to the grid.

Prototype of step 4: Take it is clicked on the third card and the personal proposal form opens with the chosen system on a blue panel

“Take it” opens a form with the chosen system on a blue panel. The customer leaves their name, email and phone and can subscribe to the newsletter.

Thank you screen with all four steps checked and a text about the proposal sent by email

The last screen has all four steps checked and says that a detailed proposal was sent by email.

05 / 05

Contact

A form with name, email, phone and message, and a Google map where the office is marked with the b from the logo. The dark footer has the address, social links and the line from the first screen, so the page ends the way it starts.

Responsive

Tablet and phone layouts

320px +

On smaller screens the menu folds into a round button in the top-left corner and opens over the page. Slides and text stack in one column. The configurator needs a screen at least 720px wide, so phones show a short message about that in its place.