MelCourses
-> outdated UI
-> not much organization with the courses
-> lacks visual appeal
-> requires three different websites to search (CDCS), choose (Workday) and organize (Google Calendar) courses
-> description contents feel congested
-> could use some more organization
-> could use some visual cues to direct information
Since the engineering team needed a basic understanding of the layout we created some low - mid fidelity prototypes as source of reference. Given that our team has extensively interacted with the site, we had many ideas on how to construct the basic layout. This was an opportunity to create multiple versions of the site and begin communication with the engineering team. Through the use of heuristic evaluations we tried to keep in mind of how to maximize user needs and minimize design flaws. I was mainly in charge of the scheduler page, and we each consulted each other's designs in the process.
Interviews
After creating some prototypes and maintaining communication with the engineering teams, we conducted interviews for improvements. A preliminary site was launched and was used within the interviews. Questions were mainly contextual and allowed for us to understand user pain points. I was able to interview 3-4 participants who provided very thorough feedback. This feedback was mapped out with affinity mapping and allowed for us to visually organize improvements that needed to be made.
With a basic site up, feedback from engineering teams and interviews from our users we decided to construct user flows for the site. The purpose of this was to see how we could simplify the design for the engineering team while keeping user needs in mind. We decided to prioritize the pages users interacted with the most, and took out the five year plan. Something that I advocated for involved adopting the concept of "shopping" for classes. After some brainstorming sessions, we ended going with this concept and made the decision to have a seperate section to collect classes that would update the calendar page. This ultimately led to a simpler user flow, which improved the speed and implementation methods for all teams.
We mainly made use of the Chakra UI kit to create our component library as it created a simple finish that users seemed to enjoy. Since color coding allows for visual cues to organize classes and sub-requirements, we reproduced versions of the kit with various colors. For instance, red and green were used to highlight whether a class was open or closed.
Since the process of shopping for courses is mainly done with students, the marketing team thought we could include some kind of mascot that peaked interest when making posts on social media. A groundhog was chosen along with the colors of the University on the scarf. It was a quick way of catching the eye of potential users and opened a fun way to connect with the site.
Given the course descriptions were the most important for the directory aspect of the site, we made some important changes to make it more user friendly. First, the filter to the left of the descriptions were simplified so users didn't have to work through so many options when trying to figure out the class requirements. Additionally, the required sub-classes were color coded within the descriptions and the layout of information was spaced out enough where users weren't swimming through text. To build onto this "shopping" for classes idea, users could select the classes that would automatically get added to a schedule, they could have a cart of classes and visual display of schedules.
The second valuable page was the scheduler, so there could be quick visual displays of how classes would be organized throughout the week. I eliminated the large pop-up descriptions from the original design, as it was a bit unnecessary given how the user can easily go back and forth between the scheduler and course descriptions. This page was also given options to quickly add on courses to the schedule which is particularly useful for students who just wanted a quick visual display of classes for registration. Courses that were "added to a cart" remained on the right side of the screen for consistency and provided a visual space for students to add courses they might be interested in without stressing about whether or not it would fit in their schedule.
This was the first real project where I got a chance to work with a cross functional team that generated a workable product for release. The entire process of collaborating, communicating and designing was a huge learning experience. Some important highlights involved creating multiple designs for the engineerings teams, simplifying features and absorbing user needs with consideration of how realistically they could be implemented. If there was something I could've done differently, it would be including a few more opportunities for feedback from users. I would've liked to continue the process of showing a few more versions of the site, but time constrains and student schedules can be limiting. The next steps for now would to comb through feedback from the current version of the site and update as a way of up-keeping its presentation and usability.
