Toolkit Design @ UBC Chapman Learning Commons
Redesign and implement an interactive learning toolkit template for the UBC website
Project Type
I worked on this project as the Learning Design Assistant at UBC Chapman Learning Commons
Timeline
May - June 2022
(80 hours in total)
My Role
Web Design
Usability Testing
Internal Web Meeting
Tools
WordPress
H5P
Project Impact
The toolkit template has been widely used across 40+ UBC Chapman Learning Commons webpages
A toolkit design stylesheet and instructions were created to ensure the design efficiency and visual consistency for future design works
Summary
The UBC Chapman Learning Commons (CLC) website provides learning resources for students to support their academic success and wellness. The student learning toolkits on the CLC website offer students self-guided modules, covering topics like wellness, academic integrity, research & assignments, and university essential skills. These toolkits incorporate multimedia elements, such as videos, quizzes, documentation tools, external resource links, and more.
In the summer of 2022, I had the opportunity to work as a Learning Design Assistant at UBC Chapman Learning Commons in collaboration with the Centre for Teaching, Learning and Technology (CTLT). My responsibility was to create a new template for the student learning toolkits in WordPress and H5P based on existing feedback from student groups and CLC & CTLT web team members. This template not only aims to replace the current design but is also intended to accommodate other future toolkit webpages.
Problems
The existing feedback from students and stakeholders (CLC and CTLT web team) is primarily related to the toolkit’s content design, aesthetics, accessibility, layout, and features.
Iterative Design
I started my design by using the “Thinking Critically” toolkit as a reference to create the new toolkit template. I refined the early design by gathering feedback through student questionnaires, engaging with stakeholders in weekly meetings, and conducting semi-structured usability testing with users.
Initial Design
Questionnaires
Questionnaires are a cost-effective method for collecting a wide range of student opinions within a limited time. Through a questionnaire, I distributed the redesigned toolkit to UBC students, inviting them to browse and utilize it, followed by answering a list of open-ended questions to share their experiences and feedback about using the toolkit. Some of the questions are:
Before you interact with the toolkit look at the section titles. When you see the “Share” section, what content do you think might be included here?
When you see the “Explore” section, what content do you think might be included here?
Would you complete the activity under “Apply”? Why or why not?
Questionnaire Feedback
Stakeholder Meeting
The design was also presented in web team meetings, where I engaged with stakeholders from CLC and CTLT. This allowed me to gather valuable feedback spanning visual design, layout design, content strategy, and considerations around information ethics.
Stakeholder Meeting Notes
Usability Testing
Following the feedback collected through questionnaires and internal web team meetings, I made adjustments to the toolkit to ensure that there were no significant issues on the website.
After that, I conducted several rounds of remote usability testing with students. During the session, I instructed the participant to complete some tasks on the toolkit website. Following each task, I asked about their experience and feedback about the task.
Usability Testing Feedback
Final Design
The final design incorporates feedback from usability testing and takes into account the accessibility and responsiveness of the H5P widgets integrated into the toolkit. In addition, I made sure that these widgets are compatible with the most commonly used web browsers.
Before
After
Before
After
Before
After
Before
After
Design Handoff
Along with the final design, I also created a design stylesheet guide and provided instructions for future toolkit design to ensure both visual consistency and design efficiency. The guide includes typography, iconography, links, design elements in all four sections of the toolkit as well as other necessary design resources.