PRODUCT DESIGN

DialAfrika: UI Foundation

Context

DialAfrika offers B2B SaaS tools that power priceless customer experience for leading companies in finance, government, healthcare and FMCG. I led a radical redesign of the DialAfrika platforms to refresh the UI and introduce new features in a cohesive way.

The foundation for this was a robust styleguide and UI navigation structure, designed to be flexible and scalable.

Client

DialAfrika

Industry

Customer Experience

Year

2024 - Present

Role

Product Design

Starting point

Due to time and budget constraints, I based the refreshed UI on Mantine, a React component library, rather than pursuing a full redesign from scratch.

With core elements like buttons, inputs, and navigation coming from Mantine, this approach freed up valuable resources to focus on designing and building custom components tailored to DialAfrika’s specific needs.

Styleguide Principles

DialAfrika needed a modular, scalable UI. The styles and components we built needed to meet the following constraints:

  1. Usable on web and mobile.

  2. User-selected brand colors on CTAs and accents.

  3. Replicated in code to ensure the final product matches the design.

Style Primitives

We started off by assigning basic Mantine color, typography and spacing specs to Figma variables. This formed our single source of truth for all UI styles.

Style tokens

These color variables were then assigned to tokens to be used for different sections of the UI.

UI Navigation Structure

There are 11 products in the DialAfrika ecosystem, each serving a specialized function. While their purposes vary, it was essential that they all share an intuitive and familiar look and feel.

Most importantly, the core navigation design had to remain consistent across all apps, regardless of their specific function.

Apps Bar

This bar displays the apps included in an organization's subscription plan. Since most CX functions involve switching between tools, it remains constantly visible and easily accessible to users.

Primary Sidebar

This navigation element is platform-specific, serving as the main menu for accessing features and actions within the selected platform.

Primary Header

The primary header enables users to navigate between screens, access key UI actions, adjust layouts, view notifications, and switch between light and dark mode.

Secondary Sidebar

The secondary sidebar is also always visible, providing quick access to functionality shared across all platforms and frequently used by agents—such as the dialer for customer calls and Nia, the DialAfrika AI assistant.

Footer

The footer provides users with context-specific actions based on the main UI container. There are also three additional slots for UI actions and the following permanent actions:

  • Clock Out: Remain logged in while appearing offline — a quick action for agents taking a break or handling an issue.

  • Log Out: Completely exit the system and end the current session.

Next steps

With a consistent, clear and scalable styleguide and UI navigation framework completed, we were set to begin redesigning the 11 products.

Details on that coming soon.

© 2025 Andrew Wandiga.

© 2025 Andrew Wandiga.

© 2025 Andrew Wandiga.