Climkit

Climkit is a Swiss company that provides an energy-management platform for residential and commercial buildings, covering everything from electricity and heating to water, collective laundry, and EV and e-bike charging.

Key Insights about Climkit

Challenge

Our collaboration with Climkit focused on redesigning the Gateway Control Panel. It's the internal web tool their field technicians use to configure, monitor, and troubleshoot the energy devices installed in buildings. This panel is the bridge between Climkit's hardware in residents' homes and the staff who keep it running. Making it clear and efficient directly affects how quickly issues get resolved on site.

Climkit's panel had grown into a powerful tool over time, but its interface dumped large amounts of technical data on the user and had become difficult to navigate. They wanted a modern, intuitive frontend without touching the backend logic that already worked.

We faced two main challenges during the project:

1. Intuitive design for a complex internal tool. The existing panel has dense, technical information with little structure. It was hard for technicians to find what they needed and to understand non-obvious states. For example, that certain actions only work while "Config Mode" is enabled, with no indication of this. The redesign had to make the interface and its flows clear and intuitive for experienced technicians and new hires alike, without stripping away the depth they depend on.

2. A lightweight, fast interface for field conditions. Technicians use the panel on site, often over weak 4G connections and on hardware that isn't especially powerful. The interface had to stay lightweight and load quickly to minimize data transferred between server and client, avoid heavy processing, and reduce page-load times on low-bandwidth connections. We also had to keep in mind that a single site can carry anywhere from a handful of meters to several hundred.

Process

The redesign of the Climkit Gateway Control Panel moved through clear stages, from Scoping and Discovery to Design, Development, QA, and Handover.

During Discovery, the team focused on understanding how the device and its panel work before changing anything. Because this is an IoT product with a lot of domain-specific behavior, we worked closely with Climkit's technical lead, the "knowledge keeper" of the system. We compiled a detailed list of questions about every part of the interface: what each status means, what the configuration buttons do, how meters, charge points, card readers, and sensors report their data. We documented all of it in a document so nothing got lost, which became the foundation for the redesign decisions that followed.

Just as we ask for the physical device on IoT projects, here we asked Climkit for everything needed to work against realistic data and the real system. They provided a SQL database dump loaded with a full set of devices, which we ran locally alongside their backend, plus access to their GitHub so we could work in a dedicated branch, push our changes, and pull them onto the actual gateway to verify the result against connected hardware. Climkit also assigned a contact on their side to help with access and connectivity throughout.

Four team members worked on the project: a Project Manager, a UI/UX Designer, a Developer, and a QA Engineer. Design and development were deliberately overlapped. Once the core screens were approved, the developer began implementing the frontend while the designer finalized the remaining details, which kept the timeline tight.

Solution

The team combined close collaboration with Climkit's domain expert and a design system built specifically to bring order to a dense, technical interface.

To make the panel more intuitive, we restructured how information is presented across every screen. Dense tables were reorganized so the most important data comes first, with secondary and debugging details collapsed or muted so they no longer compete for attention. Statuses that were previously hard to parse – long lists of green and red values – were replaced with a clear, consistent color system (for example, a distinct color for "in use" or "pending" states versus active or terminated ones), so a technician can understand a device's state at a glance instead of reading every field.

Throughout the interface we added tooltips that explain what each element does and why it's there, turning the panel itself into a guide for both experienced technicians and new hires. To keep everything consistent, our designer built a reusable design system, so every table, status, and component looks and behaves the same way across the tool.

To keep the panel fast and lightweight for field use, we focused on minimizing what the interface has to load and process. Large data sets are loaded progressively rather than all at once, and information and historical data are fetched incrementally to reduce the technician's waiting time on slow 4G connections. Where a device check takes a few seconds to respond, we surfaced clear loading indicators, and we kept layouts compact so technicians can see as much as possible without scrolling or losing sight of the rest of the screen.

Importantly, this was a frontend redesign. The panel's backend logic already worked, so rather than rebuilding it, we connected our new interface to Climkit's existing backend. We prepared and tested the full frontend on a development environment and handed it over as a production-ready build for Climkit to deploy on their own infrastructure.

One of the standout solutions came from a real usability problem the team identified during the project. The panel has a "Config Mode" that must be enabled before certain forms will work, but nothing told the user this. A technician could fill in an entire form, submit it, and have it silently fail, with no explanation of why. Worse, enabling Config Mode at that point reloaded the page and wiped their input. We proposed and designed a clear warning that prompts the user to enable Config Mode before they start, a small change that removed a genuinely confusing dead end. Climkit specifically welcomed this solution, as it solved a problem their tool had never addressed.

In addition to addressing the core challenges, we redesigned and improved the panel's key areas:

• Configuration. A reworked configuration screen with a sticky header keeping the most-used actions – Update Configuration, Reboot, and Reset – always within reach, while surfacing the frequently used Update action and de-emphasizing the rarely used Reboot and Reset.

• Meters. Electricity, heating, and hot-water meters combined into a clean, collapsible structure that defaults to a compact overview and lets technicians expand only what they need.

• Charge points, card readers & sensors. Standardized tables with color-coded statuses and clearer layouts, plus consistent naming across the system (for example, unifying inconsistent terms like "readers" and "tags") to remove ambiguity.

• Tools & forms. Cleaner Modbus and M-Bus forms with input validation, sensible limits, and clearer result pages, making the panel's most technical actions safer and easier to use.

• Feedback everywhere. Toast messages confirm when an action succeeds or fails, and tooltips explain statuses and controls in context, so the user always knows what just happened and what to do next.