Deliverables (live at v0)
Recording was easy. Finding, verifying, and reusing what mattered was not.
A fast summary has limited value if users cannot verify its source or correct errors before reuse.
Move from audio to reviewed, structured information without losing source context.
Target Users: Startup founders, students, busy professionals (UX Researchers, Reporters)
Methods: 4 interviews, 12 survey responses
Make processing status visibleKeep AI output connected to timestampsSupport correction before reuseProvide clear recovery pathsFit existing knowledge workflows
Started in Figma: Created low-fidelity wireframes with mobile-first layouts
Research & Planning: API to use for transcribing. (If no money limitations I will choose Whisper instead)
Flow Mapping: Defined user flows for uploading, transcribing, editing, summarizing, and exporting
v0 Prototype: Started with Lovable, Bolt, and then v0. Built an interactive click-through prototype to visualize the user journey
Local API Mocking: Simulated transcription responses using local JSON files
UI Iteration: Refined layout and interactions based on early feedback and usability patterns
Supabase Storage: Integrated for uploading and storing audio files and built upload success/error handling to confirm files are saved.
Speech-to-Text API Integration: Ultimately choose Assembly AI API (non-GPT) for converting audio to text
(Google speech to text API at first , then found out only accepting GS not supporting summary...)
Speaker Labeling: Parsed transcript to apply basic speaker separation (e.g., Speaker 1, Speaker 2)
Transcript Interface
Editable Transcripts: Built inline editing system with autosave support
Highlight System: Added tap-to-highlight functionality with badge tagging (e.g., Important, Action)
Mobile Responsiveness: Tailwind CSS used to ensure smooth experience on mobile and tablet
Cached transcripts and metadata in Supabase Database: for persistence and quick retrieval.
Lightweight Summary Logic: Used simple heuristics or transcript structure (e.g., paragraph segmentation, keyword detection) to generate summaries
Timestamped Highlights: Associated key points with their corresponding audio timestamps
Speaker Insights: Displayed talk-time distribution per speaker as basic insights
Export Modal: Built modal interface with selectable export options (Google Docs, Notion, PDF, Local Save)
(only implement opening the save to ...screen modal)
User Testing: Conducted quick feedback sessions with early users to test core flows
UI Enhancements: Improved visual spacing, font hierarchy, and transitions
Error States: Added fallback messaging and error recovery for failed transcriptions or exports
Rate Limiting: Limited export operations per user to prevent abuse during MVP
Cross-Device Testing: Verified usability across breakpoints and devices
Edit Notes, Summary, Action Items & Transcript: According to user needs (Added function)
Found the entry point: the Share and Comment icons already existed in the shipped UI with no logic behind them — the natural surface to design into rather than invent from scratch.
Permission model: designed Owner, Can edit, Can comment, and Can view roles, each rendering a different, consistent version of the same note so collaborators only see the controls their role allows.
Threaded comments: anchored replies to specific highlighted transcript spans, reusing the tap-to-highlight system built in Phase 2.
Thoughtful states: designed pending-invite, active-access, invalid-email, and empty states so the feature reads clearly at every stage, not just the happy path.
Accessibility: kept modal focus order logical, made the role dropdown keyboard-operable, and checked contrast on every status badge.
Status: designed and prototyped end-to-end (see mockups below); not yet wired into the app's single-user data model — that's the next build phase.
Thank you for reading this case study! If you’re interested, feel free to check out my other projects in "WORKS"