0 to 1 Product Design User Research Prototyping AI Product UCLA Extension 2022

Swing With Me — An AI Stroke Coach in Your Pocket

A native iOS app that records your tennis strokes, compares them frame-by-frame to a pro's form, and delivers the coaching feedback most players can't afford.

UX Designer (Solo)
12 weeks
Adobe XD, Figma, InVision
UCLA Extension, Summer 2022
SWING. splash screen — dark theme with tennis ball and Get Started CTA Skill level selection — Intermediate with Djokovic reference, technique and footwork indicators Home dashboard — HELLO DREW, 70% completion ring, Analyze Swing and Previous Swings CTAs 72% Swing Score screen with real tennis footage, posture, technique, stance, footwork breakdown

Getting better at tennis without a coach is nearly impossible — unless you build the coach.

Tennis improvement requires real-time, specific feedback from someone watching you. Without a coach, you keep reverting to the same bad habits. I designed an app that does what a coach does: breaks down where your form differs from a pro's, stroke by stroke.

Proposed solution slide showing AI and ML concept with Federer reference

Five interviews. One critical pivot: drop the beginners.

I interviewed recreational tennis players across skill levels and ran a competitive analysis across 6 existing apps. The biggest finding was about audience, not features.

Seven research interview questions and affinity map
User feedback synthesis showing pain points, goals, needs, and potential features
Key insight: accountability, guidance, and score tracking
Feature comparison matrix across 6 competitor apps

Beginners needed foundational instruction first. Intermediate players had specific, named problems. I pivoted to intermediate players, which simplified every subsequent design decision.

Personas overview — Drew (32) and Kayla (44), target audience for Swing With Me
Drew Mitchell, 32 — tech-savvy intermediate player, motivation: improve technique without expensive coaching, frustration: no feedback loop
Kayla Keller, 44 — fitness-motivated recreational player, motivation: stay consistent and track progress, frustration: no accountability system

From user flow to paper prototypes to hi-fi — in 12 weeks.

Complete user flow diagram from app launch to actionable feedback
Full site map showing all screens and navigation hierarchy

Paper prototyping came first. Every screen started as a sketch before any pixel work.

Paper prototype: first 6 screens from splash to countdown
Paper prototype: next 6 screens from recording to pro tip

The design evolved through four distinct fidelity stages. This slide captures the full progression.

Design evolution from paper to lo-fi to medium-fi to hi-fi with timeline

The real product. Real photography. Real AI feedback.

The hi-fi prototype moved from stick figures to real tennis footage, real player comparisons, and a dark-themed UI designed for on-court readability.

SWING. splash screen
Skill level selection with Djokovic reference
HELLO DREW home dashboard
72% Swing Score analysis screen
SWING. hi-fi onboarding splash — dark theme with tennis ball and blue Get Started CTA
Onboarding — SWING. splash with AI tagline
HELLO DREW hi-fi home screen with 70% completion ring, daily practice, Analyze Swing and Previous Swings CTAs
Home — accountability: goals, streaks, daily drills, AI analysis CTA
YOU vs PRO with real photography — user's tennis form compared to Djokovic with visual cues, verbal cues, form feedback annotations, and Follow Through pro tip screen with detailed coaching text

The core screen: YOUR footage compared frame-by-frame to Djokovic's. Visual cues highlight form differences. Verbal cues explain what to fix. The Follow Through screen delivers specific coaching text.

72% SWING SCORE with real tennis footage — posture 68%, technique 65%, stance 77%, footwork 73%, timing early, topspin type. Progress bars for improvement and consistency.

Five participants. Prioritized features. One key iteration.

Feature prioritization matrix by impact and expectedness
Rainbow spreadsheet usability test results for 5 participants, color-coded

Challenges, pivots, and what I would do differently.

Key challenges and pivots encountered during the project
Lessons learned with phone mockup

The AI feedback results were designed as a black box. Participants wanted to understand the reasoning behind their score, not just see the gap. A second iteration would focus entirely on the annotation and scoring explanation layer.