📚

UCI WebReg Redesign

Web Design

Design Systems

Timeframe

Team

Role

Deliverables

2 weeks

Team of 5

UI Designer, UX Researcher

High-Fidelity Prototype, Pitch Deck

UCI WebReg is the university's website registration and course enrollment process used by over 36,000 students every year.

OVERVIEW

A two-week sprint to reimagine the enrollment process

The UCI University Registrar reached out to the UCI ANTrepreneur Center to conduct research and design solutions to help improve the current website and course registration process. During a two-week period hackathon, students worked in teams to build a prototype and pitch a presentation to judges — some of whom work for the UCI University Registrar.

PROBLEM

An outdated system where students had to create workarounds for themselves

The UCI WebReg is an outdated course registration site, which has caused many frustrations and inefficiencies for students during the enrollment process.

💡 How to improve the old course enrollment process for students?

UX RESEARCH / COMPARATIVE ANALYSIS

Reliance on 4+ different sites to plan course schedules every quarter

Our team compiled a list of various existing websites that we wanted to reference. These are all very common resources UCI students utilize during the course registration period. But why is it that students had to access and gather information from multiple platforms in order to plan their schedules?

I created a list of notable features from each of these sites since these would be important to note when brainstorming features for our redesign.

What WebReg currently offers is minimal.

COMPARATIVE ANALYSIS

View Site

📰

General Catalogue

(course catalog)

  • Course descriptions

  • Course prerequisites & restrictions

  • Course unit value

View Site

🗓️

AntAlmanac

(schedule planner)

  • Calendar view of course schedule

  • Calendar view of final exam schedule

  • Allows for multiple schedule views

  • Integrated map view of campus with directions

View Site

🗓️

ZotCourse

(schedule planner)

  • Calendar view of course schedule

  • Calendar view of final exam schedule

  • Integrated instructor ratings

  • Integrated instructor grade distribution

  • Able to import schedule into Google Calendar

  • Print, Save, Export schedule

UX RESEARCH / SURVEY FINDINGS

Students were frustrated from losing their progress in the midst of schedule planning

The hackathon required all the teams to send out surveys to UCI undergraduate and graduate students. We helped collect 669 responses in total. Since every team was working to address the same problem, it became a matter of analyzing the huge amount of data and formulating solutions within our own team.

These were the key research findings that I compiled from the data.

Student Demographic

Research Highlights

⭐ Average Rating

2.56 out of 5.00

🖱️ Use Frequency

89% of students have used WebReg 10 or more times
➡️ That is a high percentage of returning users

📱 Mobile Friendly

On a scale of 1 to 5, students rated 3.94 on the importance of a mobile-friendly design

🖥️ Most Preferred Features

Integrate Schedule of Classes*

  • Waitlist Notifications & Status

  • Schedule Planner

  • More Efficient Queue

  • Search Bar

  • Live Chat Support

*Schedule of Classes is UCI's course catalog

HEAR FROM THE STUDENTS

🧑🏻‍🦰

"Too complicated. The whole process is very tedious and I always have to go back and forth between so many tabs."

👩🏻

"There were multiple times when WebReg would not be clear about why I was unable to apply to certain classes."

🧒🏽

"The interface seems outdated and it's surprising that a school with this many students doesn't have a website to keep up with the population."

User Persona

IDEATION

Brainstorming features to include and layouts on paper

Early on, I worked on providing sketches of the site layout on paper. This was immensely helpful for myself and the team as it helped us visualize the steps in the user process and address any problems early on.

Catalog

Catalog

Planner

Enroll

Enroll

LOW FIDELITY

Laying the foundation with wireframes

LOW FIDELITY

Laying the foundation with wireframes

Catalog

Catalog

Planner

Planner

Enroll

Enroll

HIGH FIDELITY / INITIAL PROTOTYPE

Our first prototype wasn't final — it was a conversation starter

During the two-week hackathon, my team and I created a prototype, which would be considered an initial draft. Our prototype was a good start — but it had plenty of room for improvement as it did not undergo any user testing.

HIGH FIDELITY / INITIAL PROTOTYPE

Our first prototype wasn't final — it was a conversation starter

During the two-week hackathon, my team and I created a prototype, which would be considered an initial draft. Our prototype was a good start — but it had plenty of room for improvement as it did not undergo any user testing.

