In this six-week project for a senior UI design course our team designed a concept app called Safe Sports. Safe Sports is an app designed to help people stay safe during COVID-19 while still encouraging physical activity, through a booking system to use sports courts around the City of Vancouver and prevent overcrowding.
Besides contributing to the discussions and decisions on my team, I worked on making the high-fidelity prototype, interaction design, and conducting user interviews.
Chamira Perera, Zoe Dao-Kroeker, Jenny Chen, Pradeesh Motha
Defining the problem
In the beginning of the year 2020, the whole world came to a standstill due to COVID-19, affecting everyone's lives in every aspect possible. Considering this situation as our domain for the project, our team researched an activity of a general Vancouverite's life that is greatly affected during the pandemic. Through surveys, we found out that most people missed doing outdoor physical activities.
Vancouver is home to over 150 outdoor playing fields where players can come and use the facility on a first come first serve basis. During summer, these courts can become overcrowded and in this current situation, it is a dangerous hotspot for COVID-19 spreading. To solve this problem, our team decided to design Safe Sports; a booking system that encourages physical activity while following the safety procedures in place for COVID-19. This design involves a mobile app where users can make a booking and a kiosk where users can check-in at the sports court.
We began by building a persona for users who would use an outdoor sports court. We created a general user persona that represents a user within a larger age range and a park employee. Next, we outlined a user journey framework to visualize the steps a user would take to go play in an outdoor sports court. This helped us identify potential design solutions for the app.
We built low-fi prototypes on Figma to lay out the foundation of the UI and organize content within the pages. Once satisfied with the layout, we moved on to mid-fi prototype and conducted user testing with participants.
For usability tests we recruited five participants within the 20-55 year age group, all of whom have used an outdoor or indoor sports facility in Vancouver. The user tests were conducted individually with each participant, using the think-aloud methodology, where participants were encouraged to verbalize their thought process as they navigated through the interface.
Below are some of the common findings from the user tests:
Did not know how to navigate to view their bookings.
As a guest user, there was no status to indicate wait times in each court
Booked a wrong slot and was not able to cancel and undo the mistake
A participant pointed out that existing users have an unfair advantage of being able to change the amount of people when checking in at the kiosk
Participants were confused about the weather forecast on the homepage, as some thought it was not part of the app.
After analyzing our user test findings, as a team we decided to make the following changes:
Incorporate a new tab for a scheduling page so the the user can see a list of all their bookings.
Adding an option to indicate which courts are open in the guest login page.
Add a cancel option in the scheduled bookings page to give the user more control.
Remove option to chagne amount of people for the existing user at the kiosk check- in as it will also speed up their check-in process.
Redesign the homepage to include relevant content related to the booking system.
By incorporating the new design decisions, the team collaborated together to design the final interactive mock-up of the app and kiosk UI on Figma.
This was my first UI design project completed in an online environment. With collaborative tools such as Figma, our group thrived and succeeded in creating a final product that satisfied most of the user's needs. Our app's purpose was to identify a solution for people to safely enjoy sports in outdoor sports facilities across Vancouver in the current COVID-19 situation. By considering the provincial health regulations in place for large gatherings, we believe we have found a viable solution for outdoor activities, through our app, Safe Sports.