Duration
10 weeks
Type
Course project
completed in team of 5
Role
Project Manager, UX Designer & Researcher
Overview
The WebReg website is used year-round by UCI students who need to access their course schedule or make changes to their enrollment. The current website's design, however, poses a number of issues, which makes the enrollment process a hassle for its student users.
The Problem
WebReg's design can be seen as confusing and unfamiliar for new, incoming students due to outdated UI practices and features. As students ourselves, we not only share these concerns about usability, but also envision solutions for modernizing an antiquated system and improving on overall student experience. Our redesign of WebReg seeks to eliminate the ongoing confusion UCI students face whilst navigating the website and overall facilitate the enrollment process for students.
Planning
Since this project was completed for a course surrounding project management, we were guided to first formally plan out our design process before actually executing it using critical project management skills. This largely included the process of defining requirements, creating schedules, etc. This process altogether was crucial to effectively managing and carrying out the tasks required to complete our redesign.
The Gantt chart schedule we created and followed for this project is depicted on the left.
.png)
User Research
To begin our research process, our team members created and distributed a survey to better understand what UCI students liked and/or disliked about WebReg’s current design. From the survey responses, we discovered a variety of issues that students had with the website’s current design.
Survey Results
Most participants reported issues and dislikes regarding the visual design/layout of the website and its automatic logout feature. Multiple participants also reported discontent with having to manually enter course codes while registering for classes and accessing their schedule.
When asking about what features they think would be helpful when enrolling in their classes, we found that the majority of respondents would like to see an enhanced visual design as well as useful features such as course searching, schedule management, and a logout timer.
Ideation
Based on our research, we decided to focus our redesign on four main elements: efficient course enrollment, enhanced schedule management, updated visual design and layout, and managing automatic logouts. It was my responsibility to design how these elements would be implemented within WebReg's user interface. I first drafted a variety of sketches, and then consolidated those ideas into basic wireframe models.
Sketch example
Wireframe example
Prototyping
After completing the initial drafting process, we moved onto developing a high fidelity Figma prototype, which I was largely responsible for. Using the low-fidelity wireframes I created previously, I applied interactive elements to the design to make it more suitable for user-testing., as well as other finishing touches such as color, sample texts, etc.
Click the button below to interact with the full prototype:
Course Enrollment
I took into consideration student suggestions from the survey's free-response question and implemented a condensed version of the university's current comprehensive course list within the design. Students can search, sort, and filter through a course list containing relevant course information. They can then directly enroll and/or waitlist in classes via an "enroll" and "waitlist" button on the side, allowing for a more efficient enrollment process and eliminating the need for manual enrollment using course codes.
Schedule Management
I provided a more organized view of the student's course schedule where students can directly drop courses and view other relevant course information. Course queries should be sortable and filterable by a variety of categories, such as time, course code, etc. Students should be able to export their course schedule to a local file which they can use with third-party calendar-management software.
Automatic Logouts
Because our scope was limited to simply reconstructing the user interface of the website, I could not eliminate WebReg’s automatic logout feature, as that is largely concerned with the backend of the website. However, because it was a critical point of concern for our users, I implemented a logout timer so that students would be able to gauge how much time they have to effectively navigate the site in a single session.
Visual Design
I reconstructed the entire layout of the website to be more modern and intuitive. In addition to following Nielson’s ten usability heuristics, I also looked to Dribbble, a design resource platform, for inspiration on how to format the design. I made changes to the font style, font size, and color in line with modern web-flow conventions (eg. sidebar menus, color-coded availability tags etc.). To maintain a sense of familiarity for continuing students, I tried to implement some aspects of the original design, such as the homepage layout and other website elements such as the ability to view fee statuses and enrollment windows.
Usability Testing
We recruited a handful of UCI students to test our prototype. Each participant was asked to complete a set of usability tasks using the Figma prototype and provide us with further feedback or suggestions on the design. However, due to time constraints, we were unable to apply this feedback to our design.
Usability Tasks
Four of the five participants we recruited successfully completed the tasks we provided for them.
One participant had difficulty locating their fee status, as it was unclear to them which page it was on. This issue resulted out of confusion over the labels in the navigation bar. To resolve this issue, I would need to change the label so that it more effectively describes the content of the page.
General Feedback
All five participants preferred our design over the current design. Although this small sample size may not be representative of the entire UCI student population, this feedback reassured our team that our proposed redesign was headed in a positive direction.
Suggestions
Although all of our participants expressed satisfaction with the presented design, they provided us with several suggestions to how we could further refine and enhance the design. Such suggestions included making certain labels more clear, adding more detailed course information to the course search feature, and keeping the option to manually enter course codes for those that prefer it.
Takeaways & Reflection
-
Redesigning the WebReg system has given us the opportunity as students to understand how our peers interact with user interfaces in an academic context. Overall, the positive feedback we have received from our peers so far has assured us that our vision for WebReg’s user-interface has prospects for being a successful and useful enrollment tool for UCI students.
-
One of the main challenges we faced throughout this process was conducting sufficient research. Initially expecting to receive about 100-200 responses after extensively advertising our survey, we were only able to gather 62. This ultimately posed risks to the accuracy of our research, as we could not be entirely sure if this sample size was accurately representative of the UCI student population. Despite the low turnout, we were still able to draw relevant results from the data we received.
-
Through my roles in this project, I was able to learn project management and leadership skills that I can continue to apply in the industry of UX design. This was also my first time taking full responsibility over the design aspect of a project in a team environment and I am proud of what I was able to accomplish on my own, but also think it would have been very beneficial to have a fellow designer on the team.
-
If we were to do anything differently, we would have conducted more extensive research and testing of our proposed design. We hope that this design can be used as inspiration for future renditions of the UCI WebReg interface.