Meeting controller

12/04/2026

Google Meet
Meeting starts in 25 mins
Built in React with Motion

Context

I designed and coded this meeting controller for Mili AI.

Mili provides end-to-end AI agents for U.S.-based wealth advisors. One of its core features is bot-less meeting notes: real-time note processing without saving recordings.

Mili lives in the real workday—calendar math, follow-ups, notes, and the awkward gap between “we should meet” and “the meeting actually happened.” Our users are 40–55 years old and not very tech-savvy, so clarity and trust are critical.

Problem

The previous meeting controller didn’t clearly communicate the active state of a meeting across its three phases—before, during, and after. There was also no clear confirmation when key actions were taken.

This left users uncertain and constantly asking themselves basic questions about what was happening and what to do next. To fix this, I started by mapping the questions a user might have in each phase.

Before the meeting

As a user, I want to know:

  • How much time is left before the next meeting starts?
  • What is the primary action I should take right now?
  • Is the meeting on Google Meet or Zoom, and how do I join?
  • How do I start a conference call instead?
  • How can I upload an audio file instead of starting a live meeting?

During the meeting

As a user, I want to know:

  • How do I see that Mili is actively taking notes?
  • How much time has passed since the meeting started?
  • Who is controlling this meeting right now?
  • How can I stop, resume, or end the meeting?
  • How can I clearly see whether the meeting is paused or running?

After the meeting

As a user, I want to know:

  • Is Mili still finishing the notes, are they ready for review, or are the final notes done?
  • What can I do next with these notes—for example, regenerate them, finalize them, or download them?

These questions shaped the new meeting controller: every state makes the system status obvious, surfaces one primary action, and confirms important changes so advisors can trust what’s happening without thinking about the tool.

The Goal

My goal was to make the meeting controller feel alive—a surface that always reflects what’s happening, in every state, without the user having to guess.

I anchored the redesign around three principles:

  1. Certainty — every meaningful action gets a clear acknowledgment or affirmation. Not noise, just signal.
  2. Continuity— a single, understandable thread from intent → scheduled → live → ended → notes. Nothing “teleports” without explanation.
  3. Aliveness— motion and state changes that show “the system is paying attention,” similar to how Dynamic Island turns background status into something you can read at a glance without opening a new surface.

Design

After aligning on these principles, I studied real usage behaviour using PostHog session recordings and metrics.

This helped me see where advisors hesitated, hovered, or retried actions, and where the old controller failed to reassure them.

From there, I moved into Figma to redesign the meeting controller: clarifying hierarchy, tightening copy, and mapping each of the three phases (before, during, after) into a clear, continuous state model that the UI could express.