One App.
Two Use Cases
HeizOel24 helps homeowners compare prices and order heating oil. meX, an optional tank sensor, adds live fill level, consumption and estimated range to the app. Without meX, users mainly compare prices and order. With it, they can also monitor their tank and know when to reorder. The existing app had become technically outdated and could no longer receive updates. The required rebuild became an opportunity to rethink an experience that still behaved more like a website than an app.
iOS and Android
Live since Sep. 2025
Role
· Solo UI/UX Designer
Team
· Product Manager
· 2 Developer
· 2 Leadership
Scope
Hybrid app, web core · End-to-end redesign · IoT device onboarding
· Real time status design
Duration
~3 months · design to first release
BEFORE
AFTER
App Dashboard
A dedicated dashboard created one clear starting point. The pricing module brought the existing calculator logic into the app, allowing users to adjust quantities without leaving the dashboard.
Tab Bar
The tab bar gave the app’s core tasks persistent entry points, while secondary pages remained accessible through the top navigation.
Part I : Pairing the Sensor
Customer Support identified the sensor setup as a recurring source of confusion. In the existing flow, users had to read the device LED, remember its colour and select the matching option in the app. My first iteration still followed this logic closely. When I reviewed it with the developer, I challenged the assumption that verification had to run continuously. We found that the app could instead check the connection on demand and return a clear success or failure state itself. This removed the manual interpretation step entirely.
AFTER
BEFORE
Explained Before It Starts
Both LED states are explained before validation begins, so users know what to expect before starting the connection.
The App Does the Counting
Instead of relying on users to interpret the device state, the app checks the connection itself and shows progress while validation is running.
Dedicated Result States
The connection check ends in a dedicated success or failure state, removing manual interpretation and confirmation.
BEFORE
AFTER
Part II : Configuring the Tank
Previously, several tank measurements were collected on one screen. Once the numeric keyboard opened, parts of the form were pushed out of view, forcing users to scroll within the screen while measuring the physical tank. I split the setup into focused steps with one measurement per screen, keeping the relevant tank dimension, input and guidance together.
A Tank You Recognise
Before entering anything, users see the complete tank and all required dimensions, establishing the task before it is broken into individual steps.
One Input per Screen
Each screen asks for one measurement only, keeping the highlighted area, input and guidance together. This reduces visual complexity and keeps attention on the current task.
ADAPTIVE EXPERIENCE
Once meX Is Installed
Installing meX changes the dashboard priority, not the app structure. Live tank data becomes the primary focus, while pricing and ordering remain accessible through the same navigation.
Status at a Glance
The meX module became the dashboard's primary status element, showing fill level and range at a glance while keeping price comparison accessible. The current tank level also remains visible in the navigation.
One-Tap Overview
The former dashboard tab became a direct shortcut to the offer list, keeping the existing ordering flow one tap away.
Device Management
Settings and additional sensors remain accessible through a dedicated meX entry, without adding complexity to the primary navigation.
01 Initial Release
The initial release worked well on larger screens. The meX module and pricing content both fit comfortably within the viewport, so the space constraints were not immediately apparent.
Shipped September 2025. Color limited to the tank graphic.
02 Small-Screen Issues
The same layout became problematic on smaller screens. The meX illustration pushed pricing and its CTA below the fold, while three-digit CHF prices left too little horizontal space for the full pricing layout.
The price CTA fell below the viewport on small screens
Layout took too much space
Layout breaks with larger prices and CHF.
03 Refined
Both issues came from the same space constraints, so I treated them as one iteration. meX became a compact, lightly tinted card, while the pricing module kept its footprint but used a tighter internal layout. Pricing and its CTA now fit within the initial viewport, including with longer CHF prices.
meX as a compact, tinted card, with the price module tightened.
Moduel in block and tighter layout
Price, trend and action in one block instead of three separate lines.
View Next Case Study →