USABILITY TESTING

The best feedback come from the users, not the judges

USABILITY TESTING

The best feedback come from the users, not the judges

ITERATIONS

Addressing pain points with thoughtful design decisions

A deep dive into design decisions that made a significant difference for the overall UX.

ITERATIONS

Addressing pain points with thoughtful design decisions

A deep dive into design decisions that made a significant difference for the overall UX.

1

Integrated Panel View

Synthesizing various platforms to streamline the process

Before

Previously, all these enrollment-related resources were their own sites.

After

Consolidating everything into an all-in-one platform resulted in • Reduced toggling back and forth between resources • Better handling of high volumes of information • Structured workflow for the user during the enrollment process • Adjustable, responsive panels offer flexibility and customizability • Accessible, convenient, and time efficient

1

Integrated Panel View

Synthesizing various platforms to streamline the process

Before

Previously, all these enrollment-related resources were their own sites.

After

Consolidating everything into an all-in-one platform resulted in • Reduced toggling back and forth between resources • Better handling of high volumes of information • Structured workflow for the user during the enrollment process • Adjustable, responsive panels offer flexibility and customizability • Accessible, convenient, and time efficient

2

Accordions for Information Architecture

Cluttered Navigation & An Overwhelming Amount of Content

Before

Within the course catalog, having the entirety of each course and its description displayed was an extensive amount of content — it was overwhelming and a whole lot of scrolling.

After

Utilizing accordions to organize content about each course resulted in • Ability for the user to control amount of information they want to view at any given time • Reduced scrolling • Clean, simplified view

2

Accordions for Information Architecture

Cluttered Navigation & An Overwhelming Amount of Content

Before

Within the course catalog, having the entirety of each course and its description displayed was an extensive amount of content — it was overwhelming and a whole lot of scrolling.

After

Utilizing accordions to organize content about each course resulted in • Ability for the user to control amount of information they want to view at any given time • Reduced scrolling • Clean, simplified view

3

Spacing

Body

Before

The text fields hardly had any spacing in between them and minimal padding. Users are more prone to misclicking the wrong area, especially for mobile usage and when they are on-the-go.

After

Proper spacing and use of white space contributed to • Improved readability and comprehension • Enhanced scannability • Visual hierarchy to guide the user's eyes through the content

3

Spacing

Body

Before

The text fields hardly had any spacing in between them and minimal padding. Users are more prone to misclicking the wrong area, especially for mobile usage and when they are on-the-go.

After

Proper spacing and use of white space contributed to • Improved readability and comprehension • Enhanced scannability • Visual hierarchy to guide the user's eyes through the content

4

Unclear Enrollment Status

Body

Before

Students were frustrated by vague error messages like “Course was not successfully added” or “You are not eligible to enroll at this time”

After

Reduced uncertainty and gave students actionable next steps by adding specific, informative messages such as “Course not added due to missing prerequisite of MGMT 101” or time-based messages such as “Restriction lifted for all schools and majors on October 15, 2025 at 9:00 AM”

4

Unclear Enrollment Status

Body

Before

Students were frustrated by vague error messages like “Course was not successfully added” or “You are not eligible to enroll at this time”

After

Reduced uncertainty and gave students actionable next steps by adding specific, informative messages such as “Course not added due to missing prerequisite of MGMT 101” or time-based messages such as “Restriction lifted for all schools and majors on October 15, 2025 at 9:00 AM”

5

Confusing Terminology

Body

Before

Students did not understand what “Course Bank” meant

After

Renamed to “Saved Courses” (student-suggested) Students immediately recognized the feature’s purpose without needing explanation

5

Confusing Terminology

Body

Before

Students did not understand what “Course Bank” meant

After

Renamed to “Saved Courses” (student-suggested) Students immediately recognized the feature’s purpose without needing explanation

6

Visual Design & Professional Feel

Remarkable design system to to establish credibility for a large organization

Before

Students felt that the first prototype did not look polished and seemed to lack credibility

After

Created a typescale, reusable components, and consistent design system A more polished, professional look that participants trusted

6

Visual Design & Professional Feel

Remarkable design system to to establish credibility for a large organization

Before

Students felt that the first prototype did not look polished and seemed to lack credibility

