iOS APP For Competitive Badminton Players
COurton - iOS mobile App
GAme on ! CourtOn !
Pair competitive Vancouver badminton players with skilled-match groups
My Contributions
Affinity Map
Journey Maps
Perspective Grid
Wireframes
Flow Diagram
Design Decisions
Role
BCIT School Project – iOS Mobile App
Why
Improve the gameplay experience for badminton players across different skill levels.
Role
Project Manager | UI/UX Designer | Front-end developer
Category
iOS Mobile App, Utility
Project background
❓ Why Badminton?
Courton was my final project at BCIT, where we were tasked with developing a mobile app idea in a group of 4 to benefit the community.
Being an active member of the badminton community, I observed that players faced issues with joining groups and finding compatible players of similar skill levels, affecting their game experience.
Therefore, I came up with an idea to assist badminton players in finding competitive games and joining appropriate groups.
Drop-in 🆚 Join as a Group
Drop-in(💵pay badminton center):
✅ $5-$10/person
⭕ Players can play anywhere in the badminton centers
❌ Players have to find opponents themselves
❌ Players need to buy a birdie or feather ($18/tube)
💡 Players don’t know who they play with
Join a Group(💵pay organizer):
⭕ $7-$12/person
⭕ Players can only play on selected courts
✅ Free birdie or feather
✅ Organizers will make sure everyone has a chance to play within
💡 Players don’t know who they play with before joining the group
The Problem
There is no product or service available to help competitive badminton players find similarly skilled players to improve their abilities through challenging gameplay.
In my experience, many badminton players (including juniors from high school ) who want to improve their skills will sign up for tournaments and join different groups to face various opponents and gain experience.
The skill level of players in these groups often varies greatly since many of these groups are formed for socializing purposes, which can lead to issues.
Competitive players or who are looking to improve their skills may end up feeling frustrated and wasting their time.
Less experienced players struggle to keep up and may lose interest in playing and not return.
The Goal
Research, design and develop a mobile app to improve badminton players’ game experiences with suitable skill levels and help organizers managing groups.
Having been an avid badminton player in the community, I possess first-hand experience that allows me to bridge the divide between the user and the product. I began by leveraging my existing knowledge and subsequently proceeded to interview 6(4 players, 2 had organizing experiences) potential users.
🤔 Other than the information I had, there are 3 main questions we need to focus on as a team when conducting research:
- What are the current frustrations and pain points for group organizers and members?
- How might we achieve what group organizers and members need?
- What do group organizers and group members want from the app?
Research & Empathize
As the sole badminton player on the team, we initiated user interviews with potential users promptly to ensure that everyone was on the same page.
We did a user interview and have some data on the affinity map, and since it has a lot of data, we started to do a journey map to prioritize the needs and wants.
Affinity Map
Journey Map – Problem space research
Player journey map
Organizer journey map
- The skill level feature is a top priority for players but not for organizers; their primary concern is having enough people to join the group and afford the court rental fee and shuttlecocks.
- In order to achieve the players’ goals – help them find appropriate groups to join, we must first fulfill the priorities of the organizer – help them better to organize the groups.
Perspective Grid – SOlution space research
After conducting user interviews and analyzing the journey maps, we prioritized the features based on our tight deadline. We then created a perspective grid to identify the essential features that address the users’ needs and desires.
Player perspective grid
Organizer perspective grid
We have answers for the 3 questions:
What are the current frustrations and pain points for group organizers and members?
For Players:
- Be prepared to pay the group joining fee with cash or e-transfer.
- Not knowing who they will play with or the skill level of their opponents can lead to losing interest, especially if there is a significant difference in skill level.
For Organizers:
- 1. Uncertainty about whether there will be enough players to join the group can result in financial losses if there aren’t enough players to cover the cost of the court booking.
- Keeping manual notes on player payments and court expenses can be messy.
How might we achieve what group organizers and members need?
For Players:
- Introduce an online payment method in the app to avoid payment forgetfulness.
- Show the skill level of players in the group on the app to provide an idea of the average skill level.
For Organizers:
- Encourage players to join by creating a progress bar with different colors for the rooms that have already been filled and those that are still open.
- Improve the organization of expenses related to court booking and group joining fees by laying them out more clearly and neatly.
What do group organizers and group members want from the app?
For Players:
- Address their issue of having to carry cash and keep track of payments manually by offering a cashless payment option.
- Allow them to discover groups with players of diverse backgrounds and skill levels but with a similar overall playing level.
For Organizers:
- Increase the group’s visibility to attract more members so that organizers won’t risk booking too many or too little courts.
- Serve as a tool for managing groups and finances more effectively without manually tracking them.
Prioritizing Perspective grid
Due to having 6 other courses to attend during the semester, we lacked sufficient time to work extensively on the project. Therefore, we spoke with our instructor and agreed to narrow down the project’s scope and prioritize the essential features.
Conclusion from Journey Map
Approved – Skill Level Bandage: App’s core feature: Users view skill levels to find suitable groups quickly, which is easy to implement for a college team like us.
Approved – Create groups: Another core feature of the app. Without it, the app doesn’t exist.
Approved – Show player’s number and set players’ limits: Incentive for players to join and helps organizers book courts based on the number of players.
🧐 Tradeoffs – Group counter: This feature is optional for player attraction. Since the time is limited, an alternative could be to enhance the UI of the group joining process for a more engaging experience.
🧐 Tradeoffs – Spending and expenses: Feature intended for finance tracking generates single-page PDF reports summarizing court bookings, shuttlecock expenses, and player earnings. Due to time constraints, we couldn’t finish it, but made a basic sheet on the group detail page for an overview.
Inform players of friends in the group: It is a lower-priority feature, and given our tight timeline, we were not able to implement it.
Payment integration: Due to time constraints, we had to give up on this feature.
Wireframe & Design
Flow diagram
low Fidelity Wireframe
High fidelity UI Design
Color palette
In 2019, the colour of the year was living coral which conveyed a similar message, “It embodies our desire for the playful expression.” This colour brought a sense of playfulness and self-expression to the world.
To make it more vibrant, we heightened the saturation of red and blue while reducing the green. For a more enjoyable look, we opted for a navy blue, which complements the color scheme.
Icon
My initial idea when designing the icon for this iOS App was to make it look like a 3d badminton court.
Font
Open Sans
AbBbCcDdEeFfGgHh
Hi-fidelity mockups and design decisions
Approved – Create groups
Approved – Show player’s number and set players’ limits
Approved – Skill Level Bandage:
🧐 Tradeoffs – Group counter: Due to time constraints, we were unable to implement a counter in the app. However, we created a progress bar that indicates the number of players in a group to create a sense of urgency and encourage users to actively join groups.
Tradeoffs – Spending and expenses: Due to time constraints, we were unable to implement this feature in the app. Instead, we created a summary page that displays the total expenses for court bookings, providing organizers with a general sense of how much renting a court will cost.
Rapid Testing
Changed color coding after users misunderstood: red for busy groups and green for available.
Indicators were added to show available, booked, and selected courts. However, users ignored it during testing since it was too far from the bottom button. We relocated the section, and 5 out of 6 users noticed the the indicators.
Challenges
Time constrains
The major challenge in this project as we had to balance it with other courses
Participants schedule
With limited time after school, some participants couldn’t meet at the scheduled time, and we were unable to rearrange our schedule due to our tight timeline for other courses.
Summary
There were a few things I have learned from this project
User-centered
Prioritizing a user-centric approach is crucial as a product’s end users extend beyond oneself. It’s essential to listen to other potential users and avoid being too subjective to prevent bias and lack of focus on user needs.
Time management
As a first-time project manager of a team of four, I experienced both honor and anxiety. I delegated tasks to team members, held weekly meetings on Sundays, and allocated time for developers to study the library and improve their coding skills. We aimed to complete team assignments every Sunday to avoid additional meetings and were able to collaborate effectively.
Prioritization
“Good enough” is the key principle, and Agile methodology enables continuous improvement based on user feedback. It’s crucial to have a basic version of the product available for users to test and provide feedback, allowing us to address issues and solve the right problem. We learned to prioritize tasks and features since the initial scope was too big to finish within the given time.
What’s Next?
Although Courton was initially a school project, it has been well-received by local competitive badminton players as it fulfills their needs. Unfortunately, we were unable to implement the payment integration feature, which would have significantly improved the product and community experience.
If I had more time, I would have tested the app on a larger participant pool to gather feedback and successfully integrate the payment feature.
Date:
08/10/2019.