/work/monitoring-app

EIGENSONNE from data sheet to answer

Monitoring & Customer App: concept and live prototype

Company
EIGENSONNE
Role
Senior Product Designer
Timeline
v1 2022 · v2 started at EIGENSONNE
Status
v1 released Q1 2024 · v2 unreleased, live prototype
Platform
iOS & Android (prototype on the web)
Scope
Concept, UX, UI, design system, illustration, prototype
Stack
Figma, Design Tokens, React Native, Web prototype
EIGENAPP v2 Home at midday and in the evening

Overview

EIGENAPP v1 showed homeowners plenty of data about their solar system but left them to work out what it meant. It answered "what are the numbers?" when people were asking "is everything fine, and do I need to do anything?" v2 answers first and shows data second: a live house that changes from day to night with the real sun, a plan for the hours until tomorrow morning, and clear guidance on dynamic electricity prices. It is delivered as a full design system and a working prototype driven by a simulated home energy system.

live prototype ↗

Context

I designed EIGENAPP v1 at EIGENSONNE in 2022. It was the company's first ongoing touchpoint after installation, and testers told us they could check their system at a glance and trusted it more than the hardware manufacturer's own app. It shipped in 2024.

It was also one of my first full mobile products, and it shows. Work on a v2 started at EIGENSONNE alongside the feature designs for later releases, but it never got to ship. In 2026 I picked it back up, finished the concept with everything I have learned since, and built a working prototype. The prototype runs on simulated data.

What v1 got right, and where it fell short

v1 had the right instincts: a calm teal brand, an animated energy flow where speed showed intensity, and visible system health to build trust. Looking at it again:

v1 screens with three annotations

v1 screens with three annotations

  • Everything had the same weight. The date, sunrise times and a large "System verbunden" tile took the best space. Connection status matters only when it breaks.
  • The flow diagram showed values but not direction. You could see 1,4 kW on a line, but not whether it was going into the battery or out of it.
  • The day chart plotted a percentage with a two-item legend for one line. It looked like analytics and explained very little.
  • Nothing looked ahead. Solar owners plan around the sun, the battery and, increasingly, hourly electricity prices. v1 only showed the present and the past.

Principles for v2

  • Answer first, data second. Every Home state opens with a plain sentence: what is happening, then what it means.
  • One colour, one meaning. Sun is yellow, battery green, house petrol, grid blue. The same everywhere, in light and dark. Price uses a single orange scale where lighter means cheaper.
  • Calm until it matters. Status is a small pill until something is wrong. Then it takes over, explains what happened in human terms and says what to do.
  • The app follows the sun. Light while the panels produce, dark after sunset at the customer's location.

Exploring the Home screen

I kept the structure and the content decisions fixed and explored the identity in three directions, each in a midday and an evening state:

Home explored in four directions, midday and evening

Home explored in four directions, midday and evening

  • A, calm: v1's structure, trimmed and refined. Clear and safe, but forgettable.
  • B, your roof: an illustrated version of the customer's own house. The most memorable, but expensive to make real for every roof, and weak at showing what comes next.
  • C, the sun's arc: the day as an arc with the night as a bar below the horizon. The best at showing the plan, but abstract on a grey winter day.
  • D combines them: A's structure, B's sense of a real home as a generic isometric house that's believable to build, and C's plan as a strip from now until tomorrow morning. The energy hub from v1, with the house at the centre and every connection able to flow either way, became the hero, drawn with depth instead of flat lines.

Home: now and next

A headline, the isometric house, and "Bis morgen früh": a strip showing which source will power the home until sunrise, with expensive hours marked above it. Two next items underneath, and that's it. History moved to Verlauf, so Home fits on one screen.

Home in four states: midday, evening, January and night

Home in four states: midday, evening, January and night

A headline system, not a headline

The sentence at the top is generated from the system state by rules in priority order, from "no data" to "the sun covers everything". The design has six core states. Building the prototype showed two more were needed: the battery charging from cheap grid power at night, and importing at a middling price with the battery resting. Without them, parts of a winter day had no sentence at all. At most one number per sentence, no exclamation marks, never blaming the user, and in the product it holds for five minutes so it never flickers.

Headline system

Headline system

Live: the same house across the day

The Live screen fills the width with the scene. Morning, now and an evening forecast show the house changing: the sun moves, the panels dim, the windows light up and the battery switches from charging to powering the home. Line width shows power and moving dots show direction, which fixes the ambiguity of v1's diagram.

Live screen at 8:00, now and 21:40

Live screen at 8:00, now and 21:40

Dynamic electricity prices

Hourly tariffs are becoming normal in Germany, and they are hard to read. The price screen shows today's hours on one scale, but leads with the plan: when the battery fills for free, which expensive hours it will cover, and when the cheapest grid hours are. A "good moment" card turns this into one action: run the washing machine now.

Dynamic price, day history and savings

Dynamic price, day history and savings

Calm when something breaks

When the data stops, v2 says so plainly, reassures first ("Du verlierst dadurch kein Geld"), then gives three concrete steps and a promise: if it lasts more than a day, we contact you and your installer.

System screen when all is well and when the connection drops

System screen when all is well and when the connection drops

Onboarding that already knows you

EIGENSONNE already had each customer's address, system size and battery from the sales process. Onboarding starts there: "Wir kennen dein Dach schon." The customer confirms instead of typing, connects the data logger, picks a tariff, and lands on a live reveal of their system working for the first time.

Onboarding in four steps

Onboarding in four steps

Dein Sonnenjahr

A yearly recap designed to be shared: the year's production as a sunburst, and the number of evenings the battery covered completely. For an installer, a happy customer sharing their numbers is the best kind of referral.

Dein Sonnenjahr story cards

Dein Sonnenjahr story cards

Widgets

The same language at a glance: the house with live flows, the battery's runtime until morning, a lock-screen strip and two notifications, one for expensive hours and one weekly recap. In the prototype they sit in a gallery driven by the same snapshot as the app, so they change as you scrub through the day.

Widgets

Widgets

The system behind it

Foundations

Foundations

  • Foundations: tokens for both themes, a type scale with tabular figures, a 24 px icon set, and rules for the isometric illustration and motion, so the scene can be redrawn without breaking the product.
  • Accessibility: real controls throughout, 44 px touch targets, a reduced-motion mode where flows show direction with arrows instead of moving dots, and text contrast checked in both themes by automated tests. The main screens score 100 in a Lighthouse accessibility audit.
  • A working prototype: one simulated energy model drives every screen. Scrub through a day and the headline, theme, flows and plan all update together.
  • Two scenarios and a few switches: a sunny May day and a cloudy January day, a dynamic tariff on or off, and an outage toggle that changes Home, the status pill and the system screen until "Verbindung prüfen" clears it. The demo runs in German and English and on phones.
  • Built to be trusted: the energy model is plain TypeScript with unit tests for the energy balance, the battery limits and the headline rules, because those are the parts most likely to break quietly. It is a static site with self-hosted fonts, no backend, no accounts and no tracking, and all data is simulated.

How I would measure it

As an unreleased v2 there are no results to report, so these are the measures I would set for a release:

  • Fewer support contacts asking whether the system is working.
  • How often people open the app during expensive price hours, and whether grid use in those hours drops.
  • Onboarding completion and time to first live data.
  • Sonnenjahr shares and the referrals that follow them.

Reflection

v1 taught me that monitoring is a trust product. v2 is what I would do with that lesson now: decide what the user needs to know before deciding what to show, make the system explain itself in plain language, and design the hard cases (a grey January day, an empty battery at 3 am, a lost connection) as carefully as the sunny screenshot.