UX/UI · Design system

Deepgram

Components that let visitors hear and see a voice AI API on deepgram.com — live demos, interactive diagrams, pricing and forms — designed in every state and at every breakpoint.

Role: UX/UI for the marketing site, design system
Timeline: Aug 2025 – now
Tools: Figma
Live site: deepgram.com

Deepgram homepage hero: The Voice AI Economy is Powered by Deepgram, the customer trust bar and the API demo box

The brief

Deepgram sells speech-to-text, text-to-speech and voice agent APIs. The marketing site has to let a developer or a buyer hear the product in seconds, understand how the pieces fit together, and find the right plan.

I design its UX/UI: interactive demos built from scratch for the site, diagrams, pricing and forms, and the component library underneath — every state, at desktop, tablet and mobile.

Making an API visible

An API has no screen, so the site has to be the screen: these components let a visitor talk to the product, hear it and see how it works.

Homepage demo

Slidebox: one box, four APIs

"Talk to me" for Flux speech-to-text with end-of-turn confidence; voice samples for text-to-speech; a live voice-agent call; audio intelligence with summaries, sentiment, intent and topics. Every API has its default and active states at three breakpoints, with its own buttons, toggle and player.

deepgram.com

Slidebox, Speech-to-Text: Nova transcribing a two-speaker call with timestamps

Slidebox, Text-to-Speech: a voice list with industry samples

Slidebox on mobile: Flux with end-of-turn confidence

Slidebox on mobile: audio intelligence, sentiment analysis

Slidebox on mobile: audio intelligence, topic detection

Homepage

Voice Agent interactive menu

"A single, unified Voice Agent API": a step list — user, audio input, text-to-speech, LLM orchestration, speech-to-text, business logic, external systems — where each step lights up its part of an isometric architecture diagram.

deepgram.com

Voice Agent API section with one step open, its part of the isometric diagram highlighted

Blog

Listen to this article

A text-to-speech player on every blog post, "Powered by Aura 2" — the product reading Deepgram's own blog, with play, pause, skip and progress at three breakpoints.

Blog article

Components for the pages that convert

The components behind pricing, sales and sign-up, and one form system for all of them: purchase, contact, filled states and a three-step long form.

Pricing table: Pay As You Go and Growth plans with included features, and Enterprise — **Pricing 2026.** The pricing table at 1440, 834 and 375. Pricing

Contact sales: Talk to a voice AI expert, with benefits, a customer quote, the product chips and the form — **Contact sales.** The form at desktop, tablet and mobile. Contact sales

Startup Program: Apply, Get Approved, Start Building — **Startup Program.** Logged-out and logged-in versions with the apply form — a past campaign, shown from Figma.

The system underneath

I restructured the library into Foundation, Atoms, Molecules and Components, with variants and properties for every state and breakpoint. These are some of the components built on it:

Trust bar with customer logos — **Trust bar** — customer logos for the homepage and product pages.

Go global with one Speech to Text API: language pills with flags — **Languages** — 50+ languages as flag pills. Speech-to-Text

Card deck carousel with story cards and pagination — **Card deck** — a carousel with indicator and pagination.

Partner quote deck: Granola, LiveKit, Daily and Twilio quotes with names and roles — **Quote deck** — customer and partner quotes, with ratings.

Quote accordion in two columns with tags: partner quotes — **Quote accordion** — partner quotes in one or two columns, with or without tags.

Explore our partner ecosystem: partner directory with industry, type and region filters, search and partner cards — **Directory with search** — partners and customers, filtered and searchable. Partners

Outcome

These components ship across deepgram.com — the homepage, product, pricing and blog pages — and new pages are put together from them.

Visit deepgram.com

Next project

Talk2Me Nice