NGSIS Website Redesign

The Next Generation Student Information Systems (NGSIS), is a portfolio of projects at the University of Toronto aiming to produce the next generation of internal systems.

For this project, I was responsible for redesigning the layout and architecture of this website to better suit the intended audience, and make it easier for them to find the information they need.

The audience for this website is mostly internal staff at the University of Toronto. We wanted to make it easier for them to find information about the different projects that the department was working on, as well as some achievements of those project teams and news that may be relevant to them.

Another goal of this project was to design a responsive and mobile-friendly website.

Once we knew who we should be designing for and what information to include, I created a small survey to send out to a few of the target users, to help us with the Information Architecture of the site.

At the same time, I started sketching some rough ideas of how this website could look like, as can be seen below.

When the survey results were finalized, I created a hierarchy and architecture for the website, after which I created some low fidelity designs to further explore some of the concepts I had in mind.

To align the design with the business requirement to bring attention to the Impact Report, we went with the design that was showcasing that more prominently. We validated those designs through some usability tests and then I created the final designs with the specifications for the developer. You can find a sample of those spec designs for different devices below.

The homepage on desktop

The homepage on tablet

The homepage on mobile

A desktop page with some facts and figures about the NGSIS portfolio. The visual assets are explained in text for screen readers.

The Facts and Figures page on tablet

The Facts and Figures page on mobile

The News page on desktop. The 2:1 layout is kept, placing a call to action to subscribe on the right.

The News page on tablet. A more vertical layout is adopted for better reading.

The News page on mobile.

Using Format