cshen.ca

Having spent two weeks navigating the slow and cumbersome goSFU system in search of courses to take next semester, I’m now entirely frustrated at the system for being inexcusably slow and hard to navigate, as well as lacking in basic functions which make registering that much easier. Since I have some free time on my hands, I decided to experiment a bit and see if I can design something that’s more workable, and while I’m at it, make it look as if it belonged in 2009.

I should mention right off the bat that this is an experiment only, and does not represent a viable design for goSFU. There are several noticeable oversights that reflect the quick-and-dirty nature of the design, which I didn’t bother fixing because well, it’s just an experiment.

Note: If you only want to see the design and don’t feel like reading the explanations, skip to the very end.

I was only really interested in the course selection aspect, but it would be rather weird to do a redux that doesn’t even include the homepage, so I laid one out.

I tried to maintain SFU’s brand identity by using the same standard header as other SFU websites. Admittedly, I didn’t stick to the standard that much, replacing the campus links (Burnaby, Surrey, Harbour) with navigation links instead. The overall colour scheme is taken directly from SFU’s web guidelines.

The new header navigation [1] takes the place of the current sidebar, which has the same main links but also links to subsections. Since there’s already index pages which display each subsection, the sidebar is rather redundant, especially since it currently requires two clicks to reach anywhere anyways.

Instead of simply listing courses the student is currently enrolled in, which is mostly useless at conveying a schedule, I pulled the weekly calendar out to the front page, this is the largest section on the homepage and commands the most emphasis. The calendar lays out one’s schedule in a visual form and the temporal relationships between classes are clearly presented. The details of a course is still accessible by hovering upon an item on the calendar [2], which will pop out a bubble with all the relevant information.

Note: in the mockup all three cmpt120 blocks (but not cmpt120l) should be highlighted blue, since it’s a 3 part lecture.

The next most prominent section on the page is the Finances section. This is now placed beside the calendar, instead of hidden at the bottom of the page, since students would presumably care a lot about how much money they owe the school. The sidebar also contains one’s personal information, with a reduced emphasis than before.

Enrolment links and information is placed just beneath the calendar, in the main column. It is placed lower on the page because it’s only really accessed once every four months, having a wider section could also make it more useful, such as class searching directly from the homepage[3]. The search box would search the immediately upcoming semester and accept a variety of inputs, such as “easc101″, “earth sci”, “earth science 101″, or other combinations.

Now onto the page that I really wanted to redesign: the course selection page.

The current goSFU list is just that – a list of courses, in alphabetical order, with no advanced functions of any sort. It’s a pain to navigate because it takes so long for each page to load, and revisiting courses to get details is a pain in the ass.

My goal here was to make it as easy as possible to search for, revisit, and decide on courses to enrol in. Since I don’t have to worry about accessibility in this mockup, I worked off the assumption that it’ll rely heavily on AJAX to speed up the interface.

Instead of a screen that prompts the user to select the semester and choose between list or search, the system would automatically assume that the user is looking at the immediately upcoming semester. A dropdown would be used to select other semesters, as well as enabling search functionality (which, needless to say, would also be AJAX-driven). The user also chooses departments via dropdown, instead of the current list of clumsy alphabets.

Beneath the semester selection are two check boxes [1]. One hides courses that the user is ineligible to enrol in, either due to lacking appropriate prerequisites or other limitations. The other hides courses which conflict with courses that the user is already enrolled in, so every course which is displayed can be enrolled in.

To the side is a mini-calendar with shaded boxes to indicate courses that the user is already enrolled in. Like the main calendar, this visually represents one’s schedule and simplifies the decision-making process.

When the user hovers over an entry in the course list, two things happen. First, a link appears and allows the user to add the course to the ‘Shortlist’ [2], this would be a shopping-cart style list that contains courses the user has marked. The shortlist function attempts to minimize the amount of re-navigation the user has to perform during the decision making process. A link to the shortlist on the homepage (I didn’t depict it) would give the user easy access to all the courses they’re considering. Second, the mini-calendar would shade in the time period during which the course is offered [3], in blue if it does not conflict with courses the user is already enrolled in, and red if it does conflict. Lower on the sidebar, the exam date of the course would also appear (same blue/red colour scheme) slotted in between existing exam dates by chronological order.

Note: I neglected the fact that some courses are offered in multiple sections while doing this mockup. This would entail some reworking to accommodate, but shouldn’t pose a big threat to the concept.

In the spirit of making things easier on the student, there is an advanced search function right beneath the department selection.

This offers advanced filtering functions such as searching for multiple departments at the same time, as well as filtering results by when and where they’re offered [2]. Like normal selection lists, it is possible to add or remove multiple departments at once by holding shift or control while selecting [1]. This settings menu could host other advanced searching functions as well.

Note: forgot to draw the scrollbar slider.

Pages that tie deeply into course selection may also benefit significantly from a redesign like this, whereas the other more obscure pages like updating your personal information don’t have much to gain from an altered layout. I didn’t bother mocking up other pages because most other pages would either only benefit from a collection of minor changes (which I wouldn’t spend the time on for a mockup), or are easily imagined given the existing mockups (like the Shortlist page).

To reiterate what I said at the very beginning, these are only mockups, and in no way represent a viable design for goSFU. They only showcase my vision for what a far more usable goSFU might look like, broadly speaking.

You can see the full-sized SVG mockups here:

• Homepage
• Course Selection
• Advanced Settings Panel