Redesigning Macalester’s MSCS Website

Bea Bautista, Ha Do, Julia Kispert, Kaleb Getu Gezahegn, and Matthew Trager

Link to our Prototype on Figma

Overview

Currently, Macalester College’s Math and Computer Science (MSCS) department website is a confusing mess. It is especially alienating for non-MSCS majors, so we decided to redesign the website with their interests in mind.

Step 1: Identifying Problems and Creating a User Group

Guiding Problems

This was an in-class project. Before the first day we got our assigned groups, we were tasked with identifying general problems with the MSCS website. These critiques were guided by using Jakob Nielsen’s 10 general principles for interaction. Some shared annoyances with the MSCS helped to guide our choice in what usability group to focus on. They are provided along with infractions of the general principles.

• Confusing News and Events: Accessing the department’s news and events is especially difficult, even for long-time users. A user must click and scroll through multiple webpages to find department news, and often the user would unexpectedly return to the homepage. There was a lack of information about how to attend MSCS events. (Help and documentation, Flexibility and efficiency of use)
• Hard to Understand Course Lay-Out: It is both difficult for a user to find the current courses offered by the MSCS department, and also access information about them–including teachers, times, major requirements, and general distribution requirements. Nor was there a way to compare or identify these requirements. Furthermore, there was no search option available. This leads to our next problem (Flexibility and efficiency of use, Recognition rather than recall).
• User Interface Inconsistencies and Gripes: methods of accessing information and ways of navigating around the website change throughout the user’s experience. Oftentimes, users just shift through text or use their browser’s search function to find what they are looking for. The navigation bar’s logic changes depending on whether the user is on the homepage or not. (Flexibility and efficiency of use, Aesthetic and minimalist design)
• Who is it For? There is a lesson here on the site, trying to do too much makes every different kind of user frustrated–whether they are majors, minors, non-majors, or faculty. User Group and Tasks

To ground our issues with the website and focus on a specific user group, we decided to focus on a user who is a non-MSCS Macalester student who has reason to check the department website. We imagined a hypothetical History major, Bob, who has a reason to use the MSCS website, but has no interest in being a major. He is a junior who needs to meet Macalester’s quantitative thinking requirement, and has a few peers in the MSCS department. From this specific case, we created four tasks that Bob might perform on the MSCS page:

1. Bob’s friend Jane is presenting their MSCS capstone project. Bob decides to check the MSCS website for information about where and when it is.
2. Bob hasn’t spoken to his normally talkative friend Alex. Bob checks the website to see if they lost that MSCS sponsored competition.
3. Bob needs to locate an ‘easy’ course to fulfill a Q3 requirement.
4. After Bob finds that Q3 course, he is interested in contacting the professor teaching it this semester.

With concrete tasks in mind, we proceeded to create prototypes of the website.

Step 2: Prototypes

Paper Prototypes

Once creating these tasks we looked to make multiple paper prototypes. We split out the 5 person group into two, to make sure we created a plethora of designs. While creating these paper prototypes we took care to make the interface of the website consistent and follow general rules of good web design. We initially looked at other, similar websites to compare and contrast the current MSCS website to identify consistent and useful interfaces. We also used some general practices that we learned in the classroom, like placing important information in the “F” shape that English speakers first scan, and trying our best to minimize “clicks”.

We created multiple designs for pages included in our user’s tasks, so that we could explore intuitive and effective ways for our user to navigate the site. These included a news page with sliding images, a calendar that showed upcoming events rather than a traditional schedule format, and a brand new course searching page.

Our paper mock-up of the new MSCS website

A paper version of the course catalogue. For this page, we focused on interactivity.

After these designs were completed, we performed cognitive walkthroughs and pretended that we were Bob. We noticed that to make the course schedule earlier to traverse, it would be easier to combine both course descriptions and classes, and provide filters to search through results.

User Testing
After our cognitive walkthroughs with the paper prototypes we also did user testing (in total we tested with 6 users). We gave our tasks to someone who fit our user group, and asked them to lead us through how they would accomplish each task. We found several areas of improvement. Users relied heavily on the search bar, due in part to the prominent search bar located at the top of the page. In general, the top was the first place users looked. In that prototype, the top of the page was representative of the whole Macalester web page rather than specifically for the MSCS website. So to maintain this feature (thereby staying consistent with the rest of the Macalester’s department websites), we eventually removed the search bar and emphasized information and navigation in the body of the webpage.

We were also surprised that users thought wording on the side bar was confusing, specifically the label “current students”. Seeing the label “current students” gave some the impression it was for current students in the department or current majors, and this made them avoid it. Here is a video of one of the tests we completed:

Here is a photo of a student testing out our product.

Step 3. Designing on Figma

Step 3. Designing on Figma

We proceed to create our prototype (with some minor changes) on Figma to make it appear more like a webpage.

Usability Prototype on Figma

However, we did not focus on aesthetic and design, but more on exemplifying the usability or function of the webpage. We tested both the Figma and paper prototype with 5 different people in order to get a range of different “personas”. From out tests we found that…

1. Users ran into the same confusion relating to the search bar and sidebar wording.
2. Our news page and home page seemed to deliver the same purpose. When users were tasked to look up recent news, they would end up just staying on the home page and pointing to the large square labeled “news” included at the top.

Based on our testing we made the decision to combine the news and home page pages. You can see our example and transition of paper prototype to Figma prototype below.

News/Home page transition from paper to Figma prototype.

Step 4. Considering the Results of our Testing

More Testing

We then made a new our final Figma design to account for the feedback we received. The final changes we made are:

1. Combining the news and home page
2. Changing the wording on the side bars
3. Removing the search bar
4. Solidifying a consistent design and aesthetic style
5. Creating a style guide based on the current Macalester website and colors, and importing the fonts included on their webpages.
6. Making all the buttons and drop down menus in a line on the course page, due to previous comments on our design that they were “disorganized” and “confusing”
7. Adding clear headers to all course sections

We also learned that the orange and white (white writing on top of the shade of orange in the Macalester style guide) colors we used were not accessible through all users–specifically for partially blind users. We acknowledged and updated the color scheme by darkening the shade of orange on our final design. A photo of our final design is located in Step 5.

Feedback From Classmates

We also received advice from our class, which we decided to take into account for our final prototype.

1. Although our prototype is primarily for non-MSCS majors, our courses page will still be used by a variety of users, such as majors and professors. As a result, we decided to add another section on our courses table called “major requirement”, which will show the user which major the given class will count towards.
2. We also included a button for students to look at previous schedules, though we did not prototype this page our assumption was that it would look like our current page, but including every other class that has been offered once before at Macalester.

Below is a photo of the feedback we received from our classmates.

Sticky notes representing feedback from classmates

Step 5. Final Product

Final Re-Design

In the end we believe to have adequately created a prototype that allows for easy completion of the specified tasks by our chosen, non-MSCS major, user group. We didn’t account for or prioritize prospective students, faculty and current majors. If we did we might have placed more emphasis on post graduate opportunities, abroad programs, and alumni network. We think that our prototype excels in displaying what is currently going on in the department, how to reach professors, and classes but it lacks information about current and postgrad student opportunities, and previous class information.

Resources

Experience, World Leaders in Research-Based User. “10 Usability Heuristics for User Interface Design.” Nielsen Norman Group, 15 Nov. 2020, www.nngroup.com/articles/ten-usability-heuristics/#poster.