CCSF Class Registration Portal
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.
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.
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).
Impossible to Target a Single Class
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
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
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.
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.
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.
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"
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.
Final prototype
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