MyMadisonCollege
SAAS Redesign
About
MyMadisonCollege is the online portal for Madison College students. It is where they register for classes, pay tuition, see their schedule, and much more. Unfortunately, it is designed very poorly. Users are overwhelmed with options when they log in to MyMadisonCollege. There is a huge navigation sidebar with no organization or hierarchy whatsoever. A first-time user would have no idea where to start. Not only that, the site’s lack of color makes it unpleasant to look at. For this project, I set out to redesign MyMadisonCollege and make it more user friendly.
Process
I focused on redesigning the navigation, class search function and the dashboard. I was inspired by the UI of programs like Asana and Airtable, which have a very clean design with strategic use of color.
First, I organized the navigation and class search options so they would be less overwhelming.
I designed the class search results using my own experience and input from my classmates.
Currently, the class search results appear as a long list of each section under the header for each class (like the first image on the left). It is confusing and requires the user to click each option, then go back, in order to decide which class to add. There is a lot of repetitive information that users must scroll through, and I wanted to eliminate that.
Instead of making separate cards for each class section (image 2), I found a way to make a card for each class, with the sections listed inside it (image 3). This way, the user doesn’t have to scroll through a lot of redundant information, and they can see all the available sections for a class without leaving this screen.
Result
I built the preliminary wireframes in Adobe XD, then added color and styling.
I designed a cleaner dashboard, class search function, and search results page, in addition to organizing some of the navigation. There are a lot more features to MyMadisonCollege that I could redesign in the future and add to this project.
Click the button below to try out the XD prototype.
