ActiveSG Website Redesign
ActiveSG is a national movement for sport by Sport Singapore and it provides a complimentary sports membership programme for all Singaporeans and Singapore PRs where they can use the website to book a vast selection of sporting activities and facilities.
This was a 2 week group project part of our User Experience Design Immersion Course at General Assembly. The objective of this project was to redesign an existing governmental website. My team focused on improving the booking process of activities and facilities.
I was the UX Researcher for this group project where I took the lead in conducting the user interviews. I was also involved in the ideation, usability test and iterations of the prototype
Platform
Website
Team
Hau Yee, Praveen, Derrick
My Role
Competitive Analysis, User Research, Usability Test, Ideation
Tools
Figma, Miro, OptimalSort, Trello, Google Docs, Google Sheets
The Challenge
How can we improve the experience of users using ActiveSG? The website provides a vast selection of sporting activities and facilities. We analyzed the current user flows and pain points looking for opportunities for the redesign and decided to focus on the following problem.
Users need to be able to find sports facilities readily and explore activities available so that they can make informed decisions to secure and manage their bookings.
Design Process
Discover
-
Background research
-
User research
-
Competitive analysis
-
Comparative analysis
-
Heuristic analysis
-
Usability Testing
-
Card Sorting
Define
-
Affinity mapping
-
Persona
-
User Flow
-
Problem & Solution Statement
Develop
-
Design studio
-
Sketching
-
Wireframing
-
Lo-fi prototype
-
Usability Testing Iterations
Deliver
-
Hi-fi prototype
-
Design system
-
Brand guideline
-
Design assets
Discovery
We conducted user interviews and heuristic analysis to help us identify the current issues faced while using the ActiveSG website. Benchmarking analysis was also done with four competitors to analyse their website best and common features.
User Research
We conducted user interviews with 14 individuals who book facilities and classes, ages ranging from 22 to 36years old. The goal was to understand the habits, behaviours, and pain points of individuals when it comes to booking an activity or a facility.
After the interviews, we organized our insights using an affinity map and these are the four main insights that we have gathered.
"I want a clear and intuitive booking process"
"I need detailed information on the facility or programmes before I book"
"I'm not aware of existing ActiveSG events or programmes"
"I have difficulties securing the time slot I want"
Heuristic Analysis
The team conducted a heuristic analysis on the current ActiveSG website by using Jakob Nielsen's 10 general principles for interaction design.
These are the top 3 usability issues the team has identified.
Consistency and Standards
Inconsistency in labels to guide users to Registration of membership, there is no clear indication of where to click for sign up. “Get Active” or “ActiveSG membership registration
Recognition Rather than Recall
Users are not able to edit inputs once they have clicked submitted as search form resets after each submission. Process has to be restarted
User control and freedom
Users are not able to edit their selection such as date or the location on the booking page.
Users have to go back to the facility page through the option to edit the facility and the timing is limited.
Competitive Analysis
A competitive and comparative analysis was done on the following companies. The main focus was on how activities are being booked and purchased, their organization of information, brand identity, and how they are encouraging users to book their facilities and programmes.
Through this analysis, it was observed that the competitors have a consistent visual identity throughout their website and they make the booking process easy for the users. We would like to implement the following insights during our ideation phase.
Insights to implement
Log in Button
Members are able to log in easily with a log in button on the homepage.
Filter Function
Filter function on their search page enabling users to instantly find their activity
Calendar
On their booking page, their calendar is showing the available classes for the day.
Booking History
Members are able to view their past booking to make it easier for them to book the same classes.
Define
With the research insights we have gathered, we used it to create two personas and user flows to guide us through the ideation and deisgn stages.
Personas
From the user research insights, we identified two primary personas. Jim Junkie, who regularly visits the gym and quick to decide on his bookings. Passive Ema, who browses for programmes or events and want to understand more about the programmes before booking it.
User Flows
Using the persona's we have established, we explored the current website and determined the steps that the user has to go through to book a facility or a programme. Through this, we uncovered that users had to go through many steps to complete their booking. We analyzed the steps and optimized the flow to reduce the number of steps for the user.
For Jim Junkie, he has to go through 9 steps to book a facility on the current ActiveSG website and after optimizing we have reduced it to 7 steps.
For Passive Ema, she has to go through 18 steps in order to book a programme on the current ActiveSG website. This is because once the user logs in, the selected programme is not saved and the user has to reselect the programme that they wanted again. The steps for Ema was reduced to 6 steps.
Design Studio
We conducted a design studio where we focused on the insights we got from our research and redesigning the website with a reduced number of steps. We combined our best ideas and created our final sketch which was then converted into a wireframe using Figma.
Final Sketches 1
Final Sketches 2
Design
After identifing the areas to focus on for the redesign of the website, we conducted a design studio to get ideas on how we should tackle these issues.
Usability tests were also conducted to help us uncover any usability issues with our design.
Iterations
Two usability tests were conducted to collect qualitative data of users’ journey to browse and make a booking for programme and to utilize past account records to make similar facility booking. These tests helped us uncover usability issues with our design.
Mid-Fi Prototype
Each participant of the usability test was asked to fill out a satisfaction survey which gave us a system usability score. On the first usability test using the Mid-Fi Prototype, we received a score of 84. One of the main usability issues is described below.
Main Usability Issue
-
5 out of 5 users didn't think that the “Heart” icon will take them to “Past Visit”
-
5 out of 5 users expected “History” to be found under their Profile page
Recommendations
-
“Heart” icon is too small and represents “Wishlist”. A dedicated profile page or dashboard was proposed for users to check all things related to their account and account management.
Hi-Fi Prototype
Based on the results from the first test, we created a Hi-Fi Prototype which received an excellent score of 91.5. Two main usability issues are highlighted below.
Usability Issue no.1
-
3 out of 5 users clicked on "Bookings" or "Bookmark" instead of "History"
Recommendations
-
The similarity between “Bookings”, “Bookmark” and “History”. All hints to users past or current bookings and contact points on the website. Combining history and bookings to one page was proposed to reduce the confusion.
Usability Issue no.2
4 out of 5 users had some issues with the payment type
-
2 users were unclear about their payment options
-
1 user usually wanted to pay by credit card but there was no option.
-
1 user didn't know that she had to select the payment type
Analysis
-
Payment descriptions were not familiar to the users. There is no error prevention message when the user did not click on a payment option. It is recommended to use users’ language to describe payment options
Final Prototype
Using the insights from the two Usability Test we have optimised and finalised our prototype
Key Takeaways
We noticed that there has been a lot of redesign projects on both the ActiveSG mobile app and website. For this redesign, we decided to refresh the mood and tone of the website. Taking a more fun and gentle approach to encourage users to use the website.
Through this project, I have learned that all assumptions must be tested and proven. As when we introduced a new feature, some users did not navigate the page as per what we have assumed.
Some of the next steps we would like to do:
-
Do another usability test to see whether our final prototype has improved from the iterations made based on tests one and two.
-
Make a responsive design for a mobile device