Play Connect — Case Study · Sarah Lee
← Back to Work
Case Study · 01 / 02 · Mobile App Design

Play
Connect

"Real Games. Real Players. Right Now." — A mobile app designed to eliminate coordination failure in local sports.

UX ResearchFigmaAxure RP Jan – Dec 2025End-to-End
Filter screen
Live games map
Home screen
Game info screen
Confirmation screen
Hi-Fidelity Prototype — Figma
85%
Monthly cancellation rate
87%
Groups disband month 1
20+
Minutes per pickup game
3
Step simplified join flow
Problem Statement

Local athletes can't find quality games. Reliably. Ever.

Local athletes lack a simple, efficient, and reliable platform to spontaneously find quality games and consistently build social sports communities, resulting in high rates of coordination failure and missed opportunities for social activity.

The primary target audience: active, tech-savvy young professionals and recent graduates (ages 18–40), severely constrained by time and inefficient coordination through GroupMe and Facebook Groups.

Possible Solution

PlayConnect overcomes coordination failure through data-driven commitment metrics and real-time skill-matching, while fostering consistent community building for all local athletes.

Phase 01
Empathize

Qualitative Research

I conducted user interviews with local athletes who regularly play basketball, pickleball, tennis, rock climbing, and golf. I also observed at sport events to measure game duration and sideline wait times.

Finding 1: Players felt personally frustrated when a game was canceled or delayed
Finding 2: Serious players would rather stay home than play far below their skill level
Finding 3: Social players gave up on recurring games due to constant re-planning stress

Quantitative Data

87%
of newly formed groups disband completely within month 1
92% of members remove themselves from the group
85%
of athletes experience at least one last-minute cancellation per month
1 in 5 players never attend after agreeing to play
20+
minutes minimum to organize a single pickup game on short notice

Interview Questions

Tell me about the last time a game you tried to organize or join fell apart. What specific steps did you take? What led to it failing?
When looking for mutuals to play a game, how do you know your skill levels will be met? What percent of the time do you end up against someone with the same skill set?
How do you apply a routine to playing your sport?
Imagine an ideal app could solve your sports coordination problems entirely. What is the very first thing that app would need to show you to make you trust it?
Phase 02
Define

Empathy Maps

Mike Davis empathy map
Mike Davis — Fitness Time Cruncher
Tony Nguyen empathy map
Tony Nguyen — Social Networker
Lena Parks empathy map
Lena Parks — Goal-Oriented Enthusiast

Detailed Persona Research Documents

Mike Davis doc
Mike Davis — Full Persona Doc
Tony Nguyen doc
Tony Nguyen — Full Persona Doc
Lena Parks doc
Lena Parks — Full Persona Doc
Phase 03
Ideate

Low-Fidelity Wireframe Sketches

Three sketch variations explored different navigation architectures before committing to the final user flow.

Sketch Variation C
Variation C · IA-Driven Alternative
Sketch Variation A - Linear Happy Path
Variation A · Linear Happy Path
Sketch Variation III - Chat flow
Variation III · Chat to Plan Games

Revised User Flow Diagram

The final flow diagram shows both old and revised flows — highlighting where decision points were simplified and error states were added.

Revised user flow diagram
Revised User Flow — Figma · Decision trees, error states, and happy path

User Flows by Persona

Mike · Time Cruncher
Find an Existing Game Now
1
Open app — defaults to live map
2
Filter by sport + skill level
3
Tap pin → view game info
4
Join Game → notification sent
5
Confirmation with directions
Tony · Social Networker
Build a Social Group
1
Navigate to Find a Group
2
Search by sport + location
3
Browse group profiles
4
Request to join with message
5
RSVP to weekly game
Lena · Enthusiast
Skill-Based Matchmaking
1
Navigate to Find a Partner
2
Set preferences — sport, skill
3
Browse verified partners
4
Send invitation with time + court
5
Chat & confirm in-app
Phase 04
Prototypes

