AI notetaker
Rethinking Voice Capture & Synthesis on Mobile
Role
Product Designer
Duration
5 days | 2026
Team
5 people (Me, PM, 3 Developers)
01. Introduction & Overview
Hero Image / Cover Mockup: A high-resolution, borderless 3D render or clean presentation frame of the mobile app displaying a completed, context-adaptive summary card on a dark backdrop.
Problem
Memory Loss: Users attend multiple meetings a day and struggle to remember key details and action items later.
Poor Workarounds: Current options are pen and paper or basic audio apps. Most AI tools only work on desktop or with call bots.
Varied Use Cases: Voice notes range from 10-minute daily sync ideas to 45-minute interviews, making static templates useless.
02. Problem Statement
Context Photo or Split Visual: A split graphic comparing Desktop environment (typing on a keyboard) vs. Mobile context (someone walking down a street with a smartphone), with a callout overlay: "Zero live-typing available on mobile."
Outcome
Shipped a mobile AI note-taker that gives users instant, glanceable summaries and action items without typing/writing during meetings.
03. Outcome & Objectives
Before vs. After Card Comparison: A visual graphic contrasting a wall-of-text raw transcript vs. the clean, scannable, structured summary card layout.
UX goals
To begin, I outlined three commitments that would determine the success of this project.
Glanceable summaries Formatting outputs into clear cards so users absorb key points in seconds.
Fast capture & processing Removing app delays so recording and summary generation happen instantly.
Easy memory recall Helping users find key decisions and action items long after a meeting.
04. Existing Experience
User Flow Diagram: A horizontal friction-map highlighting the 7-step legacy recording process (Unlock → Search → Launch → Record → Stop → Transcribe → Edit) with friction points highlighted in red/amber.
The core fix: Context-aware summaries
We replaced fixed meeting templates with adaptive summaries. The AI detects the context of the audio and dynamically changes the layout so users only see what matters.
Short Ideas: Shows a clean block focused entirely on preserving raw thoughts without extra clutter.
Quick Alignments: Highlights main decisions and urgent action items right at the top.
In-Depth Meetings: Breaks content into detailed cards for key takeaways, owners, and deadlines.
05. Core Solution: Handling Context Volatility
Adaptive Card Variants: Side-by-side UI mocks displaying how the summary card layout dynamically shifts based on meeting depth:
Variant A: 1-Minute Voice Note (compact list + key action point).
Variant B: 45-Minute Strategy Sync (expanded section blocks, decision highlights, and task breakdown).
Live recording & quick controls
Recording on mobile happens on the go, so controls need to be large, fast, and fail-safe.
One-tap live controls: Instant pause, resume, and stop actions mapped to large, unambiguous touch targets.
Real-time visual feedback: Clean waveform visualization so users immediately know audio is being captured without checking levels.
Accidental-stop protection: Clear confirmation states to prevent users from accidentally dropping a recording mid-session.
06. Live Recording & Quick Controls
In-Situ Recording Screen: High-detail crop of the active live-recording UI emphasizing:
Pulsing audio waveform.
Large, high-contrast touch targets for Pause/Stop.
Minimal ambient screen glare.
Low-friction entry points
Lock & Home screen widgets: One-tap capture without unlocking or opening the app.
Notification drawer controls: Pause, monitor elapsed time, and end recordings seamlessly across system views.
Background processing: Instant summary generation ready the moment you open the app.
07. Low-Friction Entry Points
System Integration Composite: A 3-part graphic showing:
Lock screen iOS/Android widget with a one-tap record button.
Notification drawer live-recording control tile.
Seamless background processing card transition.
Putting it all together
By connecting instant entry points, clear live controls, and adaptive AI layouts, audio notes are transformed from passive recordings into structured, actionable knowledge.
Instant capture: The user taps a widget on the lock screen to start recording immediately without opening the app.
Focused live state: Clear visual feedback and large controls give users confidence during live audio capture.
Adaptive summary: The app processes audio in the background and dynamically renders a summary layout tailored to the specific meeting type.
08. Putting It All Together
3-Step End-to-End Flow (or Animated GIF): A chronological 3-screen walkthrough showing:
Step 1: Widget Tap → Step 2: Live Waveform Recording → Step 3: Instantly Generated Summary Card.
Light mode & Behind the scenes
OLED Dark Mode default: Deep dark tones reduce visual distraction during live conversations while conserving power.
High-contrast light theme: Tuned for outdoor legibility and direct sunlight.
Semantic color tokens: 1:1 thematic mapping ensures effortless dark/light visual parity.
System-level scalability: Standardized card components ready for future AI module updates.
09. Light Mode & Behind the Scenes
Theme & Token Showcase: Side-by-side comparison of the same UI screen rendered in default OLED Dark Mode and high-contrast Light Mode, with callout tags pointing to the semantic color token structure and design system components.
10. Next Steps & reflections
One-tap integrations: Direct export to Notion, Linear, and Todoist.
On-device speaker tagging: Multi-speaker detection fine-tuned for group meetings.
Cross-device handoff: Seamless transition from mobile capture to desktop analysis.
10. Next Steps & Reflections
Future Feature Wireframes: Low-fidelity or mid-fidelity teaser frames illustrating upcoming product concepts:
Integrations drawer (Notion / Linear sync).
Multi-speaker avatar tagging indicators.