A photo of Delft University of Technology campus by Keith Myerscough

This article tells the story of My TU Delft; a design for a student information portal at the Delft University of Technology. Over the course of two years Jurgen Beliën and I had the chance to work closely with the university staff and students to untangle the web that was student information and come up with an elegant solution.

My TU Delft

Throughout the years that I studied at the TU Delft, finding the information I needed (grades, course information or timetables) always involved accessing many different websites. This jungle of pages, spread across different websites in different layouts, has become common practice and is the result of many single-purpose commercial products put into place.
Together with fellow graduate Jurgen Beliën I set out to improve upon this situation and came up with a new web portal for students; one place for all your study related information.

A collection of typical web pages a student has to access daily for its study information.

The information jungle

During a typical day as a student I would have to visit many different TU Delft web pages for the information I needed to know just to attend my classes. These pages all had different looks, various structures, often required a separate log-in and would even be on the oddest sub-domains (my favorites were ‘tas.bk.tudelft.nl’ for enrolling for exams and ‘osistud.tudelft.nl’ for grades!). Were all these websites really from one and the same university?

To make matters worse; a lot of the information I was looking would be available on several of the websites, and would sometimes even contain contradicting information. There was no real rule of thumb on what site should be trusted more over the other.

Will I find my curriculum on
Personal Calendar,
My Timetable or on Current Timetables?

And once you finally managed to find that piece of information you were looking for, the university managed to present it in a completely illegible way. The lectures for Architectural Reflections? Find them in FelS-IZ 4 (1.17) during weeks 4.1 and 4.5–4.6 … !
For some reason the scheduling software in use by the university did not use regular week numbers, but a custom ‘educational week number’ system that together with the location abbreviations required a true decoder ring to figure out where and when your lectures were being taught.

To decipher the curriculum you need access to calendar conversion table (!) and a list of location abbreviations

It was clear something needed to change. We set out to design a solution that students would actually enjoy using.

Design approach

Our philosophy is that there should be just one website, one log-in, one source for grades, course information, recorded lectures and curriculum information. No more seven browser tabs open at once; no more second guessing which information source is valid. It also shouldn’t matter how students access this page; the information should be easily accessible from anywhere and from any device. This website should be a personalised portal, providing students all the right information at the right time.
We decided to name it “My TU Delft”.

One website which accumilates information from multiple sources.

From the start we worked on the design from a mobile-first approach. This meant spending a lot of time figuring out how to simplify complex data sets such as timetables and study pogress reports. By forcing ourselves to make this information fit on a small screen, we could ensure this information would be readable on any device and helped us retain an uncluttered experience while scaling up to the desktop.

We also applied clear descriptive names for all the sections of the portal; ‘Grades’, ‘Courses’ and ‘Lectures’. These replaced product names such as OSIRIS, Blackboard and Collegerama, which are the proprietary systems the information is stored in. In our opinion students shouldn’t have to learn which products the university chose to store data in: Less time spent deciphering these titles and searching for information across websites means more time spent studying.

The home screen of the portal is structured around three principles of proximity; nearby in time, nearby in distance and near to me (personally). For each the most relevant information is bundled in a card, providing glance-able information and deeplinks to specific sections of the portal.

“nearby in time”
upcoming events

Upcoming

A student’s timetable is presented in an ‘upcoming’ list view; showing start time and location for the first few events the student has to attend. Each event links to the corresponding course page where the course description, course documents and lecture room location can be inspected. External events, such as lectures organised by the faculty or study associations, can be promoted to the students’ upcoming view as well. However the student will always keep control over which parties it want to stay subscribed to.

“nearby in distance”
geo-based information

Nearby

The university also has a lot of location specific information available across different website. As many devices are location-aware these days, it made sense to employ this data to enrich the information presented to students. As soon as a student walks into a faculty building they should be able to access information such as opening times and service desk contact details, but also dynamic data on the amount of vacant workstations and meeting rooms. Many of the buildings also make use of narrowcasting screens to communicate events and important messages. The slides presented on the narrowcasting screens would also be made available in the nearby card.

“near to me”
personal notifications and messages

Messages

The university communicates to students through many different channels; from direct e-mails and newsletters, to Blackboard announcements and news items on the website. We tried to streamline this by introducing a unified inbox and distinguishing messages from notifications by defining three types of messages:

- title
- title + action
- title + body

Messages with only a title that don’t require immediate action, will be shown as dismissible notifications. Messages that require an action will show up similarly, but will link directly to the relevant page within the portal. For instance a notification “Last day to enroll for exams” will contain a link directly to the enrollment page.
A few notifications won’t be dismissible by the student;

