Prettify Minerva

OVERVIEW

Minerva is McGill University's central student information system, a web-based platform where students can access their academic information. However, its design has remained largely unchanged since 2002, resulting in a dated interface that lacks modern visual appeal and user-friendly functionality. As a McGill student, I decided to embark on a journey to modernize the platform.

RESEARCH

To better understand issues with Minerva’s user experience, I reviewed feedback from McGill students on platforms like Reddit and reflected on my own firsthand experience navigating the system. I also gathered informal insights from classmates, many of whom expressed frustration with the layout, aesthetics, and unintuitive navigation of the platform.

THE PROBLEM

Minerva’s interface feels outdated, with dense information coupled with poor spacing, a dull aesthetic, and limited responsiveness. The small text and cluttered layout make it difficult to read and navigate, especially for first-time users. A redesign would aim to improve clarity, streamline the user experience, and make the platform more visually engaging and accessible.

INITIAL REDESIGN

I initially redesigned Minerva in December 2024 - January 2025, as a personal UX/UI project to learn Figma and explore a dashboard-style concept of Minerva.

REDDIT RESPONSE

I shared this redesign concept of Minerva on the McGill subreddit, which garnered over 70,000 views and positive engagement from the McGill community.

TOP COMMENT

One of the top upvoted comments suggested a Chrome extension to change Minerva’s appearance. I didn’t have much coding experience at the time, but the idea stuck with me. In May, I revisited it and built it into a real working browser extension.

CHROME EXTENSION

Following youtube tutorials and learning more about chrome extensions and the capabilities which I could achieve, my goal was to develop an extension which would change the HTML layout and CSS styling of Minerva’s pages.

Tackling this challenge one area at a time, I started off with redesigning the top navigation bar. Using JavaScript query selectors, I rearranged HTML elements, added new components, and replaced the outdated navigation with a cleaner, more intuitive layout.

CSS STYLING

Changing the CSS styling was the quickest and best way to bring life to the site, applying site wide changes like changing the font to Inter, changing heading and table styling, and more.

QUICK LINKS

From personal experience, I found that the main menu, which displayed navigation links with descriptions, wasn’t very useful. I wanted to improve this by adding a quick links sidebar on the right side of the main page, giving users an easy way to save and access frequently visited Minerva pages.

At first, I considered including this sidebar on every page, listing all active links without descriptions. However, that idea wasn’t very effective as it reduced the main content area too much leaving some pages feeling very cramped and didn’t provide much added value for the user. Ultimately, I limited the sidebar to the main menu, where it added the most value without disrupting the layout.

CHALLENGES

I faced a range of challenges from working around notorious DOM quirks and design constraints, to styling messy table elements, and even implementing a hide.css file to prevent users from seeing the original page before the redesigned one loaded. Despite these hurdles, I was able to develop a polished, user-friendly chrome extension.