Timetable Builder

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.


Initial Research

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.

The first proto-persona was of an undergraduate student who has just been admitted to their program, and thus are very new to the University.

The second proto-persona was of another undergraduate student who is in their third year of studies and is blind. This person uses a screen reader to navigate the web and needs a tool that would provide all the necessary information in a simple and easily navigable way.

This is a snapshot of the higher level tasks to be accomplished, and the lower level user stories that are part of each task.


First Wireframes

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.

Final Deliverables

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.

This design shows the Timetable Builder after a user has performed a search. The results are displayed in almost full-width, as we want the users to initially be able to skim through all the information easily.

The Timetable Plan at the bottom is a feature that lets users select courses and automatically generate a timetable.

This design shows the 50/50 view of the Timetable Builder, with both the results and the timetable showing at the same time. Users can find courses they are interested in and add them to their timetable at the same time, providing them an immediate visual idea of what their schedule could look like.

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.

The Results tab on tablet.

The Timetable tab on tablet.

The Results tab on mobile.

The Timetable tab on mobile.

Using Format