ANODA Discuss your product

An energy customer portal, no phone call needed

heimWatt’s customer portal lets homeowners follow their heat-pump or solar installation.We designed it from scratch and built its frontend.

The heimWatt portal dashboard in German: a heat-pump and a photovoltaic project with their status, and the customer’s six documents with what each one needs; A heat-pump project on a phone: its status, address, installation dates and a quote ready to download
Design
+ frontend from the first flows to the tested code handover
2
languages German first, and English
375
px and up every screen designed down to a phone

heimWatt plans and installs heat pumps and photovoltaic systems for homeowners. An installation runs for months, and customers need to know where theirs stands between visits. We designed a self-service customer portal from scratch and built its frontend , with sign-in, magic-link invitations and the project data heimWatt keeps in HubSpot.

The customer’s side of a heat-pump project

A homeowner meets the portal through an invitation and then returns to it at every step of the installation:

  1. Invitation

    • Magic-link sign-up
    • Login and reset

  2. Projects

    • Heat pump
    • Photovoltaics

  3. Status

    • Where the project stands
    • What comes next

  4. Quotes and documents

    • Offers
    • Project files

  5. Profile

    • Personal data
    • Contact heimWatt
CRM truth customer language
HubSpot stages mapped to statuses a homeowner understands, without the portal inventing its own.
German English
Layouts that hold longer German words, with German as the default.
Desktop phone
Every screen down to 375 pixels, not a desktop page squeezed.

Where the project stands, before anything else

Found
A homeowner opens the portal with one question: what’s happening with my installation?
Decided
Status and the next step first, then quotes and documents, then the project’s details.
For the user
The stage of the installation and what is waiting for the customer are on the first screen of every project.
A heat-pump project page in German: the project’s status and dates at the top left, its quotes below and its documents on the right
After: a heat-pump project, in German

  1. Where it stands

    The project, its stage on the timeline, the address, the dates and who to ask.

  2. What it needs from you

    Quotes and documents, newest first, each marked with what it needs: sign, save or fill in.

From flows to a handed-over frontend

Phase 1, designed and built by the same team.

  1. Research and IA

    What customers need to see, and how the portal maps onto heimWatt’s CRM.

    Artifact Competitor analysis, information architecture and user flows.

  2. Wireframes

    The dashboard, project pages and onboarding, on desktop and phone.

    Artifact Desktop and mobile wireframes.

    A grey wireframe of the portal dashboard: two project cards with their progress steps above a documents table with filters and pages

  3. UI and design system

    The look, from two approaches, and the components the frontend is built from.

    Artifact Responsive UI in German and English, and the design system.

  4. Frontend

    A working portal on real CRM data, rebuilt after the first implementation.

    Artifact The responsive frontend with Firebase sign-in and magic-link onboarding.

  5. QA and handover

    What heimWatt’s team needs to run and extend it.

    Artifact QA and fixes, source code, UI exports, the Figma file and a design-system tutorial.

An invitation, then one place for every project

Found
Customers arrive from an email, not from a sign-up page, and may have more than one project.
Decided
Invitation-based onboarding into a dashboard of the customer’s projects, each opening to its own status, quotes and documents.

  1. Onboarding

    From the invitation link to a first sign-in.

    Open the full map
    Onboarding flow: a form to check or fill in personal data and technical requirements, synced with HubSpot, then the dashboard

  2. Project

    From the dashboard to a heat-pump or solar project.

    Open the full map
    Dashboard flow: what the dashboard holds, then search, filters, sorting, viewing and downloading documents, and a quote opening in its own view

  3. Account

    Personal data and the customer’s own documents.

    Open the full map
    Customer data flow: from the customer’s data to personal info and the table of their documents
The portal’s phone menu: dashboard, projects, quotes and documents, personal data, contact, referral and a language selector

Six items, and the language one tap away

Dashboard, projects, quotes and documents, personal data, contact and referral; German and English switch from the menu.

  • Competitor analysis
  • Information architecture and user flows
  • Desktop and mobile wireframes
  • Magic-link onboarding

What a heimWatt customer does in the portal

In the order a customer meets it.

Invitation and sign-in

Found
Accounts belong to existing CRM contacts, not to anyone who signs up.
Decided
A magic-link invitation tied to the customer’s record, then a normal login and reset; open sign-up became a Contact Us route.
The German sign-in screen with email and password beside a photo of a family in front of solar panels, and a link to get in touch instead of signing up

Project status

Found
Installations run for months with long quiet stretches.
Decided
Each project shows its stage and what comes next, in the customer’s words.
The German dashboard: heat-pump and photovoltaic project cards with a quote ready to download, and six documents with their status

Quotes and documents

Found
Offers and files were scattered across emails.
Decided
One list per project, with each document’s type, date and the action it needs.
The documents tab of a heat-pump project on a phone: specifications, heat-load calculation, manuals and warranty papers, each to sign, save or fill in

Profile and contact

Found
Customers need to check their details and reach a person.
Decided
Personal data to view, and one clear route to heimWatt.
The Personal Data page: account details, password rules, billing and registration addresses, and deleting the account

A small system, ready for a second language

Found
German labels run long, and the frontend needed components it could build once.
Decided
A simple design system for navigation, project cards, documents, buttons, fields, selectors and progress, sized for German.

Two components carry the portal

Every project is the same card, and every quote or file is the same row, on the dashboard and on the project page.

  • The project card component: a heat-pump icon, the title, Quote Ready to Download, a short description, the address and a vertical progress line
    Project card: The kind of project, its status, a short note and the address, with the timeline beside it.
  • The document row component: the project and date above, a document icon, Warranty information and a Sign badge with a menu
    Document row: Project, date, the document and the one thing it needs from the customer.

Nine statuses a document can be in

Each tells the customer what to do or what already happened: sign, save, fill in, or done.

  • Status badges: Sign, Save, Done, Fill, Saved, Sent by me, Completed, Approved and Expired, each with its own colour and icon
    Document statuses

Handed over to run without us

heimWatt received everything its team needs to operate and extend the portal.

Source code
The tested frontend
Figma file and UI exports
The design, German and English
Design-system tutorial
How to extend the components

Flows in the handoff

  1. Moodboards and UI styles
  2. Wireframes
  3. Portal UI: invitation, project status, quotes, documents and profile
  4. Prototypes for desktop and phone, in German and English
  5. Design system: colours and components to extend
The Phase 1 flow board: an inbound lead gets an email with a sign-up link, then sign-up, the account check and login, with notes on what each screen does
Flow board: Phase 1, from the invitation email to sign-up and login, with the notes for developers.
The design system’s colour page: a dark teal primary scale from 50 to 950, the lime secondary and the violet tertiary tones
Colours: The primary, secondary and tertiary scales every component uses.

A portal designed, built and handed over

Phase 1 was completed and handed over: the design, the tested frontend source, the Figma file and a tutorial for the design system.

languages, German first
2
team for design and frontend
1

Customers calling to ask where their project stands?

Tell us what your CRM knows and what your customers keep asking. We’ll design and build the portal between them.

Discuss your product See more portal and web app work

What this project needed

Design

Build