Testing for Usability: Redesigning Macalester’s Dreadful MSCS Website
By A’di Dust, Andie Walker, Dan Bially Levy, Isaac Wan, and Nicole Wang
In our first design sprint, we were given the task of redesigning Macalester’s Math, Statistics, and Computer Science (MSCS) department’s website, so that it is usable by a specific audience. Our target audience for this project was non-MSCS major students. After selecting our audience, we consulted with members of this user group, and chose three general tasks that they would want to accomplish. By orienting our website’s redesign to a specified audience, we were able to successfully achieve our goals of intuitiveness and accessibility.
Heuristic Evaluation
In order to analyze the MSCS website on an empirical level, our group individually performed heuristic analyses of the website. Using “Nielsen’s 10 Usability Heuristics” to guide our evaluation, we were able to determine some of the MSCS website’s main design flaws which we would address in our website redesign. Here are some direct examples from the website listed below:
Persona & Task Development
The next step was brainstorming some possible user groups for our MSCS website redesign. We chose to design for non-MSCS students, in large part because we knew various non-MSCS students who we could contact for user testing. In retrospect, this was a very biased choice — convenience sampling like this is a very flawed way to choose a user group.
We decided our persona was a non-MSCS student who owns a laptop and is looking to fulfill their general education requirements or a prerequisite for a class, next our group designed three tasks, each with a specific example, for them to complete.
Tasks one and two were fairly easy to come up with — through interviews with friends who matched the persona and some of our own thoughts, we discovered that non-majors mainly used the MSCS website to either find the prerequisites for courses or locate what MSCS courses fulfilled general education requirements.
As for the third task, one friend felt “the website gave him the information he needed at the time. However, they thought it could have been more helpful to know about what to expect from intro classes as a non-major, or what might pair well.” The last part, “or what might pair well” made us ponder on what MSCS courses non-MSCS students should consider taking as part of a potential field. This ultimately led us to develop the third and final task for the website’s redesign.
Here were the tasks we defined:
- Finding prerequisite(s) information for current and future classes (e.g. A Physics major needs to take Calculus II because it is a pre-requisite for one of their major classes, and they need to find out if there are any prerequisites and when it will be offered)
- Locating general education requirements fulfilled by courses, such as Quantitative Thinking requirement (Q1, Q2, or Q3) (e.g. A Theater major is looking to fulfill their Quantitative Thinking requirement with an MSCS class and wants to find out what classes they are able to take)
- Discovering information/advice about MSCS courses that pair well with a variety of majors or career fields (e.g. An English major interested in journalism wants to look into possible MSCS classes that would help them learn more about data science — something that might be helpful for a future career)
Cognitive Walkthrough
As soon as we finished our tasks, we ran through them in a cognitive walkthrough on the existing MSCS website. A cognitive walkthrough is the process of going through an existing design from the perspective of the designer’s user group in order to determine innate design flaws for redesign. This saying derived from the Cherokee tribe of Native Americans best encapsulates why we conduct a cognitive walkthrough:
You can’t understand someone until you’ve walked a mile in their shoes.
Using the specific examples we made for each task, we tackled each one with our persona in mind. For the first task, we found that we were successfully able to find the prerequisites for Calculus II, however, it involved several steps, as well as moving back and forth between different pages. The second task was more difficult, and it took several tries to get the information we needed on courses that fulfilled Quantitative Thinking requirements. Finally, the third task was unsuccessful. As we attempted to look for information on good course pairings for non-MSCS majors, we were confused by the names of links on the website and consistently did not find the information we were expecting to find.
Paper Prototyping
Up until this point, we had not done any prototyping because the designing for usability process focuses heavily on understanding what makes a “good” or “bad” design and using specific tasks for the user to design a cohesive prototype. In the Idea Lab, we came up with three wireframe prototypes that differed in layout, functionality, and flow.
For our paper prototype, we ended up using aspects from all three wireframe designs to create one cohesive paper prototype that users could interact with. Our home page design simplified the existing information on the MSCS website to include three quick links at the top called “Major Requirements,” “Department Class Offerings,” and “Advice for Non-Majors,” a menu with various links, an event calendar, and the department’s mission statement. If the user clicked on “Department Class Offerings” that would lead them to the next page we designed.
In the “Department Class Offerings,” we allowed users to filter or search for specific classes and each class listing showed prerequisites, general education information, which semesters it is offered, and a link to the waitlist.
If the user clicked on “Advice for Non-Majors,” that took them to another page we designed. In it, we took most of our design from the MSCS advice for specific majors page and combined it with some original design choices, such as including links to courses for general education requirements and a career field/non-MSCS major search engine for MSCS course recommendations.
Lastly, we designed a 404 error page for user testing, so that if a user clicked on any links that we didn’t design a page for we could pull up this sheet so that they know they are in the wrong place.
Usability Testing
Using this initial paper prototype, we were able to conduct our first user test and gain feedback on our paper prototype’s design as well as understand what design flaws there were.
Our first user was Galthazor* and their main critique of our design was the large number of popups and new screens — they also suggested it might be confusing for someone who is not very well-versed in technology. Using this feedback, we redesigned our paper prototype.
We included a breadcrumb trail in our redesign as well as a new class schedule page, so users could figure out what sections are being offered for that course in either the Fall or Spring semester for that school year. As for our “Advice for non-majors” page, we cut out the content from the original MSCS website and had the general education requirement section link back to our “Department course offering page.”
In the second iteration of our paper prototype, we wanted it to be clear to the user what they can and cannot click, so we underlined text that was clickable. Our second user, Cecilia*, thought that everything was mostly clear and she could easily adapt to the setup. However, she noted that the “Advice for non-majors” button label was confusing, and didn’t clearly indicate what would be located on that page.
High-Fidelity Prototype
Finally, we used Figma, a collaborative interative prototyping tool, to design our high-fidelity prototype. While this was the last prototype we made for this course’s first design sprint, by no means does it mean that it is a complete and finished product. Many of our prototypes continued to go through iteration because of the constant flow of feedback we received from users and other classmates.
The purpose of this high-fidelity prototype is to give stakeholders a glimpse into what redesigns could be used for the MSCS website as well as for us, the students, to understand the cyclical process of designing for a user group.
With that being said, our high-fidelity prototype incorporates most of what we previously showed in our earlier paper prototypes, but also includes interactive elements with some slight tweaks and a blue color redesign for accessibility.
The first small addition was to include necessary contact information below the menu on the left. The breadcrumb trail also now updates as the user clicks on a new page so that they can return to a previous page if needed. In “Course Offerings,” we decided to combine the previous class schedule page into the course descriptions so that users would not need to visit separate pages. Additionally, the filter bar on the right is already expanded to show all the possible course filters. We also used a color scheme based on Macalester’s website style, but omitted the orange since the primary orange used does not fit WCAG contrast requirements when paired with white, and instead focused on the blue elements.
When moving from paper to a high-fidelity prototype, our biggest change was redesigning the “Advice for Non-Majors.” We decided to rename the page “Career Resources” since it was more inclusive for all students, and we removed the qualitative thinking recommendations because users tended to look under “Course Offerings” rather than “Advice for Non-Majors” for general education requirements. We replaced this section with links to Handshake and MacDirect for students looking for internships or to connect with alumni respectively. The search bar to search for a specific major or career field remained intact with the added bonus being some sample search terms to give the user a better idea as to what they should search for.
Overall, we were happy with our final prototype design as it accomplished the three tasks we set for ourselves, while also being more accessible to users due to its blue color scheme. The main strength in our final prototype has to be “quick links” for students. This feature alone would make the original MSCS website much easier to navigate and gets students to where they want to be faster. The main weakness that we received several notes about after our in-class presentation was that the department event calendar takes up way too much space on the home page and contains no relevant or useful information for users.
In hindsight, we should have moved it to the bottom of the home page or at least added some events, but because it wasn’t our primary focus, we overlooked it as a general flaw. An ethical oversight in our final prototype comes from the “Course Offerings” page having a drop-down item containing more information. Web accessibility tools only recite information to the users as it is shown on the webpage. Therefore, having a drop-down item that hides important information about course sections on the webpage, makes these web accessibility tools unable to recite all the information on our webpage. This can be problematic for blind users who rely on web accessibility tools to browse the internet.
Conclusion
To wrap up, we learned about the steps involved in the iterative design cycle (analyze, design, build, test) as well as crafting a design that focuses on usability by developing tasks for a persona and conducting a cognitive walkthrough. Also using “Nielsen’s 10 Usability Heuristics” to analytically evaluate Macalester’s MSCS website served useful as it showed us some of the do’s and don’ts in designing for usability. If we could have given one piece of advice to our past selves while working on this project, it would be to conduct more user tests since the user’s feedback is invaluable to a designer and can make a real significant difference when reiterating a design.
If you are interested in viewing our final prototype for this project, please click here.
*Note: these are not the real names of our users. Instead, these are the names they gave us to respect their privacy.
