top of page

CCSF Class Registration Portal 

header.png

Intro

MyRam is the portal students attending San Francisco City College of San Francisco use to register for classes. Through personal experience, I have found myself frustrated and confused using the Student Registration Portal to sign up for my classes each semester. 

 

My role: Product Designer, Strategist, & Researcher

Key contributions: Working as the only designer on this project I created user surveys and was responsible for finding participants, creating and synthesizing findings from a competitive analysis matrix, journey mapping, product design, usability testing, and delivering a final clickable
figma prototype. 

Project Summary

Problem: The CCSF Registration Portal is convoluted and confusing for first-time users. Currently, students only have the ability to choose a general class they would like to take, input their unavailable hours, and let the system come up with a schedule for them 

Solution: Redesign the portal with a simple dashboard layout that allows users to choose individual classes by specific criteria as well as generate schedules based on general classes needed and availability. 

2frames22.png

Problems with MyRam Portal   

These were the main user pain points I discovered through competitive analysis and conducting 30 minute interviews with 7 fellow CCSF student about their experience using the portal. 

Difficult to Access: Information Overload

5/7 students voiced confusion attempting to find the correct portal to sign up for classes.  Access to class registration is located within a portal called “MyRam” which doesn’t give any indication of its function. 

Screen Shot 2023-06-06 at 11.51.45 AM.png

Difficult to Access: Too many steps to log in 

It takes 4 clicks from sign-in to enter the signup portal- this is higher than any of the competitors I reviewed (the majority were 1 or 2). 

flow1.jpg

Impossible to Target a Single Class

Screen Shot 2023-06-07 at 3.01.43 PM.png

MyRams' main functionality is selecting general classes and creating potential schedules based on your availibity- it does not allow you to build your own.
On a scale of 5 being difficult and confusing and 1 being simple and intuitive- 6 out of 7 students rated the task of signing up for a singular class a 4/5 or a 5/5. 

Chaotic Visual Design

toored1.jpg

The general aesthetics of the platform were a pain point for users with commentary such as “busy” “crowded with too much information” and “There's way too much bright red, it makes me feel uncomfortable”. 

Design Solutions   

Here are some highlights from the final prototype. I will call out what design solutions were used to address the issues that came up through user interviews+usabilty testing. 

Create a simple stand alone dashboard app

New Log in Flow

The ease of access to signing up for classes will make CCSF accesible to more students. 

Give the option to search for specific classes as well as general courses 

Adding a simple toggle feature within the search function to allow users to decide if they want to search for a specific class based on many possible factors, or if they want to choose a course that could include different instructors, meeting times etc. 

find classes

Creating information Hierarchy and adding more negative space 

Design matters- seemingly "aesthetic" changes can improve the overall usability of a product. I changed the cell design for class listings to improve readability. The class information that is displayed came from asking students "What information is most important to you when registering for a class?" The most common answers given were: location, meeting time, duration, instructor, and number of units. This helped me decide which information to display vs. hide in a "see more" drop-down. 

before and after

The overuse of red was an issue in the original design, the final result being something students described as "aggressive and uncomfortable" I used a slighlty deeper/ more subdued shade of red, and made sure to use it more sparingly- including using it as an outline color for buttons instead of completely saturating each button. I Included more soft gray in the design to give a more calming and move away from the bright red against stark white contrast. 

A peek into the design process   

Lo Fidelity: I began by creating paper mock-ups to draft out a variety of potential ideas- from there I created several user flows to illustrate the paths within the application the two personas/users would be taking.  

IMG_3342.JPG
IMG_3345.JPG
IMG_3339.JPG
IMG_3341.JPG

Improvement through feedback & user testing 

These are some notable changes made to the prototype as a result of user testing findings, feedback from design critiques. 

Before 

Re Styling Class Filters 

The final design uses a similar entry field to filter size ratio as well as sparse use of the highlight color. 

"Filters look odd having different amounts of space, from the copy to the outside edge" 

"The round filter shape of the filters vs. square shape of the entry fields is confusing" 

search_before.png
after

After

Notable Design Inspiration 

Looking for inspiration on how to better display this information, I discovered Google flights had a similar entry form/ filter layout that included square filters and entry fields- I used the filters as inspiration as an example of filters that looked and functioned in a similar way to the filters I was designing. 

googlething.png

Final prototype

nobackgorund.png

Impact

After completing a final usability test on the prototype with 7 CCSF students- these are some metrics I used to measure the success of the redesign.  

6/7 students

Ranked the ease of logging in as 5/5 when asked " I find the login simple and clear". 

2/5 difficulty

Rating students gave the task of adding a single class to their schedule, before the redesigns they gave it  
a 5/5.  

6/7 students

Ranked the ease of logging in as 5/5 when asked " I find the login simple and clear". 

Lessons learned+ next steps 

I completed this project during the peak of the lockdown during COVID-19, meaning that all of the user research needed to be conducted virtually. 

Something that I was not able to access for the original site as I didn't have admin capabilities conversion Rate- measuring how many students initially logged into the site, vs. how many students went all the way through the registration process (converting). Once the new design had been built, I would do a pilot test that would measure how many students signed on to the site, vs. how many students dropped off on each particular page and eventually went through the entire registration process. Being able to 


 

bottom of page