A Journey Through the Redesign of The MSCS Website
The Big Question: What Can Be Improved on the MSCS Website?
As a group of seniors at Macalester who take a lot of MSCS courses, our team had noticed we shared a general dislike for the MSCS website. Even though it had that cohesive Macalester theme and aesthetic going for it, it’s functionality left a lot to be desired. The unintended loops back to the home page, the multitude of similar information in different subsections, and that unpleasant main menu bar that everyone misses is just to name a few. So how could we solve those issues?
Heuristic Evaluation: A Step in the Right Direction
Our first step was to conduct a heuristic evaluation on the existing MSCS website to identify usability errors. After individual evaluations, we gathered as a team to review our findings:
- It’s difficult to find a specific professor and related information
- Locating recent news on the main page is confusing
- The course description page is full of repetitive information
- Excessive amount of scrolling while looking for a specific class
Based on these problems, we initially considered focusing our efforts on helping professors of first-year courses with students interested in MSCS to navigate the website. However, we recognized fairly quickly that it would be hard to flag them down for a usability test in the future and shifted our attention to the first-year students themselves.
Cognitive Walkthrough: Predicting the User Flow
With our target audience in mind, our next step was to identify tasks such a first year might want to carry out. For example, could they…
- Look for information on recent news in the MSCS department?
- Find out if COMP240 has prerequisites, and if so what are they?
- Find where their Statistics professor’s office is and what their research interests are?
Taking on the perspective of these students, we walked through how we thought they would try to locate such information in order to identify places of potential confusion, places of improvement, and places that we thought worked well already.
Generally, we found that finding recent news was the most difficult task, as the only available link led to events from years ago. Other relevant information, such as available courses, was available in easily locatable sections although it was had to find specific information. Further, the menu bar on the main page was incredible easy to miss and changed positions once you navigated off of the main page.
Based on these observations, we chose to redesign the main page, the faculty and staff page, and the course descriptions section.
Paper Prototypes: Bringing Our Vision to Life
We were now on our way to making our first prototypes! We began with two paper prototypes in classic pen and paper sketches. These laid the groundwork for how we wanted to organize the website and also helped us decide which features would aid our first years best. Both prototypes were very similar and included repositioning the menu bar on the main page and filters to help find specific information faster.
After synthesizing ideas from both paper prototypes, we moved on to create a third paper prototype that included interactive design elements and a more refined layout.
First Usability Test: Putting Our Designs to the Test
Now we could finally put our ideas and design to the test. For our initial usability test, we chose to have the user navigate through our paper prototype and to incorporate their feedback into our digital version. The user successfully completed our three design tasks, but not without issue: the user would sometimes miss features and then come back to them later due to the presentation of our paper design. Namely, the texture and color of the paper prototype was a bit funky: most of the colors we used clashed and the material of the paper made it hard to tell what was “clickable” and what was not. We decided to look into fixing the layout of the site in the event that the user’s confusion did not actually have to do with the paper prototype itself but more our design. We also noticed that at first the user missed the filter for the courses, and when we regrouped after the usability test we asked ourselves how we could make it more noticeable. These issues we would address in our fourth and final prototype — the digital prototype.
Second Usability Test: Putting the Digital Prototype to the Test
For our second usability test, we used Figma to create a mockup of our design. This included an adjusted layout from the previous paper prototypes for improved accessibility. The second usability tester successfully completed all three tasks and explored the pages as we expected. There was however some confusion when we asked them to find out about current news in the department. Did “current news” refer to department events, speakers, student awards? Did the answer to this question affect where the MSCS news was placed? After a discussion of what it meant to be “current news,” based both on the usability testers’ expectations and our own understanding, we decided to use a photo slider on the main page for general MSCS news and for events. We thought that seeing advertisements for events in the department would be meaningful for a first year breezing through the site.
Accessibility Test: A Further Step to Tuning Our Design
We also used the browser plugin WCAG to run an accessibility test on our digital prototype and saw that most of the problems came from Figma’s interface rather than our own design. Despite this, we still made some adjustments to text size in various places to ensure the content was easier to read. We also briefly discussed if we were overlooking certain perspectives or ethical concerns early in the design process. We couldn’t find glaring examples of this, but kept this thought in the back of our heads while we were building out the design. We stuck with the carefully planned and already provided Macalester style guidelines for consistency in terms of fonts and color.
Design Delivery: Combine Everything Together
Our final result was built on the feedback we had received from usability testing and a peer critique. Although we incorporated a lot of the feedback, we also learned that not all feedback needed to be followed. For example, one such feedback suggested providing information about whether or not a particular course was required for a major not only in Declaring a Major or Minor, but also in Course Descriptions. However, after a discussion we realized that this only fed back into the issue of the website being bloated with too much repetitive information. Further, our second usability tester sought such information in Declaring a Major or Minor and not the Course Descriptions page. This was one of many lessons we took away from this design experience.
Analysis & Future Plan
Our redesign improves on the original website in many ways, including the ability to filter classes and professors, saving time and enhancing the MSCS department experience. However, the switch from main bar to side bar when you’re in a specific page remained a hot topic. We got the most feedback from that and so in the future we would choose one, either side bar or main bar. Another thing we would add is a more robust filter that allowed more nuanced queries, such as courses required for selected majors. We would have also liked to run more usability tests to get a more comprehensive view on our Figma prototype. Overall, we learned how important a full design experience can be. Although at first we underestimated how crucial the early sketches and plans were to the actual product (and the paper prototype was a bit funky to be fair), our experience through this process has shown us that the early steps become the building blocks that put everything else into place.
Sources:
World Leaders in Research-Based User Experience, Jakob Nielson. “Heuristic Evaluation: How-to: Article by Jakob Nielsen.” Nielsen Norman Group, https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/.
