top of page

Sport & Recreation @UofT

Helping student access sporting activities in a stress free manner

free-macbook-pro-mockup-template_2x (1).png

Project introduction

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.

The problem

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?

Design challenge

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.

Context analysis

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.

Intended audiences

  1. Students at the University of Toronto

  2. Faculty & staff

  3. Alumni & community members

Stakeholders

  1. Faculty of Kinesiology & Physical Education

  2. Faculty of Athletics & Recreation

  3. Faculty Council

Technological infrastructure

Technological services are managed by the Academic & collaborative technology department (ACT)

Content analysis

Next, we conducted a content analysis to understand the content of the website.

Screenshot (329).png
Screenshot (324).png
Screenshot (303).png

 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                        

                                                                                                                                                                                                                                                  

                                                                                             

​

​

   

User research

Based on our understanding of the content of the website, we conducted user research to understand how students use the Sport & rec website.

Screenshot (305).png

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

The results of the research showed that the sport & rec website was difficult to use.

Screenshot (309).png

Card-sort

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:

  • Aquatics

  • Registered programs & instructions

  • Competitive sports & clubs

  • Recreational workouts & activities

Results of the card-sort

Screenshot (317).png

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.

Screenshot (322).png

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

Copy of Evaluation and Next Steps.png

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.

Tree-testing

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.

Screenshot (298).png

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. 

Screenshot (285).png

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

Screenshot (283).png

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

Screenshot (287).png

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'.  

Screenshot (292).png

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.

  1. We decided to add more quicklinks that were useful.  

  2. 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

Untitled Diagram.drawio.png

Changes to IA schematic diagram

01

2 levels to schematic diagram.

03

Sports in 2 categories- 'Athletics-varsity &clubs' and 'Recreation'.

05

Bookings , Cancellations, Registration and membership pages moved under the facilities tab.

02

5 new menu items in a hovering menu- 'Athletics-varsity &clubs', 'Recreation', 'Facility & membership', 'COVID-19 protocol', 'Events & Conferences'.

04

5 quicklinks added- 'Book a class', 'cancel a class', 'Hours & locations', 'intramurals', 'fitness space reservation', 'drop-in sport activities'.

06

Separate menu item for COVID-19 Protocol.

Midfi prototypes

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.

Quicklinks

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.

Next steps

With our mid-fi prototype ready, our next steps would be:

  1. Running a usability test to see how users interact with our prototype.

  2. Making iterations based on user feedback.

  3. Build a high fidelity prototype.

Lessons learnt

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.

bottom of page