After

Created a typescale, reusable components, and consistent design system A more polished, professional look that participants trusted

HIGH FIDELITY / FINAL PROTOTYPE

Presenting an integrated and simplified enrollment experience

The reiteration of this prototype had more thought given to the specific design decisions that abided to UI design principles and, most importantly, addressed user pain points.

HIGH FIDELITY / FINAL PROTOTYPE

Presenting an integrated and simplified enrollment experience

The reiteration of this prototype had more thought given to the specific design decisions that abided to UI design principles and, most importantly, addressed user pain points.

Final Prototype

Final Prototype

NEXT STEPS

Future considerations for the project

NEXT STEPS

Future considerations for the project

📱

Responsive Design

Students are able to register for courses via PC or mobile devices — and many use their mobile devices for convenience and quick access. We would create a responsive design prototype if given more time.

📱

Responsive Design

Students are able to register for courses via PC or mobile devices — and many use their mobile devices for convenience and quick access. We would create a responsive design prototype if given more time.

📎

Course Schedule as Images

It is very common for students to screenshot and save a photo of their new course schedule to reference again. After providing a responsive design of the site, I would consider adding a feature that allows students to download a copy of their course schedule. Providing a compatible format and file type (for both desktop and mobile views) of their course schedule comes in handy for students to set their schedule as their wallpaper!

📎

Course Schedule as Images

It is very common for students to screenshot and save a photo of their new course schedule to reference again. After providing a responsive design of the site, I would consider adding a feature that allows students to download a copy of their course schedule. Providing a compatible format and file type (for both desktop and mobile views) of their course schedule comes in handy for students to set their schedule as their wallpaper!

🚀

Launch for Feedback & Reiterate

Our team only pitched our project to the judges with a short prototype demonstration. The next steps would be to release the prototype to groups of UCI students, gather feedback from their experiences, revise by incorporating the feedback and additional research — and repeat.

🚀

Launch for Feedback & Reiterate

Our team only pitched our project to the judges with a short prototype demonstration. The next steps would be to release the prototype to groups of UCI students, gather feedback from their experiences, revise by incorporating the feedback and additional research — and repeat.

LESSONS LEARNED

Takeaways to carry with me in my learning journey

LESSONS LEARNED

Takeaways to carry with me in my learning journey

1️⃣ Affordances & Signifiers

From my Designlab bootcamp, I learned about affordances and saw how this was heavily applicable and relevant to the outdated UCI course registration site. The current design of the interface is quite flat, and it is difficult for students to recognize affordances.

1️⃣ Affordances & Signifiers

From my Designlab bootcamp, I learned about affordances and saw how this was heavily applicable and relevant to the outdated UCI course registration site. The current design of the interface is quite flat, and it is difficult for students to recognize affordances.

💡

How can the user distinguish what is a button and what is not? Which buttons are active?

2️⃣ Don't Be Afraid to Change Old Systems

This was a website I had been using so often for the past 4 years in college. So I was eager to tackle issues that I had noticed early on but failed to pursue further. I am glad I participated in the hackathon project during my senior year because this inspired me to not be afraid to question or change old systems. Although the registration site is many years old, that does not mean it has to stay this way if it is not working for its users.

2️⃣ Don't Be Afraid to Change Old Systems

This was a website I had been using so often for the past 4 years in college. So I was eager to tackle issues that I had noticed early on but failed to pursue further. I am glad I participated in the hackathon project during my senior year because this inspired me to not be afraid to question or change old systems. Although the registration site is many years old, that does not mean it has to stay this way if it is not working for its users.

💡

What issues do I see in the daily products that I use? Why not change it or reimagine improvements to the current system?

NEXT PROJECT

Thanks for reading!

Check out another redesign project I did for an eCommerce mobile app!

NEXT PROJECT

Thanks for reading!

Check out another redesign project I did for an eCommerce mobile app!

🚀 Haul Mobile App Redesign

Happy you're here!

Get in touch.

LinkedIn

Email

Resume

Made with lots of ❤️ and ☕

2025 Cece Ross

Happy you're here!

Get in touch.

LinkedIn

Email

Resume

Made with lots of ❤️ and ☕

2025 Cece Ross

Create a free website with Framer, the website builder loved by startups, designers and agencies.