WebSoC Redesign
🏫

WebSoC Redesign

Background

In Informatics 151 Project Management, the first Informatics class I took as a Human-Computer Interaction junior, I teamed up with 3 other students to redesign WebSoC.

Picture of WebSoC
Picture of WebSoC

WebSoC is a class scheduling tool used by thousands of UCI students regularly, and unfortunately, it has not been updated for decades. In my personal experience, I get frustrated often because of (not limited to) the following reasons:

  • I have to scroll through a long list of majors to find "Informatics"
  • image
  • I can not search for all available "INF 151" classes. Instead, I am forced to search for either all informatics classes or a specific INF 151 class by using a unique class code (which is different from "151").
  • image
  • There is no way for me to recognize who the professor is for a specific class unless I can remember their last name.
  • image
  • The Bookstore link under the column Textbooks only direct to the home page of the bookstore instead of the specific textbook page
  • image

Project

In this project, my team and I created multiple project management plans such as Gantt Chart, Work Breakdown Structure, Budget Plan, Business Plan, etc. The objective of the project is to follow through with the project management plans and address the usability issues with WebSoC while maintaining a layer of familiarity with the existing user base.

Goal

  • Validate design assumptions with user research data.
  • Improve the user satisfaction rate through surveys and interviews.
  • Achieve a task success rate of 90%.

Research

Survey

As a lead designer, I created a survey along with the rest of my team. We managed to recruit 40 students to participate in a survey asking how they use WebSoC. The survey was distributed through a UCI Facebook page and it is published with Google Forms. Here is the result:

  • Only 15% of the participants found WebSoC easy to use.
  • 0 participant ever used the filter "Web Font Size Percentage" and yet 45% of the participants think the size of the default font is too small.
  • 60% of the participants think the number of filters is good and the filters are useful.
  • Top 5 most used filters are "Course Code or Range"(92.5%), "Department Name"(80%), "General Education"(75%), "Instructor"(70%) and "Term"(67.5%).

Interview

To get a broader perspective, I decided to speak to professors and students with special needs since they were not present in the survey. By speaking to a professor, I was hoping to learn if they use it and what they use it, and speaking to a student with special needs, I was hoping to learn how WebSoC could improve its accessibility.

Through an interview with a professor, I found out that faculty use WebSoC to look up the latest updates about their class such as room change. She also used WebSoC to check how many students enrolled in a class and to confirm if the assigned classroom was too small for the students.

image

Another interview I had was with a student with visual impairments. I asked him how he used WebSoC to plan his class schedule. He also mentioned the white background cause a huge strain on his eyes because he had to read the details intensely to plan class schedules. There was a workaround that he found by using a Chrome extension that replaces the white background with a pure grey color. Here're a few findings from the interview:

image
  • Students use WebSoC to learn class general information, such as location, capacity, waitlist, enrollment status, prerequisites, etc.
  • Students use WebSoC to plan class schedule ahead for next quarter.
  • The student pointed out that because of their visual impairments, the largely used white background makes it hard for them to read.

Competitive Analysis

In order to understand how other university handles class scheduling website, I went to other University of California websites to find out what they are doing differently and hopefully to learn how to redesign the WebSoC used by UCI.

WebSoC from UCI along with UC Davis and UC Santa Cruz all follows the same pattern where the website threw dozens of filters to the students and asked them to help themselves. The information is cluttered and unorganized.

However, UC Davis allows the user to save classes to a list named "My Saved Classes" so the user doesn't have to go through a long list of class schedules every time they log on to the website.

UC Santa Cruz also has a helpful feature that color codes the status of a class with whether if the class is open, closed, or closed with a waiting list.

image
image
image
image

In the WebSoC from UC Santa Barbara, there is a great layout of only showing 3 most important fields. It reduces the workload of searching for classes quickly and the user does not have to read through dozens of different filters to send a search commend.

image

However, the Accessibility tab does not work as intended. It only directs the user to a page and asks them to send the registrar office an email if the page is not accessible.

image

UCLA's WebSoC is even more simplified comparing to UCSB. There is only one field that works as a search box. The user does not need to go through a long list of majors and instead they could enter the major for themselves. It simplified and streamlined the user experience of searching for a class and maintained a high task success rate.

image

Besides the simple searching process, the class schedule results is well-designed too. There are color-coded icons indicating the status of the class. The columns are concise and essential. The "Start New Search" button on the top is highlighted to indicate an important Call-to-Action button.

image

Ultimately, there is the WebSoC from UCB. It is definitely the best-designed class scheduling too across all UC campuses. Not only did the office discard the traditional search filter layout, but the filters are also direct and informative. Instead of showing all the options, the tool can handle, UCB's WebSoC adapted a similar searching approach often found in e-commerce sites which have proven to be more efficient and easy to use. The left and right layout to show both filters and class results is also a great practice to utilize the screen real estate properly. The different viewing options provide more context to the user and is a welcome feature to have.

