.png){kind=small}
CalCentral Redesign
As UC Berkeley students, my classmates and I are frequent users of the CalCentral website. We often use this website to plan our schedule with the Schedule Planner feature, and to enroll for classes on Enrollment Center. Although this website is pivotal for any Cal student, its current format and design lacks intuitiveness and advancement. In this project, our group worked towards redesigning the Enrollment Center and Schedule Planner tabs on CalCentral to help make it more optimal, accessible, and user-friendly.
Duration
March 2023
Roles​
-
Discussed concerns of the website based on past unpleasant experiences.
-
Established a user journey with user and task overviews.
-
Conducted user interviews to identify pain points and brainstormed website improvements.
-
Identified design principle violations and devised solutions based on research, user insights, and aesthetics.
-
Collaborated on website redesign using Figma.
Skills
-
User-centered research
-
User interviewing
-
Collaborative decision-making
-
Website testing
-
Creative design thinking
-
Collaboration and communication
-
Innovative wireframing
Purpose
The Schedule Planner tab on CalCentral allows UC Berkeley students to plan their current and future schedules by adding prospective courses, and making sure that no time conflicts occur. This allows students to make more informed decisions about which courses to take and gives them a better idea about how their days will look like. The Enrollment Center tab on CalCentral allows users to view their current enrolled courses, view their Shopping Cart (saved courses), search for courses, and enroll in classes. These features allow students to make more confident decisions about the classes they would like to take.
​
Product Critique
​The current format and aesthetics of the Enrollment Center and Schedule Planner pages on the CalCentral website is not optimal. Specifically, it is often quite challenging for users to envision their future schedule with the lack of organization and aesthetics, and a plethora of unnecessary information presented on these pages. Additionally, users have a hard time searching for, viewing, and enrolling and adding courses to cart due to a disorganized visual hierarchy, the lack of organization and aesthetics, the absence of consistency, and an excess number of steps and clicks required to complete these tasks.
Design Challenge
How might we redesign the Schedule Planner and Enrollment Center applications to efficiently and effectively enable students to plan their schedules and enroll for courses?
User Task
User Overview
Oski, a UC Berkeley sophomore, finds Summer 2023 course planning and enrollment challenging due to issues with Schedule Planner and Enrollment Center. He seeks better organization in Schedule Planner, the ability to connect his schedule to Google Calendar, smoother class searching on Enrollment Center, and a streamlined enrollment process. Oski hopes for an improved CalCentral experience.
Task Overview
Oski faces obstacles when enrolling in LINGUIS 5 for Summer 2023 due to website complexity, aesthetics, and accessibility issues with Schedule Planner and Enrollment Center on CalCentral.
User Research
User Interviews
We asked students about their frequency of use Enrollment Center and Schedule Planner, their experiences using both, as well as their rating of intuitiveness for both. ​​​
Target Audience
UC Berkeley students
CalCentral users
Methodology
Google Forms surveys
Our experiences
Findings
Desire for the ability to export calendar on Schedule Planner to Google Calendar/bCal.
Enrollment Center
Requires too many steps and clicks to enroll a course or add it to cart.
Schedule Planner
Too much information presented in a disorganized manner with no visual hierarchy.
The sidebar becomes inaccessible, making it challenging to navigate between pages.
No intuitive way of going back when searching for a course.
The placement of certain buttons is inconsistent, which can be confusing.
Current Website's Key Design Principle Violations
My Academics Tab
Proximity
Enrollment times and dates in the "Class Enrollment" section lack clarity due to visual hierarchy and spacing issues, leading to user confusion and potential errors.
Similarity
It is difficult to distinguish between "Phase 1" and "Phase 2" groups due to their identical appearance can lead to user confusion and misinterpretation.
Schedule Planner
Landing Page
Aesthetics and Minimalist Design
Excessive information, poor organization, and lack of color and arrangement make it challenging for users to interpret this page, preventing a positive user experience.
Branding and Expectation
Although the brand logo is big, visually, it is washed out by the options presented underneath it, and disappears when the user starts adding classes.
Proximity
The top search option is misplaced; it doesn't belong on this page meant for planning future course schedules. Related elements should be grouped together for a coherent user experience.
Generate Schedules
User Control and Freedom
Inadequate visual hierarchy. Essential schedule information buried under less important content, leading to user confusion and frustration.
Overlay Comparison
Recognition Rather
Than Recall
The workflow is disjointed, since users need to exit the frame to choose or compare classes. Buttons and actions are also in close-proximity.
Enrollment Center
"View My Classes/Schedule" Tab
Match Between System and Real World
The "Class Search and Enroll” tab’s icon does not accurately represent the label, which can lead to assumptions and errors
Aesthetics and Minimalist Design
The visual hierarchy of the class schedule is not organized effectively, making it difficult to interpret the information, and easy to miss important pieces.
"Class Search and Enroll" Tab
Symmetry
The semester and year are cut off, leading to user confusion and preventable flaws.
​
There is also an excess amount of whitespace on majority of the screen.
Consistency and Standards
The control panel is no longer visible on this page. Although there is a thin strip on the left that can make the control panel reappear, it can be confusing for users to accurately determine what will happen when they click on it.
Class Search
Consistency and Standards
The sudden sidebar absence may confuse users.
Redundant "Search" buttons can overwhelm and confuse users.
User Control and Freedom
Without the absence of the sidebar, it is difficult for users to return to the previous page or navigate between tabs, forcing them to restart the process multiple times, creating irritation and frustration.
Selecting a Course
Aesthetics and Minimalist Design
The pop-up page arrangement is suboptimal with the discussion section appearing after scrolling through other content.
Too much space is wasted on sections with minimal information.
User Control and Freedom
“Enroll or Add to Cart Button” enables two different actions and processes, but there is only one button for them, which can mislead users.
Enroll or Add to Cart-
"Review Class Selection"
Consistency and Standards
Some enrollment steps can be combined for efficiency.
The long horizontal gray header is awkward due to excess space, and the "Next" button's location is not intuitive.
"Review Class Preferences"
User Control and Freedom
Adding a second step increases clicks and steps, reducing efficiency and potentially diverting users.
Consistency and Standards
Button placement inconsistency may lead to user errors and confusion.
Redesign Walkthrough
CalCentral Sign In
"My Academics" Tab
Schedule Planner
Class Search
Generate Schedules
Initial State
After Adding Courses
Overlay Comparison
Enrollment Center
"View Schedule" Tab
Class Search
Class Enrollment or Add to Cart
Choosing to display a vibrant and aesthetic background that matches Cal's colors to capture users.
Improving visual hierarchy of the Class Enrollment dates, which can help with the readibility of the information.
Enabling user control and freedom by adding a Live Chat Assistant, which can provide immediate assistance to users.
New design gives more prominence to the logo by putting it on the header where it is expected to be.
Organizing content effectively by removing unnecessary information and creating a more modern and minimalist design to the overall website.
Enabling user control and freedom by providing users with class recommendations and allowing them to add courses to their "Favorites" list.
Presenting content in a more visually appealing system for improved user flow. The two main tabs are strategically placed in at the top center in large fonts so that they can be spotted immediately.
Simplifies the view, reduces irritation by presenting relevant information in one place, and allows side-by-side comparisons for easy inspection.
Presenting information in a more visually appealing way by incorporating color. Ensuring readability by organizing class schedules in table formats and making each class collapsible.
Enabling accessibility, user control and freedom, and consistency by incorporating a menu bar at the top of the page. Users can then effortlessly navigate between pages and tabs, without having to escape the entire process.
Providing personalized recommendations to users with the icons linking them to Schedule Planner, "Favorites", or "Shopping Cart."
Implementing symmetry and consistency so that readability can be ensured, and errors can be prevented.
Consistency and standards are ensured so that users are able to access both the menu bar, as well as the search filters easily, without having to return or restart the process.
Presenting information in a more visually appealing way by incorporating color. Ensuring readability by organizing class schedules in table formats and making each class collapsible.
Encouraging user control and freedom by allowing them to add classes they are interested in to their "Favorites" list.
​Improves visuals with color-coded sections and enhances readability using tables.
Promotes user control with concise information and separate buttons for enrolling or adding to cart.
"Shopping Cart" Icon
Class Enrollment
Class Enrollment
Preventing user irritation and confusion by combining steps to reduce the overall number of steps and clicks to complete their desired task.
Improving the overall readability of the content by organizing class information into a table.
Enabling user control and freedom by giving users the option to exit the process in case they change their mind in the middle.
Ensuring consistency and standards by placing buttons in intuitive and locations.
Enabling user control and freedom and error prevention with the "Edit" option so that users can make informed decisions about their classes.
Incorporating color-coding and icons like the check mark to provide visual context to their progress in completing tasks.
Ensuring error prevention with this pop-up message so that users can be prepared to submit.
Providing a confirmation message to provide a sense of assurance to users.
Enabling user control and freedom by giving users recommendations (such as email, Schedule Planner, or View "Favorites") based on intuition and instinct.
Enabling user control and freedom by linking users to change their preferences as needed, in case they change their mind.
Providing a link to Schedule Planner as a form of recommendation to users.
Presenting class content in a more visually appealing way by incorporating color. Incorporating color-coding based on class availability and other important information.
Ensuring readability by organizing class schedules in table formats and making each class collapsible.
Ensuring error prevention with the pop-up message so that users can be ready and review information as necessary before they submit.
Enabling user control and freedom by providing recommendations (such as email, Schedule Planner, or View "Favorites") to users based on intuition and instinct.
Providing a confirmation message to as a sense of assurance to users.
Future Updates
Effectively integrate Schedule Planner and Enrollment Center within the same system.
Provide students with personalized class recommendations based on interests, year, and major(s) on Enrollment Center.
Ability for students to connect with advisors through Enrollment Center for advice on the classes they intend to take.
Additional Information
Presentation Slidedeck
https://docs.google.com/presentation/d/1-2ooVpzlx3bkPSNCZVvCygX_nreWRDDaU5NSAuYZomI/edit?usp=sharing