Bay Badminton Center
Redesign the workflow and interface for the signup kiosk at Bay Badminton Center.
Type
Conceptual project
Role
Interaction design
User testing
Tool
Figma
SUMMARY
This is a project working with Bay Badminton Center. BBC provides indoor badminton court rental services and professional badminton training at multiple locations in the Bay Area. Their badminton court signup system has not been updated in 10 years, BBC wants to give a new look to it and improves the whole experience at the badminton center. The goal of this project is to make the badminton court signup process easier and faster.
How to make the signup process easier?
Empathize & Understand

Pain Points
Pain Point 1:
Information on the current interface is unorganized.
The badminton courts are sorted by assigned court numbers. However, each court has a different purpose: Timed Court, Timed Court with badminton shoes only, Challenge Court and Reserved Training Court. It would be easier for users to pick a court if the interface sorts the available courts for different purposes.
Pain Point 2:
Signup flow is counterintuitive.
Besides using a keyboard to enter username and password, this interface requires users to click through the alphabet in one row. After entering the username, a tiny box for password (pin) prompts at the corner.
  • Although the courts are listed on the main screen, to get started with the signup process users must first login via the ‘Search by Login’ bar at the top of the screen. With that said, users pick a court and keep the number in mind > login > find the court in mind and select.
  • In addition, users sign up as individuals, not a party; the signup flow is explained with this figure.
Pain Point 3:
Information is truncated and space is not well-utilized.
After login, a window for court selection prompts with a mysterious color code. Additionally, the information on the screen is truncated and hard to read.
Pain Point 4:
Content hierarchy is unclear.
Current interface doesn’t provide a pleasant color combination for reading or a clear information hierarchy which leads to a longer reading and process time for users.
Design Goal
With these insights, I have a clear design goal:
To restructure the information and workflow, in order to shorten the signup process and deliver better experience.
Users
The badminton center covers a wide range of users, from teenagers to adults and seniors. We don’t expect that everyone who comes to play badminton is tech-savvy. However, we hope everyone has a pleasant, leisurely time at the badminton center.
Success Metrics
  • Intuitiveness: Users should not spend time on learning how to use the signup tool.
  • Efficiency: The average signup process should be shorter than the current process.
  • Compatibility: The interface should be compatible with all devices, regardless of the availability of the desktop computer at the reception or portable tablets around the badminton center.
Design & Iteration
New User Flows
To achieve the goals of an intuitive and efficient user experience, I created a new user flow that allows users to sign up as a group (from 1 to 4 players). The new user flow eliminates the repeating steps which required users to go back to the main screen and select a court while signing up multiple players.
Sketches
Visualize the layout.
Color & Typography
To align with the leisure and recreational themes of the badminton center, I kept the design minimal and neat. Along with the teal and graphite color palette, I used a san-serif font - Roboto as it is clean and performs well with a heavy-text environment.
Mock-up
Main Screen
  • Courts are sorted by types and highlighted with different colors.
  • The number of players Waiting is shown by the number of groups instead of the number of individuals.
  • The timer of the current players on the courts is enlarged; the timer will be displayed in red when less than 10 minutes left. It provides a better vision for the next group of players to get ready.
  • Instead of displaying all the names on the waitlist, only the names of the next group will be displayed on the screen. The purpose is to eliminate excessive information and to provide a clean look.
Signup
  • After selecting a court, a form will prompt for registration. Users are able to enter credentials for all players, an option to keep all players within this group is available as well. If users do not check the option box, the system will merge available players to form a group of four.
  • In addition to the current players of the selected group, the complete waitlist of the selected court will be displayed on the left. The estimated available time for each group will be listed as a reference.
Edit the group
  • A Remove button will be available after a player is added to the group, it allows users to change the players of the group before joining the waitlist. However, there is no mechanism to change or remove the group when it is confirmed to the waitlist as it is restricted by policy of badminton center.
  • In addition to the current players of the selected group, the complete waitlist of the selected court will be displayed on the left. The estimated available time for each group will be listed as a reference.
Usability Test
I brought the prototype to the badminton center and asked 10 users to tryout. To measure the outcome, the users were asked to perform a signup process of a group of four on both interfaces (the current one & the new prototype), and both processes were timed for comparison.

  • By observation, users followed the new flow well and didn’t raise questions the first time using the new interface.
  • The average process time reduced from 1:20 to 00:55, marked a significant change in efficiency.
  • The enlarged timer is helpful when selecting a court to sign up.
  • The estimated wait time feature provides a time frame for players, informing them when their reserved court will be ready
CONCLUSION
I really enjoyed redesigning the interface for Bay Badminton Center, since it is the first real life project of mine. I can’t wait to see the deployment soon.

Due to limited time and resources, I made a few assumptions while designing this interface. It is good practice for a designer to understand more about the users’ needs and consider them in advance. If I had more time, I would have completed an A/B test to confirm my decision.
More Projects
StudyBuddy
Study Place Finder | iOS Application
Finding a place to focus and boost up your productivity. Gathering the people with the same interest and encounter.