Improving the class enrollment experience

at Santa Monica College

Academic Project:

UX Design 1

Overview

How do you get an understanding of someone’s personality or expertise on a subject by viewing a name on a screen? This is the question that summarizes the experience that Santa Monica College (SMC) students were having while enrolling in classes and choosing which professor to take.

Process

Discovery
Ideation
Design
Testing
Re-design & Final
Reflection

My Role

User Research
Personas
Sketching
Wireframing
UI Design & Prototyping
Usability Testing

Timeline

12 Weeks

The Challenge

To research, define, design, and deliver improvements to the student experience of the Santa Monica College website, smc.edu. These designs must improve the site experience for a specific student audience, as uncovered by research and insights.

Discovered User Problem

Throughout this project we found that general navigation of the website could use some improvements. This general friction caused grievances for many student’s experiences across the website. We found the most interesting and common problem was contacting professors during the enrollment process. Students are opening multiple browser windows to research a prospective professor, but are unsure of not only how to reach them, but which specific faculty member they are. So we set out to answer this question: How might we make it easier to find your prospective professor's contact information while humanizing the name on the screen?

The solution?

Students not only want to be able to contact their professors before enrolling, but they want to get to know who they'll be spending the next 16 weeks with. Our solution focuses on releasing the mystery behind a name on the screen, and brings the real person that you'll be learning with front and center.

To achieve this, we created a hover popup menu for the professor's name that gives you their full name, preferred contact information, a biography, their experience, and shows the other subjects they are teaching. Students loved being able to access their prospective professor's information so easily while learning more about their professor.

“Oh yay, cool! It's a real human.”

- Nicole E, Design Student

Research

Stakeholder Meeting

Before starting this project, we met with the Santa Monica College Web Design and Marketing team to get a better understanding of the challenges they are currently faced with.

Key Insights

  • Users are having difficulty navigating the website.
  • The design team is actively trying to reduce the number of clicks it takes to navigate the website.
  • They have limited resources so they need an easy, but effective solution.

Heuristic Evaluation

A heuristic evaluation unveiled some of the challenges with navigating the website. Some key site features were not functioning as the user might expect them to. Here are my key findings:

  • The search function returned inaccurate results.
  • Each individual page legibility and hierarchy is well designed.
  • Once you locate the right page, it has the information you need. The challenge is finding it.

I started to understand how the site’s navigational issues were beginning to affect the user experience. If the users couldn’t easily find the information they’re looking for, they would contact support for help. This explains the large amount of support requests.

Competitive Analysis

My goal was to see how other schools in the Los Angles area who offered a design-related program/degreehad features or improvements that could benefit the experience of smc.edu. Here’s what I found:

  • The search function on smc.edu didn’t work as well as other college websites
  • The menu could use some hierarchy so it could be easily scanned for relevant information

This reinforced the idea that the site navigation was an issue and was going to play a part in our design solution. But how? Time to talk to the users directly.

Competitive analysis of other colleges in the Los Angeles area that offer a design related degree

User Interviews

We onboarded and interviewed 3 design students to understand their pain points.

I discovered that:

  • Most students bookmark their most commonly visited pages to make it easier to find them again
  • Students use the directory function to research professors during the enrollment process
  • Students want easy access to faculty and staff contact information

Finding the correct professor’s contact information from the directory proved to be a challenge and seems to be a common pain point amongst students. Multiple students mentioned having trouble finding the correct person using the faculty directory tool.

"

So I'll use the search and the search fails and it really, like points you anywhere and you fumble around until you do find that staff directory… and then from there I input in the list that I manually copy from corsair and try to figure out the full name of the professor.

- Nicole E

"

“I was trying to find their contact information and that was the most difficult for me.”

- Danniela K

Persona


Taking all of our insights gathered from our research phase, I created our persona for Suzie.

  • Suzie's main goal is to quickly signup for her classes and feel confident she chose the right professor
  • She has flexibility in choosing between multiple professors that are teaching the same subject

Ideation

Brainstorming

I started brainstorming solutions by creating a scenario that informed the design of our wire flow.

Since we are improving an experience instead of completely redesigning it, we worked within the already existing design system.

Scenario

Suzie is looking to enroll in her few last classes at SMC. She has fulfilled her transfer requirements and wants to take classes to sharpen her skills. She wants to research the classes, and contact the professor to see what she can expect to learn. Her deadline to enroll in the classes has passed so she will also need to contact the professor for an add code.

Wireflows

With this information and work under my belt I started to create wire flows. One of the key features that I wanted to implement was a professor profile page, along with a previous work submitted section where students could see work previously created in that particular class.

Simplifying the user journey

Keeping in mind that the stake holders are actively trying to reduce the number of clicks it takes to navigate the website.

I wanted to ensure that our solution was improving the user journey, and it offered massive improvements from our point of view.

I was able to reduce the number of steps from 16 steps to 10 steps. All while keeping the students on the same page and not getting lost on the website.

Original Flow

16 Steps

Improved Flow

10 Steps

Design

Wireframing

I used Adobe XD to create our low-fidelity wireframes. It was easy to want to add other features in but I referred back to the persona and remembered that the stakeholders wanted a simple solution. With this in mind I created this mostly grayscale wireframe

These are the core areas we decided to focus on:

  • We added a professor profile popup module so that students can gather info about their teacher without needing to do an internet search.
  • We also added in a full screen professor profile page with more information about the professor.
  • We made the professor’s email address easy to findand placed at the top of the popup.
  • We added a “Subjects Teaching” section to displayother classes this teacher is teaching

Testing

After putting together an interactive prototype and a testing script, I conducted 3 usability testings with students of varying experience with the website. I found that they loved seeing the profile page and getting to know their prospective professors. Students also liked the easy access to their contact information. While testing I found that there was some confusion over the wording of “Subjects Teaching” and when questioned about the experience, all students revealed that they didn’t like leaving the page to research classes while enrolling. This wasn't what we set out to design for, but it was interesting to hear and it got us to think about how else we could improve this enrollment experience.

With this information in mind, I decided to make changes to the design.

  • Added in a search bar that allows students to search for subject instead of scrolling through a dropdown
  • Added in a course cart section so that students can easily gather the classes they wish to enroll in on the same webpage.
  • We improved the hierarchy of the type, turned the contact button into a static section with contact information, and added in more information for the subjects teaching section.

Iterations

Using the feedback and insights gained during our usability testing, we were able to further iterate our design.

Added in a search bar that allows students to search for subject. While still including a drop down menu with all included subjects.

Students needed to write prospective classes on multiple pieces of paper and open multiple web pages to choose and then enroll into their classes.

To help solve this issue I added in a course cart section so that students can easily gather the classes they wish to enroll in on the same webpage.

During testing, we found that students were experiencing confusion over the subjects teaching section.

So I improved the hierarchy of the type, turned the contact button into a static section with contact information, and added in more information for the subjects teaching section.

Reflection

Overall

We believe our project was a success. We were able to find a solution to a problem for students that occurred while enrolling in classes. The students that we tested our solution with gave us great feedback and had a positive interaction.

For the future

If we would have continued this project I would have explored more of the course cart function and worked to improve that. Since those discoveries were made towards the end of the project, we weren't able to explore them in depth. In the future I think I'll take more time exploring the area of focus to see if I can find any other associated problems like we did in this one.