Vaani

The intelligence stayed complex but the experience didn't have to be.

UI/UX

VAANI — image coming soon

Category

Success Story

Published

2026

Read time

6 min read

Vaani is a voice AI calling engine built for companies that use AI to manage customer conversations. It helps teams create and manage AI agents, make calls, monitor conversations, and understand performance from a single platform.

The Challenge

As voice AI becomes part of everyday customer interactions, the product has to do more than make complex technology work. It needs to make that technology easy to understand and easy to control. The challenge was to translate the complexity behind Vaani into an interface that feels clear, familiar, and approachable, without losing the sense of intelligence that makes the product different. The platform brings together a number of complex workflows such as creating AI agents, defining their behaviour, connecting telephony, managing conversations, reviewing calls, understanding performance and much more. Rather than treating each feature as a separate experience, we built a shared visual system that could connect the entire product. The design uses clear hierarchy, consistent spacing, familiar controls, and a restrained colour palette to make information easier to scan and intuitive actions, resulting in an interface that feels consistent to the user.

Typography

Inter was chosen for its neutrality and clarity. Vaani sits between technology and human conversation. Its interface needed to feel modern and intelligent, but not intimidating. Inter provides a familiar foundation for that balance. Its simple forms and strong readability allow the interface to carry a lot of information without feeling visually heavy. Typography was then used to create hierarchy across the product, helping users quickly distinguish between what they need to read, understand, and act on.

Colour

The visual language is built around a focused palette, with Vaani Pulse as the primary colour. The purple brings a sense of intelligence and technology to the product while remaining softer and more approachable than the blues commonly associated with SaaS products. Pink and blue act as supporting accents, while black and white keep the interface grounded. Colour is not used simply as decoration — it helps users understand the state of the interface, like active controls, selected elements, different statuses and actions.

Vaani Pulse

#8874DB

Pink

#F578FB

Blue

#00A2FE

White

#FFFFFF

Black

#111111

Designing Around Cognitive Load

A voice AI platform can contain a lot of information at once. Users might be looking at call volumes, costs, durations, agents, transcripts, or performance metrics. One of the biggest issues we found was cognitive load — users were being presented with too many choices at once, making even simple tasks feel more difficult than they needed to be. We used a few basic principles to address this. These principles shaped everything from the dashboard to the onboarding flow, because when everything looks important, nothing feels important. Rather than asking users to understand the entire product before using it, we focused on helping them complete one task at a time. The interface therefore follows a simple principle: "Show users what matters first." Information was then grouped into clear sections, with the most important numbers and actions given stronger visual weight. Supporting information is kept quieter so it does not compete for attention.

  • Group related information.
  • Show the most important thing first.
  • Reveal complexity when it is needed.
  • Make the next action obvious.

Components

A consistent set of components brings the same visual language across the platform. Buttons, badges, capsules, inputs, tabs, filters, and status indicators follow shared rules for typography, spacing, colour, and shape. The system was designed to stay uniform and combined rather than reinvented for every screen. This makes the interface intuitive for the user and gives Vaani a foundation that can grow and scale along with the product.

Familiar Interactions for Complex Technology

Although Vaani is powered by complex AI systems, the interface does not need to feel complex. We used familiar interaction patterns throughout the product, so users could understand how to navigate without having to learn a new system. Tabs clearly indicate that the content below will change, filters make it easy to narrow down information, and buttons create clear points of action. This reduces the uncertainty factor and the amount of learning time for users before they can start using the product. The reasoning behind this decision was that technology can be advanced, while the experience remains familiar.

Getting Users to Their First Agent

The onboarding experience became one of the most important parts of the redesign. Vaani's promise was to create a voice AI agent in under 90 seconds. The experience therefore needed to get users to that first successful moment as quickly as possible. We first gave users a clear choice: complete the onboarding or go directly to the dashboard. For users who chose onboarding, we removed unnecessary decisions and brought the most useful starting points forward. Instead of asking users to browse through a large library of agents, we suggested four agents based on their profession or use case — the rest remained available through All Agents. This reduced the number of choices users had to make while still keeping the full range of possibilities available.

Dashboard

Once users entered the dashboard, we wanted them to understand the state of their account immediately. The most important metrics were brought forward and given stronger visual weight — total calls, completed calls, unsuccessful calls, duration, and cost became the first layer of information users encountered. A subtle gradient using Vaani Pulse adds depth to these metric cards while reinforcing the primary colour across the interface. The dashboard now works as an overview first, and a starting point for deeper analysis second. We also changed how onboarding behaves after the user enters the product: instead of occupying a large amount of space, the onboarding checklist becomes a collapsible section. The chevron allows users to get it out of the way when they are ready to explore, while the remaining steps stay visible as a subtle nudge to finish the setup. This follows the idea of progressive disclosure — show users what they need at the right moment, without forcing them to deal with everything at once.

Extending the Visual System Across Vaani

The redesign continued beyond the dashboard and onboarding. We carried the new visual language across the wider product, including the areas below. Each area was cleaned up and brought into the same system. The objective was not to make every screen look identical — it was to make every screen feel like it belongs to the same product. The redesign was ultimately about more than making Vaani look better. The technology was already there; our role was to create an interface that allowed users to understand it. By reducing cognitive load, establishing a clear visual hierarchy, simplifying onboarding, and creating a consistent design system, we turned a feature-rich platform into an experience that feels easier to navigate and more confident to use.

  • Agents
  • Knowledge Base
  • Tools & Actions
  • Voice Lab
  • Telephony
  • Integrations
  • Conversations
  • Operations
  • Developers
  • Billing