Bringing Ouloug’s AI contact center platform to life

A comprehensive, data-driven product design and landing page development project for Ouloug, a cloud-based communication platform unifying voice, video, and digital channels into a single intelligent dashboard.

Overview

Traditional call centers often suffer from fragmented tools, forcing managers to juggle multiple disjointed systems to monitor calls, agent performance, tickets, and billing. Developed for Contact ME FZE, Ouloug (derived from the Nubian word meaning “Ear👂,” symbolizing attentive service) was created to revolutionize customer communication. The project encompassed designing the complete SaaS dashboard ecosystem (Desktop & Mobile) alongside designing and developing a high-converting marketing landing page utilizing WordPress.

Role

UX/UI Designer — owned end-to-end UX strategy, information architecture, design system creation, desktop/mobile dashboard interfaces, and the marketing landing page structure.

Team

3 Developers, 1 UI/UX Designer, 1 Graphic Designer, 1 Project Manager.

Timeline

12 months – November 2024 to November2025.

Context

Operating on legacy systems created major friction points across the entire operational lifecycle:

Loss of Visibility & Fragmented Experience: No unified dashboard combining all operational data, accompanied by inconsistent navigation across modules.
Slow Decision-Making: Critical performance metrics and historical reports were hidden behind complex navigation paths.
Complex Agent Management: Absence of centralized monitoring for agent statuses, active calls, and performance metrics.

Design Challenge: How might we design a unified dashboard that empowers managers to oversee all call center operations from a single, intuitive interface?

Research & Discovery Strategy

User Personas

Admin: Requires a comprehensive view of all operations managing agents, departments, analytics, billing, subscriptions, and system settings.

Agent: Requires a streamlined, task-focused interface to handle calls, tickets, and view personal performance.

Core KPIs Targeted: First Call Resolution Rate, Customer Satisfaction Score, and Average Handling Time.

Competitive Benchmarking: Analyzed leading SaaS platforms (such as Orivo, Saasyfy) to establish best practices for complex data visualization and control panels.

Design Challenge: How might we design a unified dashboard that empowers managers to oversee all call center operations from a single, intuitive interface?

Design Strategy & Architecture

Centralized Control: The main dashboard serves as the single source of truth, minimizing clicks required to reach core metrics.
Consistent Navigation: A persistent fixed left sidebar paired with a global search bar on every view guarantees instinctive navigation.
Real-Time Data Visibility: Key performance indicators and interactive charts are surfaced immediately on primary views.
Role-Based Access Control: Clear structural separation between Admin views (full metrics/billing) and Agent views, with intuitive upgrade pathways.
Bilingual Native Support: Engineered native Arabic and English layouts with strict RTL/LTR structural mirroring.

System Structure & Information Architecture

Landing Page (WordPress): 25 desktop screens showcasing features, integrations, and multi-step sign-up flows.

Core Dashboard Modules:

Dashboard (Admin): Live KPIs, missed/incoming calls, agent statuses, and interactive charts.
Agents Management: Alphabetical listings, status filters, SIP data, and individual performance logs.
Departments & IVR: Multi-level interactive voice response routing linked to subscription tiers.
Reports, Call Logs & Ticketing: Filterable analytics with export/print capabilities and unified support tickets.
Billing & Subscriptions: Seamless management of invoices, tier upgrades, and add-on services.

Design System & Visual Evolution

Collaborative Development: Worked closely with the 3 developers to translate Figma UI components and design systems into a high-performance WordPress environment for the marketing site.
Responsive Implementation: Built pixel-perfect responsive layouts across 16 desktop screens and 12 mobile viewports (390px width), with optimized media loading and clean custom post types in WordPress.
Full-Stack Execution: Carried the WordPress landing page from Figma handoff through to a fully responsive, production-ready build.

Outcome & Impact

Unified Ecosystem: Consolidated over 15 distinct call center modules into a single, cohesive dashboard experience.
Accelerated Operations: Drastically reduced navigation time through a persistent sidebar and global search functionality.
High-Converting Web Presence: Successfully launched a responsive, lightning-fast WordPress landing page that clearly communicates AI-powered telephony solutions, boosting prospective user engagement and tier selections.