Overview
SportsCan is an Ottawa-based sports organization that hosts a variety of sport related programming, serving athletes and coaches of all skill levels. Along with my team of fellow UofT students, we went on an information architecture redesign journey to improve the existing SportsCan website.
Team: Sophia Currier, Yiqun Fan, Minghuai Zheng
Deliverables Produced: Content inventory, user interviews, usability tests, card sort, IA schematics, lo-fi prototype, med-fi prototype, formal analysis report
Keep reading to learn more…
Redesign Process Roadmap
Articulating the existing IA of SportsCan.ca
🏐 Learning about SportsCan and their customers
🗣 Conducting usability tests and interviews
Tasks given to users included…
Finding more information about an after school program for your young child
Registering a volleyball program for an adult beginner
Signing-up for volleyball skills workshop geared toward rep players
To gain a better understanding of SportsCan users, we took the time to learn about the organization itself by speaking to employees and coaches.
From these conversations, we learned more about SportsCan’s missions and goals. We were able to understand the role of the SportsCan webpage in relation to the business and why it is key for their customers. The SportsCan webpage acts as the main hub for users to read-up and register for programming.
We then conducted task-based, think-aloud usability tests and interviews to 3 representative users.
Our findings:
Users liked the top-level global nav headings and the site’s consistent colour scheme
Users struggled with finding the right buttons, labels and subpages to complete their tasks
Sketching the new IA
🗳 Conducting a card sort
Using Optimal Workshop, we conducted a closed card sort to evaluate the effectiveness and user satisfaction with SportsCan’s existing global and secondary navigation
We conducted the card sort with 4 representative users:
2 volleyball players
1 sport coach
1 parent of a volleyball player
Users were asked to organize secondary navigation labels under top-level global navigation headers as researchers took note on their think aloud comments and recorded the session to observe facial expression and click-paths.
From our results, we discerned that users were content with the audience specific organization of the global navigation, but were confused about how to organize secondary navigation labels under top-level headings.
🏗 Proposing a new IA schematic
After analyzing the data from usability testing, user interviews and card sorting, our team devised a proposed IA schematic for the SportsCan’s global navigation. Changes included adding a new heading for coaches, as these resources were scattered throughout the global navigation, and changing confusing secondary navigation labels.
📝 Reporting major IA issues
In our report, we described 4 major issues that we wanted to address in our redesign as a result of user data:
Lack of consistency among subpages
Confusing Homepage as a result of poor organization and labeling
Missing navigational components (e.g. breadcrumb trails, global footer)
Subpar labeling in global and secondary navigation
Building a medium fidelity prototype
✏️ Sketching out a sequential storyboard
🖥 Creating our med-fi prototype
🌳 Results from usability testing – Tree tests
The graph above demonstrates that tasks 2 and 4 were completed successfully as users selected the proper primary and secondary navigation labels to reach the subpage they believed would allow them to complete their task. Users had issues with tasks 1 and 3 as a result of poor scenario wording.
After tackling the issues related to the global header labeling and organization, it was time to address the IA of subpages and of the homepage.
In our sketches, we outlined a consistent layout for all subpages related to programming and simplified the homepage to mirrored the audience specific organization of the global navigation. We then organized our sketches into a sequential storyboard and mapped out user flows for key tasks.
Using Figma, our team converted our sketches into a clickable, medium fidelity prototype and an accompanying sequential storyboard.
To check out the med-fi prototype of our SportsCan redesign in Figma, click here.
The final step in our redesign journey was to test the changes we made to SportsCan’s global navigation. To do so, we conducted a tree test with 7 representative users using Optimal Workshop.
This test allowed us to assess if the relabeling we implemented was helpful for users and improved the usability of the SportsCan website. Users were asked to navigate through a replicated version of the new global navigation on Optimal Workshop in order to complete 4 tasks.
Conclusions and Lessons Learned
🔗 The importance of integrating user & business goals
By taking into account the values and needs of a variety of stakeholders (such as coaches, players, the business owners themselves), we were able to make changes that improved user’s browsing experience from a information seeking perspective and e-commerce experience from a registration perspective.
📈The smallest changes can sometimes have the largest impact
Throughout our IA redesign, I was surprised to learn how small adjustments such as slightly changing wording for labels, or removing extraneous body text could make a huge difference in the effectiveness and efficiency of a system.