Sports Booking Platform
Revamping Hong Kong government’s sports booking platform for better wellbeing
Project Summary
I redesigned the Hong Kong’s government Community Recreation and Sports platform, which is run by the Leisure & Cultural Services Department. This platform allows Hong Kong residents to book and enter balloting tickets for highly subsidized recreation and sports at local gyms and water sports centers, e.g. for yoga, dance, windsurfing, sailing and many others.
Having used this service a few times to book water sports, I found there was much improvement for the website’s user experience and user interface. The overall interface was difficult to navigate for a first timer, and the service design was outdated, relying on snail mail for communications and cheques for payment. It was ripe time to disrupt this service, and I decided to revamp the platform.
Methods used: usability testing, user interviews, wireframes on Overflow, hi-fi prototyping on Figma
Role: UX and UI designer
Problem Statement
Hong Kong is a playground for sports lovers of all ages, thanks to the number of public gyms and water sports centers, as well as the proximity to nature. However, registering for public sports programs is difficult due to its outdated service design and low website usability.
How might we improve public access to HKSAR government’s leisure and recreation services?
Before
After
User Research
To gather feedback from users about the current website, I reflected on my own experiences and did 2 usability tests with friends who were also keen on learning kayaking and windsurfing at staggeringly affordable prices. I asked them to try booking a class online by themselves and asked them questions about their experience afterwards. In general, feedback was mixed:
Although they appreciated the low cost of the programs, the booking, confirmation and payment process was frustrating. Moreover, since the booking system was a lottery and each class had different people every time, it was difficult to build a sports community.
Users desired having a platform to meet other users to do sports together, since the lottery system meant that students in each class would be different every time.
Feedback on the Usability & Service Design
Insufficient Help and Documentation
“Why is information about eligibility of the program located on a different page than the program information page?”
Outdated Designs and Poor User Flow
“The page looks really outdated, and the website’s flow just isn’t logical.”
Excessive Task Completion Time
“I don’t get why we have to submit one application per sport per location, even though it’s all on the same website. If I want to sign up for three different sports at six centers, I have to submit 18 different applications!”
Outdated Service Design — Payments
“It is 2019. I can’t believe they mailed us our results through snail mail. And that I can’t pay by credit card. They only accept cash or cheque!”
Competitive Analysis
LCSD Website
Overwhelming & dated visual design and difficult to follow for first-time users
No overview of all courses available
Lacks clear call(s) to action - unclear what the next step is
AppySport
• Classification into classes (課堂) and experiences (體驗) corresponds better with users’ needs
• Photos are visually appealing and provide an overview of classes
• Call to action (了解更多) is made very clear
User Journey - Happy Path
Based on the usability tests and interviews, I summarized all the pain points in the booking process in a user journey and proposed the happy path with all possible touch points.
User Flow & Wireframing
User Flow
After completing the user journey, I set about developing a better user flow with improved usability using overflow.io. I really enjoyed using it - it was self-intuitive and made for a user friendly experience. The user’s main task was to book a sport through the website. This is the happy path that each user would take ideally.
Wireframing
My user flow was complete, so I created paper prototypes which was later translated into a lo-fi wireframe on Figma. I tested it out with a few friends. Their feedback was positive, citing the improvements in user experience and intuitiveness of the layout. In terms of user heuristics, there were marked improvements in visibility of system status, stronger match between system and the real world, and flexibility and efficiency of use for first-time users.
UI Style Guide
After confirming the overall site layout and user flow, I developed a UI style guide. I chose a light blue palette because blue is a color that is seen as beneficial to the mind and body, and signifies wellness and recreation. Since users also remarked that the LCSD logo looked outdated, I also gave the logo a modern face lift by adopting elements of the old logo and incorporating the new color scheme.
Final Prototype
User feedback of the final prototype was overwhelmingly positive, with many remarking that it would be hard for them to go back to the original version.
Click on image to access the prototype
“It is much cleaner and clearer.”
“The flow is much more user-friendly. I like it! It’s really clean and easy to read.
Lessons Learned
Online and offline experiences should be seamless in order to allow for the best user experience.
Although I believe that the revamped website is a significant upgrade from before, the offline service design must be reformed. There should be a greater variety of payment methods to facilitate citizens of all ages to use the service, including credit card, mobile payment, checks and cash.
Improving people’s lives can be done very simply.
By making sports services more accessible to all, the Hong Kong government makes it easier for citizens to live a healthy life, helping Hong Kongers to continue having one of the longest life expectancies in the world.
Once you revamp a website, it’s difficult to go back.
Now, when I try booking my favorite sports on the original website, I can’t help but fixate on all the usability issues and ways in which its structure doesn’t correspond to common mental models. Revamping a website has also taught me what makes a good website: allowing the user to achieve his or her tasks in the most efficient way possible.