The New and Improved TTC Academy

Sammi de Guzman
SammDOT Blog
Published in
7 min readJul 1, 2016

The Virtual TTC Academy website has stuck with me as an example of what not to do with a website. I have been with the Academy for about a year and a half, and have seen all the pages lengthen and the menus become gradually more cluttered to the point of confusion. (Apparently it used to be worse.) Add to that the fact that the site is written in PHP, a language I have much disliked after so many frustrations I’ve had with it throughout my programming career.

For the past month or so, I have been working with Weilan, co-founder of the Academy, to incorporate some technical, design and layout changes to the site, including:

  • a new design that works as well on phones as it does on desktops;
  • rearranging the navigation links at the top of the page so it no longer scrolls past the edge of the screen;
  • similarly, rearranging the contents of each page to remove things that are no longer needed and to merge things that belong on the same page; and
  • modifying the “real-time” pages to remove the dreaded 10-second refresh. (This last one is still a work in progress.)

Thus, I am proud to present to you, as the new Head of IT of T2P Films, the new TTC Academy website! You can try it out yourself at the usual place: http://ttcacademy.t2pfilms.ca/

Partial mockup of the TTC Academy main page.

(Note that most of the images throughout this article are mockups and may not be completely identical to the contents or layout of the actual site.)

Navigation

The first thing to notice is the navigation bar. Some of the items on this bar may be hidden to you, depending on your rank. (Senior management members, for example, get to see a ‘Management’ section.) Each item may also have a dropdown with links to pages, some of which may also be hidden. No more accidentally clicking on a link, only to be brought back to the main page without any idea of what just happened.

The number of menu items has been reduced, to prevent it moving past the edge of the screen like it did on the old site:

The front page of the old TTC Academy site. Note that the page has to horizontally scroll to show the remainder of the navigation bar.

When you’re not logged in, the view is also different:

The navigation bar collapses as well if you’re on mobile. The three-line “hamburger” icon can be tapped to show the full menu.

Navigation bar in mobile view.

Run Operations

Everything that has to do with doing a run will be under this menu, for both operators and tower controllers.

Run Operations menu.

The Run Sheet works in the same way as before, but the design has been changed in the following ways:

  • The rows of trains are now grouped by run.
  • More importance has been placed on run numbers, so it will be easier to find trains in the run sheet by their run number.
  • Mobile view condenses the sheet into something that looks less like a table and more like a list for easier viewing on smaller screens.
Run sheet in desktop view…
…and in mobile view.

The design of the Tower Sign Up page is similar to the Run Sheet, except that in the mobile view, the tower name is shortened to a two-to-three-letter code for easier viewing.

Tower signup sheet in desktop view…
…and in mobile view.

Dispatched Trains contains the list of trains that are currently dispatched, as it always has, but now it also lets tower controllers dispatch new trains or clear dispatch sessions. This functionality has been merged from the former Dispatch page.

The Run Management page lets tower controllers view scheduled and actual times for trains, much like the old Tower Control. This also lets transit controllers manage simulator logins and control screen logins, as before.

The Submit Report page is almost the same as before, except:

  • All stations and storage tracks are now listed as start and end points to reduce input errors. This means if you start or end your run somewhere that isn’t typically used for short turns, you can choose from the list without having to type the station name.
Start and end stations now contain all possible options.
  • Turn Back Station is no longer shown as a field for one-way runs.
The Submit Report page for a one-way run.
The Submit Report page for a two-way run.

Training/Tests

This menu contains pages that pertain to training and tests. Booking lets employees book training or tests, and Documents contains documents such as rubrics and question banks for staff administering or evaluating tests.

Training/Tests menu.

Management

This menu contains pages for managing different aspects of the academy, in particular fleet, operators, tower controllers, etc. and allowing staff to look up records. Only management staff have access to this menu.

Management menu.

Meetings

The pages in this menu only pertain to meetings, specifically creating items on the agenda to discuss at the next board meeting and voting on those items. Only board members have access to it.

Meetings menu.

About

This menu is for pages that are about the academy in general, and do not fall into any of the other categories.

About menu.

Employee Info

The rightmost item contains information about you, the employee. Your badge number, ranks, earnings, things that used to just be on the main page, can now be seen everywhere. Transactions such as purchases and yard transfers and account-related actions such as changing passwords are also done through here.

Employee Info menu.

If you’re not logged in, this item will instead have a form to let you login with your employee badge and password.

Login form.

Home Page

The main page of the site contains the same information as before: announcements, scheduled runs, your operator and control records if you are signed in, TeamSpeak status. One thing to note, though, is that the Scheduled Runs section now contains links to the section of the run sheet for each run:

The scheduled runs list. Each arrow is a link to the corresponding run sheet.

Basic employee information, such as your yard, ranks, hourly rate, etc. have all been moved to the Employee Info menu.

10-second Refresh

This has been a constant frustration of mine when controlling during runs, especially with my rather slow computer. Sometimes it takes 3–5 seconds to load the control screen after a refresh, leaving not much time to react and change all the signals I need to change before it refreshes again.

The use of a background downloading technology called AJAX — which, if you have ever used the TOD, you are already using — means these pages will no longer have to refresh to load updated signal aspects and train locations, leading to a seamless experience.

This part is a work in progress, and will most likely be released after July 1st, but when it is it will really change the way we control runs.

Conclusion

The past few weeks have been interesting, working with what little I have of the website, trying to put together something that looks …okay, and the many hours spent at the library trying to get it working. It has been a lot of work for the two of us to get to this point, but the look on Weilan’s face when the pages updated is certainly rewarding.

Welcome to the new look of the TTC Academy! I hope you like it. :)

--

--

Sammi de Guzman
SammDOT Blog

Toronto area software developer and transit enthusiast.