METR | CMS | IoT | Research| UI



Digitize your residential real estate.

‍metr is a digital building management platform based on IoT. They source data from meters, sensors, technical equipment, and third parties through their m-gate, a gateway which collects and sends data to a cloud. The metr platform allows the user to monitor, analyze, and improve technical equipment using data.

Our Contributions


UI Design


Interaction Design

Our Role

This project didn’t have a defined project length. Instead, we provided ongoing support for UX and UI Design. We entered the project after the personas and user stories had already been defined by the internal project team. Our collaboration was defined by an active role in the product development process and constant alignment with the development team. We were involved in the project to determine and validate the design concept along with benchmarks and user interviews as well as to conduct and evaluate user tests.

Personas & User Stories

metr’s building management platform is used by technicians, office clerks, and managers. The product team created personas for those users out of more than 15 interviews.

The interviews revealed that each user group has different needs. Therefore, the team created specific scenarios for each user group one by one and turned them into a workflow. We used the workflow to define actions and needs of each user group and transform them into more detailed user stories in collaboration with the software team.

Concept Overview

As the m-gate is located mainly in basements one goal was to enable technicians to easily perform the product setup and data checks with their mobile phones.

Therefore, we concentrated on mobile-first. Our challenge at this time was to fit dozens of pieces of information onto quite small screens and make it intuitive for the user to find all relevant information.

We started by creating the Wireframes, based on the user stories co-defined with the internal project team.

Unlike other applications, metr avoids long workflows and deep click paths. However, with the internal project team we decided to create a short onboarding and a user manual for the users, so they can instantly understand the product with all options.

Installation & Configuration
The part where the technicians can install the device and configure it.

The page where technicians and admins see the M-gates and check synchronized devices.

The invoice managers can see the list of all M-gates and download the datasheets.


After we managed to fit all necessary information on the very small screens we tested our solution through usability testing. We determined the topics that we would like to test and started conducting them with potential & already existing users.

With a simple onboarding, we reduced the adaptation processes to a minimum by providing users with information about the effective product usage.

The basic features of the product were easily understood at first glance and correctly used by the participants.


Installing the m-gate has a very easy workflow for users, for both desktop and mobile version.


Since there are 6 different kind of information on the screen with a lot of different data, the testings gave us insights into the prioritization of information according to the users needs. In this way, we were able to highlight the information that users were looking for most, especially during the synchronization.


The user tests showed us that the platform is generally well understood and that users can work with it without any difficulties. However, we also received many valuable ideas and feedback from users on the platform.

These new features played an important role in the product development process and helped identify future steps:

1- Customized area for the technicians.

2- Specific technical wording for the users.

3- Add more visuals to make it more intuitive for the user.

UI Concept

Due to the density of the information contained in this product, a simple interface design concept was decided on. Minimalistic design helps the user to easily find and see the right information at the right time. While the color palette of the company was used in the header display of the corporate identity, a balanced white area study was made for the rest of the page.


metr develops rapidly with confident steps in line with the needs of its users and stakeholders. It has been installed in 1.400 buildings to date and has conducted more than 12.5 million measurements.

Explore more design projects

All Case Studies