Castmagic is an AI tool that repurposes audio/video content (like podcasts or interviews) into written assets such as transcripts, summaries, show notes, and social media posts. It helps creators and teams save time by automatically generating publish-ready content from a single recording.
2 Week
+20 Prototypes
Case study
Responsibilites
UX Audit & Heuristic Evaluation
Cognitive Load Reduction
Interaction Design Information Architecture
Visual Hierarchy & Design
Systems Thinking
Prototyping & Design Validation
Project Scope
Castmagic helps creators transform long-form recordings into high-value content assets. The existing experience suffered from fragmented messaging, competing visual priorities, and unnecessary cognitive load, weakening the transition from upload to content generation. My role involved conducting a comprehensive UX audit and redesigning the Upload and Generate experiences. By centralizing the primary interaction, removing redundant UI, and introducing progressive disclosure patterns, I reshaped the workflow into a clearer, more focused experience. The goal was to reduce friction, strengthen trust, and guide users seamlessly from content ingestion to generated outputs.
Upload page
The original flow had the right ingredients, but too many competing messages and visual anchors created cognitive overload. My goal was to make the experience instantly legible: within the first glance, users should understand why they’re here and what to do next.
What I changed
Centered the primary interaction: I moved the upload dropzone to the visual center and treated it as the hero element. This reduces eye-jitter and keeps attention on the core job-to-be-done: uploading a recording.
Replaced marketing copy with progressive, truthful UI: I removed the “your media, endless content” slogan from the main canvas and introduced a grid of output cards with skeleton states and a subtle bottom fade. Instead of making claims, the interface now communicates that more outputs are coming through progressive disclosure.
Moved brand/value messaging to the header: Value statements like “The most powerful AI for transcription and content generation” were relocated near the logo, keeping the workspace task-focused while still reinforcing credibility.
Outcome
The result is a calmer, more focused entry point that reduces cognitive load, improves scanability, and builds trust through interface behavior rather than hype. It creates a more confident transition from Upload to Generate.
Genrate Page
The challenge
The original generating screen felt visually fragmented, with too many competing elements fighting for attention. It also weakened trust by displaying blurred, ready-looking content while the system was still processing—creating a mismatch between what the interface suggested and what the product was actually doing.
What I changed
Turned loading into a staged reveal: I reimagined the generating phase as a live, orchestrated experience rather than a static loading state. By revealing content cards progressively, one at a time, the wait becomes a visible demonstration of system capability. The pacing gives users space to absorb results, builds anticipation, and makes the AI feel more intentional and intelligent.
Redesigned trust cues for the waiting state: I kept testimonials as a trust mechanism, but reframed them as lightweight loading tips: one short message, centered, with optional rotation during longer waits. This aligns with familiar waiting-state patterns, reduces distraction, and keeps focus on the user’s content.
Reduced passive waiting: I added playback controls to the waveform so users can review their recording while processing continues. This minimizes idle time and reinforces a sense of control.
Outcome
The redesigned experience is calmer, more cohesive, and more transparent. It transforms the feeling from “waiting for AI” into “watching results emerge,” helping users reach the aha moment faster and with greater confidence.
The waveform adds a sense of intelligence and professionalism, reinforcing the feeling that AI is actively working on the content.
Left original design system - Right redesign system
Engineering Consistency: Refactoring the Wait State
The original wait-state experience had accumulated significant design debt: inconsistent spacing, fragmented typography, and ad-hoc color usage created visual noise that weakened trust in the product. To create a scalable foundation, I refactored the interface into a systematic design architecture aligned with established industry standards.
The Systematic Overhaul
8pt Grid System
I replaced 18+ inconsistent spacing values with a strict 8pt grid system, following conventions used in systems like Material Design and Apple’s Human Interface Guidelines.
This introduced:
consistent visual rhythm - predictable responsiveness - cleaner alignment across screen sizes - reduced layout drift
The result was a more cohesive interface with significantly lower visual noise.
Modular Typography
The previous UI relied on fragmented font sizing with weak hierarchy.
I introduced a modular type scale using:
16px / 1rem base sizing - 1.25 scale ratio - standardized heading and body relationships
readability - scanning behavior - accessibility consistency - cognitive clarity during AI processing states
Semantic Color Tokens
The legacy interface used 12+ hardcoded color values with no semantic structure. I consolidated the system into 7 semantic design tokens, separating visual intent from implementation.
This enabled:
scalable theming - easier dark/light mode support - faster engineering implementation - reduced styling inconsistencies across components
The Business Impact
Reinforcing Trust in AI
AI products inherently introduce uncertainty for users. The original cluttered interface amplified that uncertainty by feeling visually inconsistent and operationally unreliable. By simplifying the interface and establishing stronger visual hierarchy, the experience became calmer, clearer, and more trustworthy — reinforcing the perception of precision during processing states.
Scalability & Developer Velocity
Moving from ad-hoc styling to a tokenized system reduced front-end inconsistency and eliminated recurring implementation guesswork.
The refactor created:
a scalable design foundation - faster feature iteration - lower UI maintenance overhead - improved consistency between design and engineering
Conclusion
The legacy wait state lacked a cohesive system for spacing, typography, and color, resulting in a fragmented experience that weakened both usability and product perception. This refactor transformed the interface from a collection of isolated decisions into a scalable, tokenized system designed for long-term growth. Beyond improving visual quality, the redesign strengthened user trust in the AI experience while reducing technical and operational design debt.
Responsive
When users click the “+” card, the AI chatbot opens
New feature
To increase onboarding conversion, I added a “+ Custom Card” at the end of the output grid—turning users from passive observers into active participants.
A lightweight chat modal lets them request a new format (e.g., “Bluesky post”), which instantly appears as a blurred placeholder card in the grid.
This leverages the IKEA Effect and psychological ownership: users feel they “made” something, increasing curiosity and intent to continue.
It also creates a clean workflow loop (request → card appears → Reveal in Castmagic), guiding users toward the next step.
From an ROI standpoint, it’s near-zero cost: only the title is processed—no full generation is needed during onboarding.
The result is higher perceived personalization, lower cognitive friction, and a stronger reason to click the primary CTA.
Designed as a scalable pattern, it can support new formats without adding UI complexity.
Goal: measurable lift in CTA CTR and overall conversion rate through engagement-first design.
Final CTA
Bringing the Story to a Close
Every element in the onboarding flow is designed to build anticipation gradually. Outputs emerge one by one, previews remain intentionally incomplete, and users can request their own custom card before seeing the final result.
By the time they reach the end of the experience, users are no longer evaluating a promise—they are invested in seeing the outcome.
That is why the final action is framed as Reveal.
Rather than asking users to start a trial, the interface invites them to uncover results they have already helped create. The CTA becomes the natural conclusion of the experience, transforming curiosity into intent and guiding users into the product at the moment engagement is highest.