Splash Screen & Design System

The PlayConnect logo shows two players as a unified icon, split in blue and forest green — communicating partnership, community, and shared activity.

The color system was built as Figma Variables for reusability across all components — Vibrant Blue (#0077B3) as primary, Forest Green (#006400) as secondary, with semantic status colors for game state feedback.

PlayConnect splash screen
Splash Screen
Color palette Figma variables
Color Variables — Figma

Hi-Fidelity Prototype Screens

Three key screens from the primary user flow: the Live Games map, the Filter panel with plain-language skill labels, and the Game Info + Confirmation flow.

Filter screen
Filter Screen
Live Games map
Live Games Map
Home screen
Home · Sport Tags
Join Game
Join Game
Confirmation
Confirmation

Hi-Fidelity User Flow Map

The complete prototype user flow — all screens connected, from home through filtering, game selection, and confirmation, including error states.

Hi-fi user flow map Figma
Complete Hi-Fidelity User Flow — Figma

Dynamic Repeater Table — Axure RP

Dynamic repeater table interaction in Axure RP for the live game listing — sortable by sport, skill level, and distance. Also demonstrates the filter radio button interaction and map integration.

Axure repeater table + filter
Dynamic Repeater Data · Skill Level Filter — Axure RP
Phase 05
Usability Testing & Iteration

Prototype improvements and hypothesis testing based on Jakob's Usability Heuristics, with IF/THEN hypotheses tied to measurable outcomes.

H1 · Visibility of System Status
Failed "Join Game" feedback
User Testing
When joining a full or restricted game, the button disappeared without explanation, leaving users confused and stuck.
Fix
A clear modal explaining why the action failed — with an immediate alternative suggestion.
IF immediate modal feedback is provided, THEN users will report less confusion and require fewer attempts to find an alternative game.
H2 · Match System & Real World
Confusing numerical skill scale
User Testing
A numerical scale (Level 1–5) didn't match real-world athletic language, making users hesitant about match quality.
Fix
Three plain-language levels: Beginner, Intermediate, Advanced — with brief descriptions.
IF real-world language is used, THEN users will complete filter setup 30% faster and report higher confidence in match quality.
H5 · Error Prevention
Scheduling conflicts not caught
User Testing
Users created recurring schedules without checking facility hours — an error only discovered after the schedule was finalized.
Fix
The app proactively checks external data (open hours, busy times) and alerts the user before finalizing.
IF the app proactively flags conflicts, THEN the rate of organizer-initiated schedule changes will decrease.
Phase 06
AI Implementation

Two AI-powered features address the root causes of coordination failure — unreliability and skill mismatch — while creating sustainable revenue models.

Reliability & Revenue
Commitment Score Engine

Problem solved: The 85% cancellation rate.

How it works: Predictive analytics on user history (cancellations, no-shows, attendance) generates a dynamic Commitment Score (0–100). Organizers can set a minimum score requirement to join games.

Revenue model: A "Reliability Pass" subscription or micro-transaction temporarily boosts a low-score user's rating — converting a pain point into a revenue stream.

Quality & Retention
Skill Verification Engine

Problem solved: Skill mismatch — Lena's need for verified partners.

How it works: ML analyzes peer ratings, logged performance data, and external integrations to move beyond self-reported skill. Grants an objective "Verified" badge.

Revenue model: Exclusive Skill-Verified Leagues requiring the certified badge — justifying a higher-tier subscription for dedicated users like Lena.

Tools Used

Software & Methods

Figma — Hi-fi prototyping, design system, color variables
Axure RP — Dynamic repeater table, filter interactions
Adobe Illustrator — Visual assets & logo
Photoshop — Image editing & persona visuals
Miro — Empathy maps & research synthesis
Key Outcome

"Mastery is the cumulative effort of small, strategic failures. Play Connect is the story of that effort — from messy user interviews to a 3-step join flow backed by data."