image
image

Takeaway

  • Improve WebSoC's accessibility.
  • Use icons and colors to highlight important details on the class results to help users quickly find the information they need.
  • Try out well-designed layouts from other UC's WebSoC.

Design

In my team of 4, the other 3 teammates, unfortunately, did not have much experience with product design and design software such as Adobe XD. Naturally, I took the lead to work on the UI design while instructing them how to use create a web design interface.

First Iteration - Design Language, Font Size

In the first iteration, I drew inspirations from the UCI home page to set the color palette and design language.

image
image

Based on the findings from the research, our main focus for the first iteration is to set the font size to be the industry standard size for paragraphs on the web which is 17px. The other feature to implement is a brightness setting because of the interview I had with a student with visual impairments. The following 2 images demonstrate the two design alternatives for the settings I explored.

Brightness setting alternative 1 in the first iteration
Brightness setting alternative 1 in the first iteration
Brightness setting alternative 2 in the first iteration
Brightness setting alternative 2 in the first iteration

Similar to how the Chrome extension works from the student's description, by clicking on the reduce brightness button, the background turns to grey.

Regular brightness
Regular brightness
Lower brightness
Lower brightness

The layout design is inspired by UCSB's WebSoC which only incorporated 3 most important fields. However, I also kept all the filters on the right and hidden by default. Comparing to the original design, I reordered the filters to put the required items on the very top so it is easier for users to navigate.

image

Second Iteration - Features: Calendar, Color Coded Affordance

In the second iteration, I removed the 3 filter designs because it is repetitive. Because of the survey results that showed over 55% of the students still think the filter layout does not need to be changed, it was simply enough to reorganize the filters.

image

A new layout change in this iteration is the left and right column design inspired by UCB's WebSoC. To improve the user experience, I added icons, color-coded class status, and titles to improved the readability. I also underlined the location indicating that by clicking on the text, the user will be directed to the proper page showing where the classroom is.

Because the class model in UCI is often Lecture and Discussion, which means in order to enroll in a class, a student has to choose one lecture and one discussion at the same time. Because there are often multiple discussions followed by one class, I also grouped all the Discussion classes under one category.

image

Another feature I implemented is a calendar to help students to schedule the entire class schedules for the next academic quarter. By clicking on the add button after each class, the class will be added to the calendar automatically. It can be viewed as an enhanced version of the My Saved Classes feature from UCD's WebSoC.

image

Final Iteration - Usability Testing

At the beginning of the final iteration, the team conducted a thinking-aloud session with 9 students to ask them to try out the prototype and provides us with feedback. When using the prototype, the participant will be asked to search for all classes under one major by adjusting search filters, find the specific class on the page, add a list of classes to the calendar. Meanwhile, the participant will speak aloud to say anything that comes to their mind when using the prototype. While observing, the interviewer will record the success completion rate for each task. By conducting this research, I was hoping to find micro UX issues and to refine the flow from a deeper level.

Task Success Rate

NameSuccess Rate
Search for all classes under one major
88.9%
Find a specific class on the page
100%
Add a list of classes to the calendar
100%

During one thinking aloud session, one student pointed out that each class has a drop shadow in the background which is rather distracting. I also found out it is not a good practice to utilize the screen real estate considering the result page will often feature dozens of result items. By incorporating their feedback, I changed the drop shadow into an outline shown in the picture below.

image

Deliverable

image

Impact

Upon the completion of the project, I published the design to Dribbble. Since my design went public, it has influenced the AntAlmanac team (enhanced WebSoC made by UCI students) to create an "Add" button to their website along with color-coded enrollment status. Soon after these changes were published, I was reached out by the creator of AntAlmanac. He said he liked my approach to redesign WebSoC and he liked a few of my ideas shown in the design. He then invited me to join their team and I accepted.

image

Since my time there, I have designed a landing page for AntAlmanac demonstrating what feature it has and the team behind the creation.

image

Reflection

Looking back at the first design project that I took a lead in, I was proud of what I have accomplished as a designer who barely got into the product design industry. Of course, I made a lot of errors but I'm glad I conducted user research to learn deeply about what the usability issues are and how to fix them by incorporating other's feedback.

If I could redo the project, I would create low fidelity wireframes after gathering user research data. I didn't realize how costly it was by jumping straight to high fidelity designs until I was in the middle of it. It was difficult for me to make big changes to the design because it means I needed to overhaul everything from the ground up. If I created wireframes, it would be much easier to make changes with user research data in the early stages.

Another issue that was brought up after the project completed was the overuse of colors. It was a good decision to color coded the enrollments status. However, I overused the yellow and blue color in the class result page. It definitely causes a strain on the eyes over a long period of time because how colorful the pages are. It could simply be spotted if we had done more sessions of usability testing in the final iteration.