About the Timetable Builder Project
When this project was initiated, the University of Toronto had an old website where students would go to, to search for courses. It did not have all the necessary information about courses, and it wouldn't allow students to select courses and build a timetable.
Our new Timetable Builder tool aimed at changing this, and providing students with one place where they could explore, browse courses, and build their timetables.
I was the UX Designer for this project and I was involved from the initial research and business requirements gathering, all the way to the interactive prototypes and QA testing.
As the UX designer on this project, I started off by forming some proto-personas of the users of this new tool.
When we had an idea of who the users are and what they would like to achieve, I set up some interviews with a few students, to validate all these assumptions and start forming the initial ideas for a solution. The interviews included some questions about the students' needs and goals for finding courses and building timetables, as well as their experience with any similar tools out there.
These interviews helped us formulate the user stories that would guide us through the rest of the project.
When I had an idea of who the users are and what they are trying to accomplish, I started creating some quick wireframes in Balsamiq to run by my team and get feedback. This led to the first round of usability tests with students, to see which one of the concepts was more fitting for them.
Some designs can be found below. They show the three main components of this tool in different positions and layouts.
High Fidelity Designs, Prototypes, and Usability Tests
When we discovered which one of the initial designs was more fitting for the needs of our users, I went on to create higher fidelity designs in Figma. These designs were used to create interactive prototypes which I then tested again with users. For the prototypes I used InVision for the first tests and the Figma prototyping functionality for the rest. We ended up having 3 rounds of usability tests with users, each time iterating and refining the designs based on the results of those tests.
The application is designed to be responsive and accessible, following the AODA guidelines. Throughout the duration of this project, I have been in constant communication with the developers, as well as the business analysts to iterate, refine, and modify my designs to suit our technical and business requirements, without compromising the needs of the users.
Below you can find a few sample designs of the final product.
Tablet and Mobile
Due to the information-heavy nature of the Timetable Builder tool, the most efficient way to display this information on smaller devices, was to split the two main functionalities (course results and timetable) into two different tabs. This way the users can work on each one independently while having space to comfortably do so.
On tablet, many of the components and UI elements remain the same as on desktop, with the main difference being the introduction of tabs, as well as some slightly different spacing treatments.
On mobile, everything switches to a more vertical layout, with most components taking up the full width of the screen and the tables turning into vertical key-value columns.