Sport & Recreation @UofT
Helping student access sporting activities in a stress free manner
Imagine you are a busy student, you're stressed by the demands of university and you're just looking to relax. You decide to sign up for a yoga class to relax. You go to the UofT sport & recreation website. It should be super easy and quick right? Unfortunately not.
You struggle to find the yoga registration. When you do, you find out there are no yoga classes being offered anymore and no information about the next available class.
Why does the website have so many links? Why is there so much text? Where do you register? Frustrated, you leave the website. Maybe you'll try again later...or maybe not.
Students at the University of Toronto find it difficult to navigate through the Sport & rec website. Students frequently report leaving the website unable to register for sport activities and frustrated by the amount of text and links. How might we help students access sport and recreational activities at the University of Toronto easily?
How might we help users find information and register for sports classes easily? This was the challenge we were tasked with and we were determined to solve this problem.
The research process
Before we could redesign the website, we needed to understand the current specs of the website, how it worked and how the website was maintained. Having this information would help us understand what aspects of the website needed to be changed or improved.
I conducted a context analysis to understand how the business of sport and recreational activities is managed at the University of Toronto. I researched the stakeholders and how the website was managed.
Students at the University of Toronto
Faculty & staff
Alumni & community members
Faculty of Kinesiology & Physical Education
Faculty of Athletics & Recreation
Technological services are managed by the Academic & collaborative technology department (ACT)
Next, we conducted a content analysis to understand the content of the website.
Client Timeline Tools Team Platform Roles
University of Toronto October-December 2021 Balsamiq •Optimalsort •Miro Joanne Wong • Eva Jarowoska Web •Conducted card-sorting •Ran tree-test
•Nhat Tran Le •Yuxin Yan •Conducted context analysis
Based on our understanding of the content of the website, we conducted user research to understand how students use the Sport & rec website.
We conducted a survey followed by a usability test with the 4 participants. The survey asked the users about their experience, frequency and purpose of use of the sport & rec website. The usability test tasked users with signing up for an activity and finding an athletic location.
The results of the research showed that the sport & rec website was difficult to use.
To evaluate the information architecture of the website, we conducted a closed card sort ,using Optimalsort, with the same 4 participants from the survey and usability test.
The participant were to sort 20 cards into the 4 categories used on the sport & rec website.
The 4 categories were:
Registered programs & instructions
Competitive sports & clubs
Recreational workouts & activities
Results of the card-sort
The participants had difficulty with sorting cards into two categories: recreational workout & activities and Registered programs & instructions. Participants often placed items in these categories interchangeably.
Basic IA schematic diagram
After analyzing the content of the website and conducting the card sort, our team drew up a schematic diagram of the website so we could visualize how the website currently looks.
Insights from schematic diagram
3 themes emerged from creating and examining the website schematic diagram
The schematic diagram revealed some recurring issues:
Redundant information. Information is repeated several times and in several places on the website.
Complex labelling system. Terms that may be unfamiliar to users are frequently used with limited explanation.
Excessive links. You have to click on several links to get to the page you want to go to. This can be overwhelming and confusing.
Wireframing & Design changes
Based on our user research and understanding of the current sport & rec website, our team began to create preliminary sketches for our proposed website design changes.
Some of our proposed changes were:
Creating quick links. Students would be able to navigate to important pages using a set of links on the homepage. This would help improve wayfinding.
Creating a hovering menu on the homepage. This will help students see all the sport categories and subcategories in one place. Students will also be able to go the page they want easily.
Introducing a filter option. Students can filter by activity, facility & semester. This allows students to access information quickly.
Introducing a news reel. News and events are available in a reel on the right side of the homepage. This will reduce text and allow students to quickly view information.
Based on our sketches, I set up and ran tree-tests with our representative sample to assess the proposed information architecture of the website and identify any navigational issues.
Results of Tree test
I was surprised to discover that the tree-test was not as easy or intuitive as I thought it was. It was very surprising to see how different participants approached answering questions.
62% success rate- Overall, over 5 out of 9 participants were able to successfully complete the tasks.
57% direct success- this indicated the percentage of answers that were completed without backtracking and trying a different answer
Some tasks were answered more successfully than others.
Task 2 and 6 had a success rate of 66 % .Fails are indicated by the colors red and orange. Based on these results, we suggested some possible changes.
Task 2 tree-test
Task 2 had to do with finding out which school teams were competing. The "correct" answers were under the athletics tab and under quick links. However, 5 out of 9 participants clicked on 'events & conferences' instead of the intended 'athletics' or 'quicklinks'.
Based on these results, our team considered moving the football match schedule into 'events & conferences' instead as participants appeared to naturally check that tab.
Task 6 tree-test
For Task 6, the correct answer was under the recreation tab. However, 4 out of 9 users clicked 'Facilities' first. As a result, we considered moving 'Membership' from 'Recreation' to 'Facilities'.
Tasks 1,3 and 7 were challenging for participants. These tasks were related to booking and cancelling classes.
For tasks 1, the correct answer was under 'instructional programs' in the recreation tab. However, participants were confused about what category 'yoga' fell under and so selected 'drop-in sports' in the recreation tab.
For task 3, the correct answer was under the 'facilities' tab and 'quick links'. However, participants clicked on 'athletics'.
For task 7, the correct answer was was under the recreation tab. However, participants clicked on 'quicklinks' and 'facilities'.
Based on the challenges in answering the tasks above, we decided to make some changes to our proposed website redesign.
We decided to add more quicklinks that were useful.
We decided that we needed to clarify some terms such as 'drop-in sports' and 'athletics'.
Final IA schematic diagram
Our final IA schematic diagram incorporated our findings from the tree-test so we made some changes to our schematic diagram
Changes to IA schematic diagram
2 levels to schematic diagram.
Sports in 2 categories- 'Athletics-varsity &clubs' and 'Recreation'.
Bookings , Cancellations, Registration and membership pages moved under the facilities tab.
5 new menu items in a hovering menu- 'Athletics-varsity &clubs', 'Recreation', 'Facility & membership', 'COVID-19 protocol', 'Events & Conferences'.
5 quicklinks added- 'Book a class', 'cancel a class', 'Hours & locations', 'intramurals', 'fitness space reservation', 'drop-in sport activities'.
Separate menu item for COVID-19 Protocol.
Finally our team created mid fidelity prototypes on Balsamiq. This was a really fun experience for all of us as we enjoyed the iterative process based on the feedback we were getting from the user research.
How can students use our redesigned website?
Using the hovering menu
Student can see all sport categories & subcategories.
Bookings & cancellation
Students can quickly find this information under the facility & membership tab.
Using the search bar
Students can search for a sport activity or facility or location.
Students can navigate to commonly searched pages.
Using the filter option
Students can filter by sport, facility, or semester.
Events & COVID-19 policy
Students can view this information under the menu items.
With our mid-fi prototype ready, our next steps would be:
Running a usability test to see how users interact with our prototype.
Making iterations based on user feedback.
Build a high fidelity prototype.
1. Information architecture is important. Many of the students surveyed wanted to engage in sports but were discouraged by the poor organization of the website and way finding. Similarly, poor website organization is noticeable and may stops users from interacting with a website and interacting with your product.
2. Don't assume, Do research. It was very surprising to see ,from our tree-test and card sort, that people had different mental models for where to look for information on a website. Websites have to keep common mental models in mind for when people search for information. Without this, users get thrown off by new or unfamiliar website structures and this can be off-putting to them. This is why research is so important.