SONEB Flow: customer app for a water utility

The problem

Late or estimated bills for months, payment limited to a web portal and disputes handled at the counter: a customer can suddenly face a 180,000 F bill.

The solution

Customers read their own meter with a photo framing guide and automatic index detection, understand their bill and pay it in seconds.

Key features

• Photo meter reading with automatic index detection

• Detailed bill and guided dispute flow

• KKiaPay payment and receipt

• Back-office: field rounds, readings and gaps, complaints and leaks, subscribers, billing

Design process

Four phases: discovery (interviews, audit of the current service), definition (user flows, information architecture), design (UI, design system, prototype) and delivery (landing page, specs).

Design choices

River blue #005BAA as the main colour, abyss blue #0B1F3A for text, spring blue #4EC9F5 as the accent and clay #E07B00 for leak alerts. Highly legible type, contrast of at least 4.5:1 and a photo framing guide that reassures users while reading the meter.

Landing page

A landing page presents the offer, shows the app and the back-office, and drives downloads.

Deliverables

• iOS and Android mobile app

• Web back-office

• Landing page

• Design system, Behance presentation and LinkedIn carousel

My role

User research and personas, user flows, information architecture, high-fidelity UI design, design system and interactive prototype in Figma. Screens are produced with a custom TypeScript Figma plugin driven by a UI kit, with accessibility checks: 4.5:1 contrast, 44 px touch targets, errors never conveyed by colour alone.

Unofficial portfolio concept, not commissioned by the organisations mentioned.