Product, UX

Qlair

Optimising task management for air quality technicians.
An app project where I took over in order to get the last UX details in line.

Team:

Melissa Ma

Context:

MANN+HUMMEL wanted to build an app and a dashboard for clean air management.

The results:

A dashboard for task managers and an app for technicians. Better informed technicians result in more effective technicians. Allowing them to check the status of all air filters and the type of gas concentration in a given section of a building allowed them to better organise their tasks and keep track of them

Optimised and easier air filter management didn't only improve the speed of technicians but extended the average life span of the air filters.

a web browser with the charles website inside, elements of UI and 3D renders surround it

A few things to solve

The app was just the first step in a plan, big hardware was going to be implemented based on the information, expectation and interest the app would gather.

Sync with dashboard design on web
Allowing enough flexibility for planned iterations
User testing technicians on field
Prototype to reassess user needs and ways of working
Buy in from restaurants and markets

The usual 1-2-3

We defined a product vision, we want to release a self-sustaining urban farming container.

Understanding the system

I joined this project right after the first iteration was done. The main challenge was to understand the requirements of the client and the intended users. I helped in this stage by challenging some ideas that were being implemented, it helped us improve the structure of the information architecture.

Product research

The task manager was the new feature to be added. The research went from any other task list app, up to calendars and web apps for big teams. I gathered great references for UX and visual ideas.

Design

A new design system needed to be delivered with the new task manager feature. My main task was to assemble all of the interface elements, maintain a consistent and usable library and redesign them as needed. After that we were able to work on the wireframe ideas we already had. And this system helped us to prototype faster, and iterate without setbacks.

Prototyping

Thanks to the asset library it was easy to replace designs and test out different ideas. Sketch with Craft was used to build the prototypes that were tested. We were looking for any gaps in the flow, and ended up finding issues with labelling and user disorientation. This helped us greatly in improving the labeling of the sections.

User testing & constant updates

The V2 of Qlair is running smoothly. The next steps were aimed at some brand personality and health related benefits that could be tracked with the app.

The urban farming app

A map filled with locally sourced restaurants, stores, urban farms, farms, markets and events.

a web browser with the charles website inside, elements of UI and 3D renders surround it
a display of the logo in different contexts and shapes

Doing the AI icon before it was cool

By tapping on the "magic" button the app will suggest you the most popular or best rated locations around you without the need of LLMs!
No need to contain your excitement.

Of course this needed some foundations

The map and lists were sorted in 6 different categories. All of them with some specific characteristics that anybody could fill up. Each category is clearly defined by a custom icon, color and pattern that appears on the business profiles.

a web browser with the charles website inside, elements of UI and 3D renders surround it

Some more features

The event feature escaped our initial research and came in (quite late) as a client request. We managed to make it fit, with a slight semantic issue on how we would label it on the map and the list.

Iconography
My favorite is the urban farm icon with the little sprout on top of the buildingthe type of business it is.
Custom illustrations
Sign up screen changes depending on the city
the user is located. Currently the only city
available is Berlin.
Store profile
Each business and event has their own profile
with their own color and iconography based on
the type of business it is.
Events list
a picture of four post it notes each one displaying a sketch for a logo
Events have their own section, plus hierarchy differences between events based on timeframe

This app is already a bit old

You can give it a try on your Android phone, but I don't think it has received any update in a long while. It was also on iOS but it doesn't seem to be available anymore.

a web browser with the charles website inside, elements of UI and 3D renders surround it

Check out some of my other projects: