Corsair Connect

Student Portal Redesign

Role

Lead Student UX Designer

Teammates:

Liz Martinez, Dave Giammarco

Stakeholders

Santa Monica College, Admissions & Records Department

Cleve Barton, Communications Coordinator, Project Manager

Esau Tovar, Ph.D, Dean of Enrollment Services

Timeline

July 2022 - May 2023

(May 18th - Launch Date)

Problem

What is Corsair Connect? Corsair Connect is Santa Monica College’s student portal for enrollment, financial aid, counseling, and more student services.

This student portal is essential for the college to make money as a business. This is where students enroll and pay for their classes. So it is important to build an experience that produces this outcome while also making the experience better for the student.

Current Corsair Connect landing page

Current Corsair Connect

  • Outdated

  • Cluttered and disorganized

  • A lack of hierarchy and cohesive design

  • Too many links that take you outside the portal

  • Lack of personalized experience

Solution

After examining the case studies, reviewing insights and top level findings, I started thinking…

How can we improve the students’ experience while using Corsair Connect for their academic duties?

Goals

  • Modernize the experience

  • Simplify the navigation

  • Improve handling of academic business

  • Personalize the student portal experience

  • Establish hierarchy and overall design cohesion

Concepts

I started this project a little differently, this was the first time the user research phase was done beforehand, provided by two UX Research classes at Santa Monica College. There were also two different concepts with features that my stakeholders wanted to carry over into the redesign.

Design

The tool of choice was Figma for this redesign project, since it was a great for real time collaboration with my project manager, enrollment services dean, teammates, development team, and other departments (which is used often in video call meetings).

Layout

The first wireframes were about deciding on the layout and how information will be presented.

Implementing Features

I started implementing the features that were asked to be considered from the concept pitches.

Evolving Wireframes

As the layout decisions evolved, so did the navigation. I added buttons for the most used links or requested information over the phone from students. The theme of buttons will carry on through the other pages as well, to create cohesion.

Adding icons to the Success Steps section would help reduce the amount of text, introduce a gamifying and task driven experience (where students can check off badges as they complete steps).

We decided to move the dashboard information from the bottom upwards and into sections. This decision was made due to the mobile experience. Since this redesign does not include building a separate mobile experience, it will be responsive on both ends, desktop and mobile, so everything will stack.

Challenges

Landing Page

During one meeting, we were on the fence with deciding on which layout. I thought getting feedback from some students would help us come to a decision, especially since they are who we are redesigning for. So I pitched this idea to the PM and he understood the benefit. We decided to gather feedback through a focus group.

Based on the student feedback, qualitative and quantitative data, we went with the design on the right. Not only did this experience help us decide between two concepts, we also walked away with additional information that could be implemented into the redesign.

Themes

A constraint along the way were the limited colors for the main elements on the page. When it came time to narrow down colors, we used the themes provided through the Apex software. This would help the developer team save time and would also match systems that Santa Monica College uses already for their other portals.

Style Guide > Production

The first style guide was created with the college’s branding in mind (blues and yellow), and considering color themes.

So after creating the style guide, the developers applied the colors and images into production. I was looking forward to seeing the change from low fidelity wireframes into the pre-released live version with color. This is when I learned the hard lesson of the true value of a well developed design system and the introduction to the testing and iteration phase.

Survey and Usability Testing Feedback

We conducted usability testing with an in-person focus group of eleven students, where we received validation for reaching the goals of modernization, simplified navigation aimed at efficiency, and a personalized experience. However, we received mixed feedback on the hierarchy, legibility, and colors.

In-person Focus Group

Observations

ADA Compliance

As I checked the problem areas with WebAim, I discovered those areas did not pass the contrast checker. This made sense why there was a problem with the hierarchy, legibility, and colors.

Iterate

Color Changes

One of the first changes implemented into the next stage was updating the Style Guide with colors that passed the WCAG contrast checker. In addition, to solve for the feedback of “overwhelming”, “a bit bright”, and feeling that elements looked “scattered” due to colors, we selected purple from the themes to go with the blues, a palette that is intended to produce an experience of “calming” and ”trust” for our students.

Implemented Feedback

This iteration included the following updates that directly aimed to solve the contrast problem, making sure to pass WCAG standards. We also added an arrow image to help draw attention to the drop-down menu, since some students mentioned not noticing it right away.

We also reduced the amount of quick links buttons, and prioritized by action, to help with the overwhelming feedback of “too many buttons”.

The Success Steps were updated with more intuitive badges and with the Modality/Location section, we added icons to help break up the text content. This key also exists on Santa Monica College’s website, so the crossover information is familiar to the students.

Login Page

We wanted to add an image to the background of the login page and chose an image that highlights the modern and beautiful college campus.

Previous login page

New login page

Final Colors

We went with the color scheme that reflected the feedback from the focus groups and surveys. We found that students found the colors to be “relaxing” and “modern”.

New Features

We may have had some limitations and challenges along the way, but there was room for little gems, new features, that could be added to Corsair Connect, and would improve the user experience.

Countdown Timer

Under Classes & Enrollment, on the Wait for Classes page, there is a countdown timer that lets students know when a wait list will open.

About & Guidance

Another way to help students navigate their college experience is to provide useful information.

The “About” sections introduces the pages and further guides by providing tools for action (ie. hints, required steps, video tutorials).

Alerts

A new alert system was created which provides notifications for holds, individual specific alerts, and all student alerts. This page also highlights SMC Go, the college’s mobile app.

Semester Drop-down Menu

A semester drop-down menu that changes the content to match the semester.

Hover Effect

We wanted to enhance the student’s experience by adding feedback through a starburst hover effect along with a color change. This hover effect is also used on the college’s website, creating a cohesive design experience and helping students with familiarity.

Before hover

Hover effect

Expand/Collapse

To help reduce information overload, we created expandable or collapsible menu bars. This also improves the mobile UX experience by reducing the amount of scrolling. Students are familiar with this feature in Canvas as well, a platform used to access class content.

Expanded

Collapsed

Emeritus Program

After receiving feedback from a focus group with students in the Emeritus Program, we designed a custom experience that pertains to these particular students, so they can access information that is relevant to their program.

Takeaways

This was my first professional UX position, where I gained experience with cross functional teams within the business of a higher education sector - how the Project Manager, Dean of Enrollment Services, my teammates, Admissions & Records, Financial Aid, and Counseling departments, student workers, and the MIS team (developers) all came together with a common goal - to create a better experience for our user, the students.

This redesign has given me the opportunity to experience a product’s process from concept to launch. Implementing student and staff feedback throughout the iteration process has improved my understanding of the strategy behind design decisions.

I have learned from this project to follow WCAG standards from the beginning. How I want to continue helping businesses reach their goals by understanding the problem and focusing on the people who are going to use this product I am designing for.