Distill hero
Project Overview

Distill translates active tab audio across 16 languages and streams live ASL visual cards inside a unified Chrome interface.

↓ Design Challenge ↓ Key Features ↓ Outcomes
Project Type
36-Hour Hackathon, HackAZona Microsoft Track Winner
Timeline
February 2026
Role
UI Designer
Team
Kevin Doshi, Hemakshi Pandey, Maitreyi Bhardwaj, Basavraj Chinagundi
What It Does

Real-time translation. Cross-platform. ASL accessibility. One extension.

Distill listens to your active browser tab, translates speech into 16 languages simultaneously, and renders live ASL visual cards alongside the audio. Built for people who are deaf, hard of hearing, or learning a new language in real time.

Distill features: Realtime Translation, Cross Platform, ASL Accessibility
Interface Design

Every component designed for high-speed readability during live speech.

Input language as a clear button group. Output as multi-select language tokens with color-coded fills. Speaker Diarization and Float Captions controlled via toggle switches. A single high-visibility blue CTA anchors the panel.

Distill extension UI
In Use

Built to sit on top of any page without breaking it.

The extension floats over YouTube, Zoom, Meet, and Teams without masking video controls or disrupting layout. Tested live on a Chinese lecture to validate multilingual output in context.

Distill on YouTube , translation active Distill on YouTube , ASL cards active Distill on YouTube , translated output
Technical Pipeline

From audio capture to visual output in real time.

01
Audio Tab Feed

Live audio stream captured from the active browser tab.

02
Azure AI Processing

Azure Speech Translation or Conversation Transcriber routes audio to 16-language output.

03
Azure Speech Synthesis

Translated text converted back to synthesized audio in target language.

04
Distill UI Update

Real-time token sync updates the panel. ASL cards populate instantly.

How it works , technical pipeline diagram
Tools

Design & Engineering Stack

Design
Fig
Figma
TK
Tokens
AI Services
AZ
Azure AI
FA
FastAPI
Platform
CR
Chrome Ext
JS
JavaScript
Accessibility
ASL
ASL Cards
16L
Languages
Prototype

Watch it in action.

Outcomes

$2,000 Microsoft Track Prize. Built in 36 hours.

$2,000

Microsoft Track Prize at HackAZona

36hr

full UI system and working backend built in one weekend

16

languages supported with real-time ASL visual output

Assistive products don't have to look clinical. They can be sleek, performant, and seamlessly integrated into daily workflow.

Every voice heard. Every language understood.
Takeaways

Accessibility and good design are not in conflict.

The layout constraints of a Chrome extension forced better design decisions , less clutter, tighter hierarchy, cleaner states.

A 36-hour sprint with a clear constraint produces sharper work than an open-ended brief with unlimited time.

Get in touch

Send a message.

Reach out directly. Usually responds within a day.