Skillcourt
Smart training meets sharp footwork—an iOS app built for connected soccer performance.
Company: SkillCourt LLC
Duration: Approximately 5 months in 2022
Team: Product Team (Solo Designer + Company Founder + Devs)
My Role: Senior UX Designer
Case Study: SkillCourt App Redesign
From clunky prototype to polished platform—reinventing smart training for the field.
Overview
Reimagining a Connected Training Experience
SkillCourt is a mobile app that powers a cutting-edge athletic training system—using IoT-connected LED pads to guide users through cognitive and physical exercises. Originally designed by developers, the app’s UX was clunky, inconsistent, and difficult for users.
I was brought in as a Senior UX Designer to lead a full redesign of the mobile experience—from onboarding to gameplay. In just 5 months, I delivered a full end-to-end rebuild of the app, including every screen, interaction, and flow. The result: a smoother, more inclusive, and far more intuitive interface that matched the innovation of the physical product itself.
Problem Solving
A powerful product, held back by poor UX
SkillCourt, a small and ambitious startup, had developed a unique piece of athletic training hardware—but their original mobile app wasn’t delivering the experience users needed. Built by engineers, the app’s UX was unintuitive, lacked personalization, and often confused or frustrated users during testing.
When I joined the team in early 2022, the hardware prototype was nearly finalized, and the v1 app was fully functional—but it was clear that the interface was holding back user satisfaction, retention, and overall product growth.
My role was to lead a full end-to-end UX redesign—transforming the app into something smooth, inclusive, and delightful to use. I was tasked with elevating every screen and flow to meet the expectations of real users, coaches, and athletes.
⬆️ Above: Screenshots from the original early prototype app. The experience was full of errors and confusing user flows.
To assess the full scope of work ahead, I recreated the existing screens and UX flows in Figma—since no documentation existed at the time.
Leading the UX Vision
Building key user journeys, mentoring the team, and driving product success was the role.
I led the complete redesign of the mobile app—owning the full end-to-end experience and mentoring a junior designer along the way. This was a high-speed, 5-month sprint to transform a developer-built MVP into a sleek, intuitive product ready for market.
The focus was to rethink the app from core architecture to final microinteractions. My contributions included:
- Designing the UX strategy and flow architecture for onboarding, training selection, and workout settings
- Creating the device control interface for the IoT-connected Agipad training pads
- Building the logic and screens for error handling and edge case resolution
- Overhauling visual design and establishing a new mini design system for brand cohesion and scalability
- Defining interaction patterns for Bluetooth connectivity and firmware update flows
- Synthesizing user research and test feedback into actionable product improvements
I led design planning while collaborating closely with engineers, and product stakeholders - from wireframes to the final dev handoff, ensuring clarity, consistency, and executional excellence across the board.
My role was end to end redesigning how users interacted with a cutting-edge, connected training system.
⬆️ Above: A glimpse of the final app redesign, shown alongside a test user trialing the early Agipad hardware and app prototype—right on the soccer field where it all came to life.
The Work in Action
Where vision meets execution.
From research to final dev-ready flows—every screen, state, and interaction was redesigned from the ground up.
Process
The V2 app redesign followed this process for end to end production:
Researching product & users
- It began in the soccer field
- Observing and interviewing users
- Mapping user pain points
Analyzing the data
- Documenting use cases & emotions
- Building user personas
- Understanding the new Hardware
Ideating on best plans & UX
- Mapping Hardware UX Flow
- Defining Information Architecture
- Mapping Edge case & Error flows
Designing the flows & screens
- Low to high fidelity screens
- Reviewing & designing all features
- Rapid prototype testing w/ Devs
Testing & data driven design
- UX data driven design updates
- Stakeholder reviews
- Building Figma components
Handoff & done
- Polished clean UX flows
- Finalized Design System
- Finalized documentation
Research Paths
Real users. Real sweat. Real insight.
After conducting a competitive analysis, I found that the market was relatively untapped—giving us the opportunity to establish SkillCourt as a category leader in connected athletic training.
To get a deeper understanding of our users, I took it back to basics: field work. I attended live training sessions, observing real users interact with the new Agipad prototypes and the original v1 app. This hands-on approach revealed immediate UX pain points, especially around:
- Device setup struggles and inconsistent connection feedback
- Frustration switching between multiple user profiles with different training preferences
- Clunky navigation that slowed down fast-paced training environments
It was clear: users didn’t want to tinker with settings—they wanted to train, sweat, and move.
Beyond usability flaws, I uncovered valuable behavior patterns. Younger athletes gravitated toward high-speed, coordination-heavy workouts, while older users preferred slower, rhythm-based cardio sessions. This range in energy and physical needs became the basis for our user segmentation and informed the flexible control model that followed.
With real-world observations and insights in hand, I synthesized the data into targeted user personas to guide design decisions moving forward.
Data Synthesis & Documentation
Organizing insights into action
After reviewing detailed field notes from test users, I systematically documented and categorized the key pain points in the v1 app experience. These insights fell into three main buckets:
- Core user experience issues
- Design and visual inconsistencies
- App copy and messaging problems
Each pain point was distilled onto digital post-its for collaborative review with stakeholders, ensuring transparency and alignment on priorities moving forward. This structured approach laid the groundwork for targeted design solutions—next up: defining user personas based on these real-world insights.
Analysis
Use Cases
The original SkillCourt app failed to meet key user expectations around personalization, flexibility, and simplicity—core needs expressed consistently during testing.
The Pros
Professional soccer teams looking to enhance training.
The Chill Vibes
I need a quick workout during my lunch break.
Schools
Fun personalized training for school soccer teams.
New Players
I'm new to soccer, but I want to learn at my own pace.
User Pain Points
Live user testing in the field revealed three clear areas of friction: onboarding, personalization, and overall usability.
Aversion To Complexity
Users wanted to jump in and train—without repetitive setup or configuration.
Personalization is a Must
From high-intensity athletes to casual users, people wanted the ability to tailor their training experience to their own speed and style.
Burden of Choice
Without clear guidance, options feel like obstacles. Users wanted help, not a guessing game.
User Personas
Field interviews and hands-on testing shaped detailed personas that guided key design decisions and ensured the product met real user needs.
Name: Ethan, 19
Persona Type: Competitive Athlete
Occupation: Fast Food Worker
Bio:
A busy university student with a buzzing social life, Jordan plays soccer regularly with his equally competitive friends. Always on his phone, he’s extremely tech-savvy and quick to adopt new tools that enhance his performance or let him flex his skills.
Goals:
- Personalize training sessions to match his fitness level
- Quickly switch settings between users for group challenges
- Compete with friends using fast-paced, high-difficulty training modes
Frustrations:
- Wasting time setting up sessions manually
- Lack of quick presets or group customization
- Clunky UX that slows down fast group play
Quote:
"I just want to hit start and compete—don’t slow me down with a bunch of steps."
Name: Fifi, 37
Persona Type: Time-Sensitive Parent & Professional
Occupation: Marketing Director
Bio:
A high-powered marketing director and devoted mother, Fifi balances a demanding career with an active, health-conscious lifestyle. She's tech-savvy, but her time is limited—and she values tools that work seamlessly, without added friction. Her dream workout? A quick, energizing session in the backyard during her lunch break or a playful weekend routine with her son.
Goals:
- Set up and start a session quickly with minimal steps
- Use the product outdoors without hassle
- Save custom settings for easy access and re-use
Frustrations:
- Repeating the same setup every time
- Complex interfaces that slow down her short free windows
- Lack of intuitive UX to support casual or family-friendly use
Quote:
"If I only have 20 minutes, I don’t want to spend 10 of them messing with menus."
Name: Yanni, 54
Persona Type: Veteran Coach & Casual User
Occupation: High School Soccer Coach
Bio:
A passionate and disciplined high school soccer coach, Yanni brings years of experience from his time as a pro player in the European leagues. Though his days of competitive play are behind him, his love for the game hasn’t faded. He now focuses on helping the next generation master their footwork, teamwork, and discipline—while still finding ways to stay active himself.
Goals:
- Train students with structured drills to improve footwork and coordination
- Use the app as a reliable coaching tool during practice
- Stay physically active with low-intensity sessions suited to his current pace
Frustrations:
- Interfaces that assume a high level of tech proficiency
- Features geared only toward solo or high-intensity use
- Lack of quick training presets appropriate for group instruction or slower movement
Quote:
"I may not move like I used to—but I still know the game better than anyone on that field."
Hardware & The User
Designing Settings for the Agipad
The Agipad is a proprietary smart training device designed for soccer and cardio-focused workouts. It connects to the user’s phone via Bluetooth, allowing the SkillCourt app to control key features and session settings.
Through the app, users can easily configure and personalize the following:
New User Flow
The redesigned SkillCourt app works seamlessly with connected hardware to help users train effectively. It was essential to design a clear, intuitive path for pairing the Agipad device with the user’s phone—while mapping out every major interaction to ensure a smooth, reliable experience from start to finish.
⬆️ Above: Early UX groundwork, mapped in real-time with the founder and devs—setting the tone for everything that followed.
Information Architecture
One of several architecture map iterations, focused on organizing features and flows in the most intuitive and scalable way possible.
Add a Pad - The Connection Flow
To ensure users could easily add and connect Agipad devices, the connection flow went through multiple design iterations. Once finalized, the flow was streamlined and visually refined—making it easy to understand for both users and cross-functional teams like dev and product.
Effortless Setup by Design
By mapping hardware capabilities and edge cases with devs, I created a seamless, automated connection flow. The goal: make setup feel invisible. Simple screens, smart defaults, and surprise-and-delight moments turned a complex pairing process into something fast and frictionless.
Errors
& Edge Cases
Solving for error states and edge cases is one of my favorite parts of thoughtful UX design. For SkillCourt, I tackled dozens of failure scenarios to ensure the app handled unexpected moments gracefully and intuitively.
What happens if the app can’t connect to the Agipads? What if Bluetooth is off—or the user’s phone is in airplane mode? These were just a few of the real-world situations I mapped, tested, and resolved.
Working closely with dev leads, I categorized all error cases into two primary user paths—creating a clean decision tree that could be implemented efficiently across platforms.
Thoughtfully designed error screens—built to inform, guide, and recover every time.
Finding The Way Home
An iterative design journey rooted in testing and clarity.
The home screen evolved through multiple design phases—from early wireframes used in rapid prototyping to data-informed refinements based on real test user feedback. I tested different layouts, incorporated business requirements, and carefully shaped a final design that felt intuitive, focused, and ready for the field.
Data Driven Redesign
Modern. Minimal. Made to Perform.
The final three main screens were shaped by real user feedback, testing insights, and performance data. I led the design with a clear goal: deliver a clean, intuitive UI that keeps users focused on training—not tapping.
Prototype testing validated the approach—users navigated confidently with minimal friction, and the layout supported both casual and high-performance use cases.
Game Settings
From early wireframes to Final UI
Once core user flows and edge cases were mapped, I focused on optimizing screen layouts and refining the UX for SkillCourt’s many settings. Multiple iterations were explored and tested to align with user preferences and business goals.
Why wireframes first?
The original app was outdated and lacked a design system. Starting with wireframes allowed me to focus purely on structure and usability—ensuring the flow worked before layering on visuals.
Setting Up The Perfect Game
Final UI & Clean UX Flows
Below is the redesigned Play Setup screen—one of the most essential flows in the SkillCourt app experience. Every element was refined using user feedback and testing insights: from fast, scannable controls to the ability to save and load presets effortlessly. The final layout directly addresses key pain points, delivering a streamlined, user-centered solution built for performance.
Clean, Fast & Easy
An example of how quick and easy it is for users to edit Pad light delay settings:
Play Settings User FLow
Crystal-Clear UX
I take pride in building organized, intuitive user flows that make handoff seamless for dev teams. Shown here is a refined UX flow for the Play Setup screens—designed to keep the experience simple for users and implementation-ready for engineers.
The Full Product FLow
Mapping every detail for devs, as cleanly as possible.
Pad Brightness Control
Fast, intuitive LED adjustments on the fly.
Users can easily fine-tune pad brightness in real time—no digging through menus, just quick control when it matters most.
Small details, big impact.
On the pad brightness screen, the visual indicator grows with light intensity—an intuitive, inclusive touch that reinforces feedback without needing extra explanation.
Always There To Help
A hidden yet essential UX flow was designed in close collaboration with devs to ensure the app continuously checks pad connection and status in the background.
By understanding hardware behavior and mapping edge cases, we created an automated system that quietly supports the user—so things just work.
Design System
Clean & Organized In Figma
To ensure consistency and speed, all card components and status bar assets were built using Auto Layout—following best practices in Figma for scalable, efficient design updates.
The Results
The SkillCourt app is currently in early development, but my engagement brought a complete, production-ready redesign to life in just five months. From wireframes to final UI, I delivered a fully thought-out end-to-end experience tailored to user needs, edge cases, and real-world use.
Early testing showed strong results—users quickly understood the new flows, and feedback confirmed that the redesigned experience hit the right balance of usability and personalization.
One of the biggest wins? The dramatic transformation from the original developer-designed app to a clean, intuitive, scalable product experience. Before I wrapped the project, I delivered all the assets, UX flows, and documentation needed for successful handoff and implementation.
As of my last update, the product is still in development and seeking additional funding and engineering resources—but the design foundation is in place and ready to launch when they are.
Disclaimer:
The work shown here was created during my time helping SkillCourt LLC and is presented solely for personal portfolio use. All visuals reflect my role and contributions, and are shared respectfully to highlight process and craft—not for public or commercial use.
Reflections
Behind the Screens (and on the field)
Sunny and full of energy—that’s the best way to describe my time working on SkillCourt. Testing the Agipad hardware in real-world training sessions added a whole new layer to the UX process. Running drills while the pads lit up in rapid sequences? You definitely break a sweat.
And yes—Florida had some amazing food. I still remember sketching the early Agipad connection flows while eating a damn good Cuban sandwich. 🥪
Here’s what the client had to say…