Сase study: A fresh look for the college major website

We, current students and aspiring UX designers at Macalester College (Saint Paul, MN, USA) — Abby, Anatoliy, Johan, and Sheida, decided to tackle the responsible task of redesigning our department’s website to make it more appealing to first and second-year potential majors. So how did we do this?

What is the problem?

What do you imagine a school’s department website looks like? According to ChatGPT, “like the overall college website, a college department website should be user-friendly, informative, and visually appealing, with clear and concise information presented in an organized manner.”

We found that the Mathematics, Statistics, and Computer Science (MSCS) department at Macalester College does not quite meet these criteria.

As you navigate to the department’s website, the first thing you see is the blue-tinted image and an inspirational quote. Would this motivate you to become a major?

As a team consisting of current Computer Science majors, we were pretty disappointed with what our department’s website looks like. We wanted to solve it by creating a more intuitive and user-friendly look that primarily appeals to first- and second-year students still thinking about declaring a major.

Let’s get to work: Ideation!

For this stage, we conducted an individual heuristic analysis of the MSCS website. Shortly after bringing our insights to the group table, we found that:

• The website is not consistent with placing elements, such as the side menu
• Lack of visuals and personalization prevents recognizing necessary information
• Overall aesthetics need to be improved for a better user experience

We then went to Miro to brainstorm who our target audience was. This would allow us to find more specific ways to address the problem.

Miro is a great place to store all your brainstorming ideas in one place

After clarifying our target audience, the problems we want to address, and proposed solutions, we were ready for the next step — prototyping!

Let’s Prototype!

Once we had the information about what we wanted to build, we met at our school’s Idea Lab: a creative space for entrepreneurs and innovators to experiment with different materials. Perfect for paper prototyping!

Armed with an unlimited supply of glue and paper, we came up with a few paper prototypes that reflected our primary goals: to create a visual and interactive experience for first and second-year students wanting to declare one of the majors within the MSCS department.

We focused on prototyping two pages:

• Homepage for the department
• Computer Science major page

Here is our homepage prototype:

And our Computer Science major page prototype:

Time to get out there & talk to people!

As we finalized our prototypes, we had two goals ahead:

• Conducting usability testing on paper prototypes
• Using insights from paper prototypes, create a high-fidelity prototype

We tested our paper prototype on 20 students, 15 of whom were our target audience (first and second-years undecided), and 5 of whom were our friends.

Here are some saturation points we got from the testing:

• Users liked navigation clarity, such as the dropdown menu being on the left
• Some expected quick facts to be interactive, and some not (it was about 50/50)
• Liked the news carousel but wanted to see relevant events, not just news
• Liked major planning tool but were not sure about phrasing (beginner/intermediate)

After gathering the user insights, we went to Figma to create our high-fidelity prototype… and test it again!

The graphic below is a good representation of this development stage:

Hope you can also see it smiling at you :)

You can see how we transferred our ideas to the Figma prototype; feel free to interact with it by clicking here.

Presentation & Analysis

Our Design Sprint concluded with the final presentation to other students, teams, and the class instructor. After the presentation, we received feedback on what people loved, what they wished was different, and what new features they wished existed.

Many people said many good things. We ❤️ it :)

Common patterns:

• Liked “Declare Today” button on the homepage
• Liked shorter & more aesthetically pleasing homepage
• Liked major planning tool

Common patterns:

• Wished there was more focus on accessibility
• Wished major planning tool included upper-level students and double-majors

Common patterns:

• What if a major planning tool connected to MSCS mentors or professors?
• What if the website displayed courses differently?
• What if there was more advice on major planning for a wider audience?

Final Thoughts

The sprint is now over, but our redesign project has just started. With all of the feedback we received, it would almost seem rational to start a whole new sprint and roll back to the ideation phase.

Also… Macalester MSCS website needs more than just two pages we designed — and even these two can improve!

Moving forward, we will focus on the accessibility of the website by considering different text hierarchies and including more than just first- and second-year students in our target audience.