CourtOn – IOS App to help badminton players have better game experiences
Project Name
CourtOn
Project Type
UI/UX Design
Duration
2 Months
Tools Used In This Project
My Role
UI/UX Designer
Team Members
Siya Yang - Team Lead/Project Manager
Heidi Tang - UI/UX Designer
Nicolas Asis - Developer
Contributions
User Interviews
Mind Mapping
Affinity Maps
User Personas
Site Mapping
Wireframes
Prototypes
Design Decisions
Overview
CourtOn is designed to solve badminton players’ struggles in finding opponents with compatible skills and helping organizers manage groups. As the lead designer, my role was to shape CourtOn's user experience to ease skill compatibility and organizer management features.
The Problem
Competitive badminton players struggle to find opponents of similar skill levels due to the absence of a centralized platform, leading to frustration and inefficiency in organizing matches and hindering their ability to enhance skills and enjoy a fulfilling gaming experience.
"How might we improve skill compatibility among competitive badminton players for a better gaming experience and also help organizers manage groups?"
Proposed Solution
Our proposed solution is to develop "CourtOn," a comprehensive mobile application tailored specifically for badminton players. Players will have access to easily join groups with players of compatible skill levels, thereby enhancing the quality and competitiveness of their gameplay experiences.
Also another feature to help organizers creatend manage groups, aiming to streamline the match-finding process, foster camaraderie, and enhance the badminton experience for players of all skill levels through a centralized community hub.
Exploration
Mind mapping
This helped me and my team to focus on the two primary features:
1) Join Groups for badminton players
2) Creating Groups for organizers
Secondary features include 'onboarding' for new users, 'my groups' to find created and joined groups and 'user profile'.
Mind map created using FigJam. Click to Zoom
Affinity Mapping using FigJam. Click to Zoom
Primary Persona: Badminton Player
-1.webp)
Secondary Persona: Organizer
.webp)
User Task Model: Badminton Player
User Task Moel: Organizer
User personas and user task model done using Figma. Click to Zoom
Solution
Why We Chose an iOS App-Based Solution?
The research showed that badminton players face difficulty finding skill-matched opponents, and organizers struggle with managing groups. An iOS app offers a user-friendly, mobile solution that allows players to easily connect with compatible opponents and provides organizers with tools to streamline group management. This app-based approach ensures convenience and real-time access, making it a more effective solution than a simple process change.
Minimum viable product (MVP)
CourtOn is designed to address the immediate needs of badminton players and organizers while laying the foundation for future enhancements. The MVP focuses on essential features that fulfill the core objectives of facilitating match discovery, scheduling, and player management.
1) User Registration and Profile Creation: Create profiles and choose their skill level.
2) On boarding: New users will experience clear instructions on what to expect from this app.
3) Discover & Join Groups: Players can search for opponents based on skill level, location, and availability.
4) Posting Groups: Players/ Organizers can post match groups for players to drop-in.
5) My Groups: Users can view their joined and created groups
6) User Profile: User's can change their profile image or skill level
Organizer-side Wireframes
User-side Wireframes
Skills Compatibility
I proposed my team that we implement three main skill levels—Beginner, Intermediate, and Advanced—in the app, allowing new users to select their skill level during the onboarding phase to facilitate joining groups with similar skill levels.
.png)
Hi-Fidelity Design Decisions
Home Page/ Drop-in Page
Splash Page: Intro Screen
Home Page/ Drop-in Page
Court Selection
Onboarding
For new users I created a series of onboarding screens to facilitate a smooth and intuitive user journey, enhancing initial engagement and user comprehension.
Organizer Side: Creating Group
Organizers can effortlessly create a new badminton group by selecting a center, assigning time slots and courts, and seamlessly posting it for others to join, all through an intuitive interface.
Player Side: Joining Group
Users can seamlessly join posted groups with a straightforward join function and enjoy seamless transactions via the Apple Pay feature, enhancing the overall UX.
My Groups: Created & Joined
User Profile
High-Fidelity Prototyping: Onboarding
High-Fidelity Prototyping: Main Pages
Rapid User Testing
Change in position for court Indicator
We introduced indicators for available, booked, and selected courts, but during testing, users overlooked them due to their placement far from the bottom button. After repositioning the indicators closer, 5 out of 6 users successfully noticed them.
Change in color for group count Indicator
Adjusted the color codes following since users where confused. New iteration is using red for occupied groups and green for available ones.
Words from users
"Finding the right players to match my skill level has always been a challenge. 'CourtOn' seems like it would make matching and payment effortless, which is exactly what I need."
Emily Z.
Student | Intermediate Level - Regular Badminton Player
"As an group organizer in the badminton community, 'CourtOn' has the potential to revolutionize our management process. The streamlined group setup and live updates would allow us to host events more efficiently."
Henry W.
Organizer | Badminton Club
Learnings
Proactive Communication
Understanding that clear, consistent communication within the team and with stakeholders is essential for aligning goals and expectations.
Adaptable Scheduling
Recognizing the need for flexible timelines to accommodate unforeseen changes and maintain project momentum.
Collaborative Tools
The effective use of collaborative platforms like Figma facilitated real-time teamwork and seamless transitions between project stages.
Iterative Design
Embracing the iterative nature of design, where ongoing user feedback is integral to refining and improving the end product.
Impact on Audiences
We received affirming feedback from usability testing with real users, highlighting its potential to streamline the badminton play and group organization experience.
Leadership Skills
This was my first role as lead UX/UI designer role. Directing the design process of the app helped me gain valuable leadership skills.
User-Centric Approach
A reinforced commitment to user-centric design, ensuring that user needs and experiences drive the development process.
What's Next For CourtOn?
