Education | Case Study | UX UI Design

Improving the class enrollment experience at Santa Monica College

By Hunter Moranville

UX Case study - improving the class enrollment process thumbnail

How do you get a feel of someone’s personality or expertise by viewing a name on a screen? You can’t. The only way that happens is if you’re a household name like Steven Speilberg. But even then you’d have to see some of his movies to understand his directorial abilities, and you still wouldn’t be able to get a feel for his actual personality. 

The solution?

Add some backstory, a bio, some context, and have the actual person behind the name on the screen write it. This is the design solution that solved a problem students were facing during the class enrollment process.

Here it is

Now that you have a taste, let’s run through the recipe 👨‍🍳

Project Brief

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.

My Role

UX Research, UX/UI Design, Presenting to Stakeholders

For the first 6 weeks of this project I was working solo. For the last 6 weeks of the project I was put onto a team with another designer. We discussed roles and responsibilities and I took responsibility as team lead.

Timeline

12 weeks for research, design, and presentation.

Phew okay great, now that we have some logistical stuff out of the way, let’s dive into the fun stuff. 

Stakeholder interviews

We were able to talk to the leads in the web design and marketing teams to get a better understanding of the issues SMC is currently faced with. We discovered that:

  • Users are having difficulty navigating the website
  • Students and teachers can’t find their portal access
  • They are actively trying to reduce the number of clicks to navigate the website
  • They are a small team that has limited resources

I quickly realized that site navigation was a fundamental problem that SMC was facing and after just releasing their current website design in 2020, they weren’t interested in a complete overhaul of the website. The SMC website also happens to have hundreds, if not thousands of pages within it’s ecosystem. So it would be unrealistic to redesign the entire website given our 12 week project timeline. With this information in mind, we continued our research.

Heuristic Evaluation

I conducted a heuristic evaluation of smc.edu and found out first hand how users were becoming frustrated with the site navigation. The website is designed beautifully and page/menu labels are concise and accurate. But the search function was not functioning. Here are my key findings:

  • The hierarchy of the menu was difficult to understand
  • The search function did not always return accurate results
  • Visual design is consistent with SMC branding
  • Page legibility and hierarchy is well designed

I started to understand how the site’s navigational issues were beginning to affect the user experience. If users can’t easily find the information they’re looking for, then they’re going to be frustrated and contact support for help.

Competetive Analysis

My goal was to see if other schools in the Los Angles area who offered a design-related program/degree had 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
Competitive analysis of other colleges in the Los Angeles area that offer a design related degree

User testing

I onboarded and interviewed 4 design students to understand their pain points. Here are some sample questions I asked:

  • What do you use the SMC website for?
  • Think back to the last time you visited the SMC website; what were you trying to accomplish? How was that experience?
  • What pages do you frequently visit on the website?

I discovered that:

  • Most students bookmark their most commonly visited pages
  • Students use 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.

 

Identifying the problem

Throughout the research process it became clear that students were feeling a lot of friction throughout the enrollment process. One student shared how she would open up the class search page, the directory page, and a LinkedIn page. Just so that she could research her potential professors and make choosing classes an easier decision. Another student told me a story about a time she was looking for a professors contact information and was referred through 3 people until she got the right information. This seemed like a noteworthy challenge to tackle.

Brainstorming

I started brainstorming solutions by creating a persona, scenario, and storyboard. 

Persona

Scenario

Suzie is looking to build up her skillset and heard SMC has a good design department. She wants to research the classes, see what she can expect to learn, and 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.

Reducing the number of clicks

Keeping in mind what the stake holders said during our interview, I wanted to see how I could reduce the number of steps that students would take to gather their professors info while enrolling in their classes. 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.

Wireframing

I used Adobe XD to create my low-fidelity wireframe. Here are the two main pages that I was able to create, complete with annotations.

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.
  • 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 find and placed at the top of the popup.
  • We added a “Subjects Teaching” section to display other 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. 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 new design, all students revealed that they didn’t like leaving the page while enrolling for classes. Students also wanted to search for classes instead of scroll through a dropdown menu.

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
  • 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.

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

- Nicole E, Design Student

Final Design

Results & Reflections

I believe our project was a success. We were able to identify the issue students were facing during enrollment and provided a simple but effective solution. I was also able to uncover other areas of friction and implement revisions that would further improve the student experience on the SMC website. If we were to continue this project I would have liked to dive further into the student experience of adding classes, as that seems to be a very common pain point among students.

Please feel free to peruse the final prototype link.

Thank you for reading!

Want to talk design, life philosophy, or freelancing opportunities? Contact me below 👇