Illumia Agents Area

CORE PROBLEM

A system everyone used, nobody designed

Illumia's agent portal was the operational backbone for the entire sales and post-sale organisation, every contract, every client lookup, every invoice action passed through it. But it had grown without design direction. Navigation that sent users to the wrong place, forms that wiped data without warning, no confirmation dialogs before destructive actions, a complex permission model across channels and roles, and 15+ new capabilities to design alongside the redesign itself. This wasn't a greenfield project. It was a redesign of a live system hundreds of agents depended on daily.

DISCOVERY

AS-IS analysis

Before touching a screen, I audited every existing flow such as login, contract creation, customer search, order management, invoicing, document handling, tagging every observation as pain point, note, or dev constraint. What looked like isolated bugs turned out to be three systemic failures repeating across the entire platform: Absent confirmation dialogs before destructive actions, missing form state feedback (CTAs always enabled, errors with no resolution guidance), and broken step-based navigation (back button sent users home, completed steps weren't navigable). I used AI to cluster hundreds of audit observations by interaction type, turning a long list of notes into a clear diagnosis that directly shaped what came next.

Client requirements

The client had gathered requirements through internal interviews with agents and managers. The critical structural insight. The platform serves two fundamentally different channel types. Channels with consultants get full access so to order entry flow, complete client search, role-differentiated data views. Channels without consultants (teleselling) get a reduced surface with limited actions. This wasn't a permissions problem, it required a different information architecture for each context.

I used AI to run a gap analysis between the existing feature inventory and the new requirements, identifying which flows needed extension, which needed a full redesign, and which had unresolved back-end dependencies. This prevented design work starting on features that weren't ready.

UX DECISIONS

From structure to screen

The information architecture was rebuilt around one principle: the interface should communicate what kind of tool this is, not just organise its contents. The new lateral navigation introduced two explicit zones: a Sales Hub (order entry, offer search, drafts, pending signatures) and a Client center (client search, practices, invoices, churned clients, documents) — mirroring the two mental modes agents operate in. Channels without consultants see no Sales Hub at all, not a disabled version of it.

The client detail page became a tabbed operational hub with a persistent header showing client scoring, segment, contract count, and payment status. The contract creation wizard was unified into a single 6-step flow for gas, electricity, and fibre, with persistent summary panel, real-time validation, and save-and-exit at every step.

Before drawing a wireframe, I used AI to simulate journeys across 8 agent profiles through the proposed architecture, surfacing two structural gaps that were resolved before any screen was designed.

IMPLEMENTATION

Concept design

Annotated wireframes covered every primary flow with explicit documentation of business rules, edge cases, and component behaviour on canvas. The offer creation wizard required handling a combinatorial matrix of utility types × segment × prestazione × subscription mode × channel permissions. I used AI to generate the full edge case matrix, replacing days of manual logic mapping. Across 60+ screens, an AI-assisted microcopy pass flagged tone inconsistencies, label mismatches, and missing empty states. The output became part of the handoff package.

Visual design

The UI was built in direct continuity with the Illumia Customer Area the B2C portal I had designed previously (check it out among my projects), so agents switching between surfaces share a visual language. The design system was extended with B2B-specific components: dense sortable tables with contextual more-menus, wizard layouts with persistent summary panels, offer status badges, and a role-aware navigation shell.

Full responsive coverage was designed from 375px mobile through tablet to maximum desktop — with explicit decisions at every breakpoint about which columns to hide, how the navigation collapses, and how dispositive action flows remain usable when agents assist clients in person.

RETROSPECTIVE

Most of the AS-IS problems weren't interface failures in isolation, they were places where complex business rules had never been designed to be communicated clearly. The AI-assisted moments in this project weren't shortcuts. They were a way to handle the analytical complexity of a solo 8-month engagement at a scale that would normally require a team.