Proposed Objectives
- Redesign WebSoC with based on extensive user research.
- Interview with users to determine the flaws of the current software solution and possible improvements.
- Design a stylish and efficient class scheduling application with accessibility in mind.
Overview
WebSoC is an essential tool used by all of the UCI students regularly to check the current or upcoming class schedules.
The goal of the project is to finish the redesign project within seven weeks and present the results in the Project class.
The essence of the project is to make the website's visual representation more appealing and empathetic while maintaining efficiency for quickly looking up class information.
Redesigned WebSoC final deliverable
Research
Our team together recruited 40 people for the survey from posting on a UCI Facebook page. From the survey published on Google Forms, we found out:
- 60% of the participants found WebSoC not hard to use.
- 45% of the participants think the size of default font is too small.
- 60% of the participants think the number of filters is good and the filters are useful.
- 0 participant ever used the filter "Web Font Size Percentage".
- Top 5 most used filters are "Course Code or Range"(92.5%), "Department Name"(80%), "General Education"(75%), "Instructor"(70%) and "Term"(67.5%).
Through an interview I had with a faculty member, I found out that faculty use for looking up latest updates and general information about their class.
- One faculty used WebSoC to see how many students enrolled in a class and to check if the assigned classroom was too small for the students.
Through interviews I had with a student with vision impairments, I found out:
- Students use WebSoC for Checking class general information, such as location, capacity, waitlist, enrollment status, prerequisites, etc.
- Students use WebSoC for Scheduling classes for next quarter.
- One student also pointed out that because of their vision impairments, the largely used white background make it hard for them to read.
Original WebSoC Screenshot
Brainstorm
After the research, we summarized some existing problem and brainstormed possible improvements for WebSoC:
- Add icons to ease the learning curve. Make it efficient & effective (General goal)
- Reduce the number of filters (Brainstorm Session)
- Streamline the interaction levels to make it less overwhelming (Survey)
- Take accessibility into account during design process (Survey and interviews)
During the brainstorm session, we did not have a research finding that supports our decision on getting rid of the filters. We ignore the fact that "60% of the participants think the number of filters is good and the filters are useful." We realized and correct the mistakes in Version 3 of our design.
Design
During the design phase, I produced 3 iterations (1 final iteration in the Deliver phase) based on the data and results we gathered in the research phase.
Version 1
- Design with Accessibility in Mind
- increased the default font size
- added a brightness switch button
- Add Visual Cues to Help Users Navigate the Interface
- separated filters into 2 categories
- added icons for search, brightness switch, show all filters
- Keep the Design Style Consistent
- adjusted the resolution for UCI logo
- added a bright mark in nav bar
- adjusted the style of the tab bar
Version 2
%402x%402x.png)
- streamline the class searching experience
- designed a calendar feature to schedule the classes
- add visual cues to help users navigate the interface
- added icons for classroom location, professor, final exam, class time, class code, class section and class unit.
- added an "add to calendar" button
- keep the design style consistent
- redesigned the visuals for class search results.
Version 3
- streamline the class searching experience
- added a "minimize the calendar" feature
- add visual cues to help users navigate the interface
- designed class enrollment status
- designed color coded prerequisite badges.
- added comment buttons (click to expand)
- keep the design style consistent
- Based on the survey results, all the filters are brought back
Evaluate
We received generally positive feedbacks from the think-aloud testings. The participants quickly adapted to the new layouts and they were able to take advantage of the calendar feature immediately.
From several think-aloud protocols, we identified one minor usability issue with our redesign: it gave their eye strains that all the lectures and multiple discussions are in separate card format even though they are from one class.
Deliver
In the final version, we fixed the usability issue discover through think-aloud sessions.
Our final design contains an entire WebSoC's overhaul for both visual appearance and user experience.
We achieved the goals for the project which is make the website's visual representation more appealing and empathetic while maintaining efficiency for quickly looking up class information.
Through consistent design style and minimalistic visual cues, we presented a more visually appealing WebSoC. By combining the search page and result page as well as the addition of calendar and brightness switch, it would make WebSoC more efficient to use.
Redesigned WebSoC final deliverable
.svg)