Messages with a title and a body, such as Blackboard announcements, will be treated as regular messages and collected in a universal inbox together with the student’s webmail.

Courses

Every course gets its own page which will aggregate information from different sources: the course description from the course catalogue, upcoming events from Syllabus (curriculum) and OSIRIS (exams), announcements and course documents from Blackboard and recorded lectures from Collegerama. Whether students navigate to this page via an event in the upcoming events list, via a grade in the study progress list list or via an e-mail from the professor: everything they need to know for a single course will be gathered on one page.
To make this happen, we had to choose which source would provide what information and ensure the right information would be mapped to the proper course. As the various systems use different naming formats and curriculum structures, this was no easy feat.

Grades

The grades pages combine both study progress and actual grades into a single view. The main grades page shows a visual representation of the student’s study progress across all tracks together with a list of recently received grades. From there a grade can be selected to see its position within a track. Within a track, the progress bar shows the breakdown per course, which helps visualising a students’ progress and helps identifying any missing courses.

Grades are very important during a study, but part of the learning process is sometimes failing a class or exam and learning from your mistakes. We feel it’s not the university’s place to patronise students by throwing bold red numbers in their face for failing an exam. Rather we choose for a constructive approach by showing passed exams in green. Failed exams are faded slightly as they do not count towards your study progress yet.


Of course all these designs are worthless when they can not be realised. Therefore we worked together closely with the university staff to figure out how to bring our vision to life.

The development proces

With a concept of one portal for all information, it is very tempting to just throw out all the proprietary products and replace them with the new portal. Though this is easier said than done.
First off, the the university has long-running contracts with many of the products like Blackboard, OSIRIS and Collegerama. Contracts that are not simply dissolved from one day to another. But apart from that, these products are not only used to read information, they are also used to create information. The first phase of the development is focused on allowing students to read and access their personalised information. This means we will continue to use the existing products to store and manage all the information.

To reduce the risk of contradicting information in third party apps we made the API unambiguous.

Using the API

Not having to replace the existing products is actually a blessing in disguise. Both requirements by law and dependencies of other systems dictate a large part of the current infrastructure. Rebuilding all this into a single new product that can replace the existing infrastructure is an almost impossible endeavour. Fortunately the university had already started work on an ‘open data’ project that would make a lot of information available to third party developers via a public API (Application Programming Interface) . This API will be used to serve as an abstraction to the exisiting systems, giving back results in a uniform manner. By designing the My TU Delft student portal as a first-party front-end on top of this API, we could collaborate with the API developers to match the requirements of the student portal and in the meantime help improve upon its structure.

When we started working on the project, the API was created to mirror the existing ecosystem: every product could be called upon individually for information. This meant depending which source an app developer would choose, their app could show different grades or course objectives. We didn’t want developers to have to make these decisions: they should simply be able to ask the API for ‘grades’ and the API should figure out where this information should be pulled from. It is the responsibility of the university to decide which information should be communicated to third party apps.

Together with the development team and the university staff we figured out which data we wanted to show in the My TU Delft student portal and used the design as a guideline for the information structure of the API. We made decisions on the proper sources for data like grades and course data, timetables etc. and decided on the format the API communicates in.

The refreshed mobile-friendly login screen

Single sign on

The first thing students will encounter when visiting the student portal, is the login dialogue. As My TU Delft was designed to work on any screen size, the login dialogue also has to work on mobile phones and desktops alike. The existing so-called Single Sign On login page is cluttered and confusing, but more importantly: it doesn’t scale to smaller mobile screens.

A refresh of the exisiting Single Sign On screen is long overdue.

For the new login window we designed something very lightweight; we simplified the login dialogue to the bare essentials and kept the branding to a minimal, keeping in mind this login screen will also appear in all sorts of third party apps that tie into the new TU Delft API. We also improved the copy by removing all confusing descriptions, links and warnings and bundling help information into a simple collapsable list.

The My TU Delft student portal will be developed in two phases. The first phase will focus on allowing students to access their personal information through the new portal: timetables, grades, course information and recorded lectures. Phase two will allow students to input data as well, making it possible to enroll for courses and exams through the portal, adjust preferences and manage book loans from the library.

During these phases, feedback will be collected from students which will be used to evaluate and gather ideas ideas for possible next phases.
When living up to the expectations, My TU Delft could be extended to the educational staff, allowing them to edit and enter data through the same website. Resulting in a truely uniform experience for all students and staff at the Delft University of Technology.