Contact Centre Dialer

Project Type 0-to-1 Ecosystem

Client Claritel.ai

Deliverables Product Strategy, UX/UI, Brand Identity

Introduction

Claritel is redefining the B2B telephony landscape. We partnered with their founding team to architect a complete product ecosystem from scratch—transforming a complex technical premise into a market-ready platform.

Design Intelligence

Five dimensions where rigour, mathematics, and systems thinking shaped every decision.

Interface design, when practiced rigorously, is not intuitive art — it is applied cognitive science.

This section documents the thinking beneath the surface of the Claritel portal: the conceptual propositions that shaped every interaction, hierarchy, and system behaviour.

Scalable architecture — designed for entropy

Enterprise portals accumulate features. Without a scalable design grammar, every new capability introduces visual friction. We architected the portal as a composable system: each component carries extension vectors — defined axes along which it can grow. The result is a portal that has absorbed multiple feature additions across product cycles without requiring layout surgery. Customisation is surfaced through contextual parameterisation, not configuration sprawl.

API-first architecture Extension vectors Component composability

Accessibility as a mathematical commitment

WCAG 2.1 AA compliance was not a checklist exercise — it was a set of perceptual constraints that informed every colour decision, every focus state, every interaction affordance. Contrast ratios follow the luminance formula CR = (L₁ + 0.05) / (L₂ + 0.05), with a hard floor of 4.5:1 for body text across all states. Touch targets, keyboard traversal order, and ARIA semantics were first-order requirements — not post-hoc additions — ensuring the platform performs correctly across ability spectrums and device classes.

WCAG 2.1 AA Contrast mathematics Keyboard & ARIA

Personalisation at the data layer

An API-first architecture enabled personalisation that is structural rather than cosmetic. Each user's role, workflow state, and interaction history influences what the interface surfaces — not through preference panels, but through layout logic baked into the component model. Supervisors see what supervisors need. Agents see what agents need. Navigation choice sets were held to 7 ± 2 items per Hick–Hyman's Law (RT = a + b · log₂(n + 1)), keeping reaction time under 1.2s at every decision point.

Hick–Hyman Law Role-adaptive layout Context-first design

Analytics designed as narrative, not inventory

The analytics layer — covering AHT, FRT, sentiment trends, agent performance, and predictive CX scoring — was designed around cognitive hierarchy. Every dashboard answers a primary question first, allows exploration second, and surfaces exceptions third. Visualisation choices were governed by Tufte's data-ink principle: data-ink ratio ≥ 0.75 across all chart components. Intelligent automation surfaces anomalies before users need to search for them.

Tufte data-ink ratio Cognitive hierarchy Intelligent automation

Validation as foundation, not finish line

The portal was tested with real enterprise clients across banking, insurance, and logistics verticals — not to confirm assumptions, but to falsify them. Each session was structured to surface failure modes in the design. The product that exists today is architecturally different from the first version in meaningful ways, because client testing revealed non-obvious cognitive patterns that early prototypes had not anticipated. Testing reduced time-to-insight on the analytics dashboard by 34% over prior tooling.

Enterprise user testing Falsifiable design Iterative validation

7 ± 2 Nav items (Hick's Law)

≥ 4.5:1 Contrast ratio (WCAG AA)

≥ 0.75 Data-ink ratio (Tufte)

−34% Time-to-insight, validated

Lateral Inspiration

Engineering a flow state inspired by Formula 1 and gaming paradigms.

How do we ensure the product works with the agent rather than fighting them? To find the answer, we looked completely outside the traditional B2B SaaS bubble.

We drew inspiration from the seamless communication of Formula 1 pit stops—where split-second synchronization is paramount. Additionally, we studied gaming interfaces, adopting their controller-based global navigation shortcuts to drastically reduce interaction cost and physical fatigue for power users.

Interactive Prototype