📊
Hero photo: laptop on a desk showing the VRM dark portal with energy data charts

VRM: Managing the advanced data of our installation

Client: Victron Energy Duration: 4 months My role: UX / UI Designer

VRM (Victron Remote Management) is a portal used by engineers and installers to monitor and manage solar energy installations remotely. The Advanced page displays detailed data visualisations including live readings, historical graphs, and system health metrics.

The existing Advanced page had grown organically over time and was difficult to use, particularly for new users unfamiliar with energy data terminology.

A focus group study was conducted with a mix of experienced engineers and newer users. Key research methods included:

🗒️
Research output – card sort / affinity map
Visual showing how users grouped VRM data categories during the card sorting exercise

Research output showing how engineers mentally organise energy data

Information overload

The page displayed all data simultaneously without priority ordering. Users struggled to find the metrics most relevant to their current task.

Inconsistent data visualisation

Graphs used different scales, colour conventions, and interaction patterns depending on which widget had been added. Cross-comparison was difficult.

😵
Original VRM Advanced page – before redesign
Dark portal UI with multiple graph widgets in a cluttered, inconsistent layout

The original Advanced page — overwhelming and inconsistent for new users

No customisation

All users saw the same default view regardless of their role or the type of installation they were managing.

Reorganised information architecture

Data was grouped into logical sections: overview, power flow, historical trends, and system health. Users can collapse sections they don't need.

🗂️
Redesigned VRM – organised sections
Dark portal with clear grouped sections (Overview, Power Flow, Historical) and collapsible panels

Redesigned information architecture with logical data grouping

Consistent graph system

A unified graph component was designed with consistent colour coding, time range selectors, and hover states across all data types.

📈
Before – inconsistent graphs
Old graph widgets with different styles, scales, and colour conventions
📈
After – unified graph system
New unified graph component with consistent colours, time selectors, and hover states

Standardising graph components for consistency across all data types

A key new feature was the summary timeline — a compact chart showing power generation and consumption over a selected period. This gave users an at-a-glance understanding of system performance without opening individual widgets.

⏱️
Summary timeline – new feature
Compact energy timeline chart with day/week/month range selector in the VRM dark UI

The new summary timeline gives users a quick read on system performance

📱
Final VRM Advanced page – tablet mockup
iPad/tablet showing the completed VRM Advanced page redesign in dark mode

Final VRM Advanced page across device sizes

The redesigned Advanced page received positive feedback in follow-up testing. Task completion rates improved significantly, and users reported feeling more confident navigating the data. The customisable layout was particularly well received by power users who had previously relied on workarounds.