We inspired the UCI Registrar to redesign their course registration system.

As a team of UC Irvine students, we have experienced countless frustrations with the current WebReg system that everyone uses to register for classes. The UCI WebReg hackathon provided the perfect opportunity for us to offer a solution! We took the initiative to conduct surveys on our peers, and with their feedback, designed and developed a working prototype that everyone could enjoy.

Source: UCI WebReg Hackathon Timeline from antrepreneur.uci.edu

One tab to rule them all

With the current system, students have to go through the following process:

• Navigate through the University Registrar's Schedule of Classes to browse available courses
• Log onto WebReg during their enrollment window
• Repetitively enroll courses into the system by copy-pasting individual section codes
• Visit StudentAccess to verify that their enrolled classes went through the system.

That's a lot of tabs! Especially for students who need to enroll on their phone or without a large monitor.

We decided to simplify this process. More specifically, we wanted WebReg itself to be the "one-stop shop" that handles all the flow for student enrollment.

A comprehensive study list

Instead of having students log out and navigate to another tab to view their enrolled courses, we wanted to change how students visualize their schedule.

We decided to make two simple changes:

1. Group corequisites together (e.g., Lecture, Labs, Discussion) for every course
2. Display those enrolled courses on a live schedule for users to see.

Plans and Auto-enroll

Another common point of feedback that we observed mentioned that WebReg is too unstable to handle numerous network requests.

Although reconstructing the backend was out of our scope, we addressed this issue by implementing customizable student plans. Users would also have the option to set them to automatically enroll right when their window opens.

In this way, network traffic gets distributed more evenly, as some students may choose to plan their schedule ahead of time, then leave it to the system to handle the rest.

Search for anything

Keeping a list of course codes to enroll in has always been tedious and difficult to manage. We wanted to implement a search system that not only searches by course name or code but also through names of instructors or specific course sections.

Before the storm

We wanted to prepare ourselves before we were able to design and develop our first prototype.

A couple of days before the first hack session, we made ourselves familiar with Figma, an application where we practiced jamming out some ideas together! This was a period where we got together as a team for the first time, had a bit of food, and condensed our survey responses into a file.

Here were some notable annotations we made to the existing systems:

First Demo

On Saturday morning (1/28), Zotology broke the ice by starting on the first demo.

Our tech stack for this project was NextJS, Tailwind, and Radix UI. Even though we were only required to present a design slideshow, we wanted to take the extra step further and create something that people could use with their own devices!

From a technical perspective, however, it took a while to get momentum going at first. The designers were hard at work sketching out lofi prototypes on Figma and the whiteboards. And we developers had to configure our repository and install dependencies. All we had were abstract features in our heads, but nobody was able to agree on a solidified visual to produce.

After a bit of back and forth, while adding and scrapping ideas left and right, we were able to hash out a few key features before calling it a day.

The first pitch

Most of the productivity that went into the first demo had really happened around 7 hours before the first pitch. Following the previous night, we decided to again ditch the two confusing "plan" and "enroll" buttons. We then had a long laundry list to complete, but at least our designer helped us visualize our first demo:

And a few hours later, this is what we produced:

However, even though we had our deployment live, it still lacked some level of interactivity that we wanted in order to stand out. Outside of the ANTrepreneur center minutes before we had to enter the room to present, we fleshed out the functionality to let users "save" dummy plan data.

Crunch time had really caught up to us, but we nevertheless felt proud of all the hard work we managed to squeeze out in the past couple of days.

The presentation was dazzling, all thanks to the public speaking talent of the team. Most importantly, however, we could never forget the awestruck judges when we placed a QR code on the Keynote and let them know we built a website and that can visit it live. We were thrilled that our stunt actually ended up working.

Source: ANTrepreneur Center, WebReg Hackathon Semi Final

And the rest is history: later that night Zotology had officially become a Top-5 finalist of the WebReg Hackathon.

One step backward

Getting to the finals was undeniably a difficult hurdle to overcome, especially given how many talented people we saw from other pitches. However, there were some gripes that we had with our first demo that did not seem to fly that well.

To begin, even though our first design really screams "UC Irvine", we received criticism that the colors stood out too much. To revise this, we started from the bottom; we completely stripped down our home page design devoid of much styling, in order to direct the user's attention to the Enrollment Window card.

We also found that the dates card was too squished and the plans card took too much attention and should be smaller. So we decided to switch their grid positions to fit their desired widths.

Finally, we decided to change the wording to be more professional than personal. Namely, "View My Saved Plans" became "Your Plans", since the old wording seemed too casual for a course enrollment system.

We also started the second demo on a completely clean slate. With a new git repository, we needed to reinitialize everything and even ran into similar problems we had in our first demo. We also decided to upgrade the second demo to Next.JS 13.2 beta using the experimental app directory and initialize a database with Supabase, an open-source solution for implementing the interactivity we weren't able to fully achieve in the first demo.

Another step backward

We hadn't begun coding the second demo until 10 days before our video pitch was due, yet we still had a large task ahead of us.

We wanted to be the team that "made everything work" and take the extra step forward to offer a solution for students to use our product to plan their Spring 2023 courses. So we did everything methodically - we scraped real course data straight into our database, and we invested in Algolia search using that so users could search for classes based on anything they type. From any course title to any professor's name, our search was unrivaled.

