This project didn’t have a defined project length, instead, we provided ongoing support for UX-Product Design. My collaboration was defined by an active role in the product development process and constant alignment with the development team. I involved the project to determine and validate the design concept along with benchmarks and user interviews as well as to conduct and evaluate user tests.
Benchmark
We started the process by doing a preliminary analysis of the product to understand how successfully the interface in the application works and how it works.
Usability Test
We analyzed the pros and cons of the current product by performing a user test.
User Interviews
In order to better understand the needs of users, we held user interviews.
Wireframe Flow
The whole flow of the application was created with high quality wireframes.
Product Journey Map
To understand the whole process of the stakeholders and the product's life cycle, we've created a product journey map.
High-Quality Prototype
After designing the new concept and flow, we prepared detailed prototypes so that users would not have difficulty while using it during a usability test.
METR is used by technicians network admins, invoice manager, and managers. The project 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 detail actions and needs of each user group and transform them into more detailed user stories in collaboration with the software team.
As the product 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 start creating the Wireframes, based on the user stories co-defined with the internal project team.
Installation & Configuration:
The part where the technicians can install the device and configure it.
Mainpage:
The page that the technicians and the admins see the M-gates and check synchronized devices.
Readouts:
The invoice managers can see the list of all M-gates and download the datasheets.
Help center:
The page with the FAQ and platform manual.
After we managed to fit all the necessary information on the very small screens the time has come to test our solution through usability testing. We’ve determined the topics that we would like to test and started conducting with the potential & already existing users.
With a simple onboarding, we reduced the adaptation processes to a minimum by providing users with information about how to use the product in a short time and with little effort.
The basic features of the product at first glance were easily understood and correctly used by the participants.
Installation:
Installing the m-gate has a very easy workflow for users, for both desktop and mobile version.
Synchronization:
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 the users. In this way, we were able to highlight the information that users were looking for most, especially during the synchronization.
The user tests have shown 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 have played an important role in the product strategy process and identified future steps:
1- Customized area for the technicians
2- Specific technical wording for the users
3- More visuals to make it more intuitive for the user.
Due to the density of the information contained in this product, a simple interface design concept was decided on. A 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 373 buildings to date and has conducted more than 16 million measurements.