However, the more we deviated from our first demo, the more we missed the original design that many of our friends enjoyed seeing. And at that point, we started to lose our true vision of what we wanted to achieve in this hackathon.

What made matters worse, though, was that Zotology shrank from a five-stack to a four-member team due to unforeseen circumstances. And with the power of only four members, we weren't at our fullest potential.

This marked a pivotal moment in our development process. After some deliberation, we decided to recover some scrapped design files and database backups, and we accepted that we really had to step out of our comfort zone to bring our vision back to reality.

Three steps forward

Our first order of business was to re-evaluate our approach and create a compromise between our original and current design of the site. After some back and forth, we managed a design that had a similar format to our original. However, although we felt it was necessary to tone back some elements, we did so without having to sacrifice too much on aesthetics.

We also had to overhaul our schedule component. As it was added last minute in the first demo, it felt much out-of-place compared to the design of the rest of the site.

For comparison, here was the old schedule and course view:

And here is the design of an all-new, reimagined UC Irvine WebReg that we were finally proud of!

For our next task, while we were busy resuming work on coding out the redesign, we also organized a storyboard for our video and began filming. Although we were very rushed on time, we were able to show off the key features we hoped everyone else would enjoy too!

This was also a good time to take a break, clear our minds, and touch some grass since we have been working non-stop on this project for an entire week.

Real UC Irvine STEM major touches grass (colorized)

After our video, we had one final item on the list: we wanted to create a redesign for WebGrades for professors and WebAdmin for counselors so they could easily use the same efficient tools to get their work done.

As part of our research, we discovered a demo that professors could reference to upload and input student grades. For our redesign of the professor view and counselor view, we wanted to both update the interface to maintain consistency with our WebReg design and improve the UX to bring attention to what matters the most.

Source: https://www.reg.uci.edu/perl/GradesListDemo/1

And with all of that out of the way, all that was left was preparing for our final presentation in the next few days!

One final step

After another few days of coding, we were able to get all of our main features working:

• Live class search
• An improved enrolled list view
• Calendar and classes syncing with the database

In addition, we were finally able to fully implement a working plan and auto-enroll feature in this final demo. We also were able to sync user plans with the database, to create an even more authentic WebReg experience!

Finishing touches

With the amount of praise we had received for our first keynote presentation, we decided to continue with the same theme again.

Just like the first, our final pitch encompassed our user research, design iteration process, and demo reveals of our WebReg, WebGrades, and WebAdmin redesigns. However, we had a longer time constraint for us to share our live demo in front of the audience and answer questions.

While we were preparing the slides, I wanted to include the same "wow factor" that defined Zotology's reputation in the first round. However, since most teams had a working website, we needed to push it out further.

That's when I found a YouTube tutorial on how to use Spline, a design tool for creating 3D web browser experiences. It showed how to take an ordinary mockup of a website (which was easy to replicate in Figma) and extrude elements to make them "pop out" of the page!

So yeah, I made one for our website.

Meanwhile, the team and our social media outreach tried their best to spread the word about our design and have people vote for us. We had a little over a week until our presentation date, so we wanted to make the most of our remaining time gaining attention, rehearsing our pitch, and ironing out our demo.

200+ registered UCI users, 1000+ API calls, and 20,000+ searches. Our robust demo proved itself to work.

We had never undertaken such an influential project. This was a once-in-a-lifetime opportunity for us. What seemed like nine whole weeks spent brainstorming, designing, and coding, felt as timeless as the old WebReg.

As we walked up present again in the ANTrepreneur Center, we weren't the same people from six weeks ago. Looking back at everything, I have realized how much we all have changed, not just by learning new design or development skills, but how we had matured as people. Fighting through when we were at our lowest, going forward when we were losing hope, and keeping our heads high when it mattered the most, I knew we had it in ourselves all along.

After several all-nighters, numerous YouTube tutorials, and countless visits to online documentation, we had pride in what we showed to the audience. Our presentation style was professional, our designs were attractive, our demo worked flawlessly, our 3D spline animation was mesmerizing, and one tripped-over cable later, our time was finally up.

And with that, Zotology won 3rd place in the finalist round at the UCI ANTrepreneur WebReg hackathon.

Source: ANTrepreneur Center, WebReg Hackathon Final

Zotology's design, along with the rest of the finalists' designs, would then be sent to the UCI Registrar in the following weeks.

Epilogue

"Hey, do you want to do this one hackathon to redesign WebReg?"

"Sure, I'd join."

was how it all started for me, and that's what I had imagined happened to everyone else.

We cooked. We shared double-cheese pizza. We laughed and roasted each other’s ideas. Also, we wanted to name our team [expletive] WebReg, but we were more than just friends utilizing coding knowledge.

Challenging ourselves with such an unprecedented task was definitely not easy. From the bottom of my heart, I would like to thank my team, our supportive friends, the organizers, and everyone else who participated.

So what's next? Perhaps another hackathon, design-a-thon, or competition of some sort? Definitely down for that.

I'll be ready to go again soon. But for now, I'll definitely be taking advantage of this break.