ProjectBiddit.app

TL;DR

Biddit helps students plan their upcoming semester and take advantage of the amazing offerings at the University of St. Gallen. Micha Brugger and I built the product from scratch within 5 weeks, scaled it to the point where it became an integral tool used by almost half the university, and successfully sold it to the Student Union of the University of St. Gallen (SHSG).

Problem

The University of St. Gallen has a special system for signing up for classes. Instead of some variation of first-come-first-serve, students get 500 points each semester to bid for a seat in a class across multiple rounds in a Vickrey-style auction.

While the system itself might sound a bit unusual and overengineered at first, it is popular amongst students and generally seen as very 'fair'. I like it a lot because it forces you to consciously prioritize courses.

However, this also means that the preparation for each bidding round is crucial as mistakes can be costly (not getting the classes needed/wanted). Unfortunately, there was no easy way of gathering all the needed information, analyzing it, and ranking the courses. Each student had their scrappy way of doing it, ranging from handwritten notebooks to Excel macros.

Approach

By talking to Micha about these frustrations over the summer of 2021, we decided this would be a perfect excuse to finally get into web development with React and build a solution for the upcoming fall semester 2021. With only 5 weeks left, we got started right away.

Our first step was to map out the process of preparing for the bidding phase by reflecting on our experiences and interviewing other students. Overall, there are four major steps:

Through our research, we discovered a few key insights:

• In theory, the process is linear; in practice, however, there are many loops and lots of back-and-forths.
• The information is scattered across many university websites & databases.
• Each student has developed a crutch to deal with the high manual workload (--> NEED!).
• The depth of the information required is dependent on the step in the process, and students need to be able to transition between these fluidly.

Next, we turned these findings into high-level Figma mockups and used them for design exploration and validation with students:

As a result, we defined four user stories:

1. As a student, I want to be able to anticipate the workload, so I don't set myself up for failure.
2. As a student, I want to be able to access all the information in one place as needed, so I can focus on choosing the right courses and not get overwhelmed or waste time.
3. As a student, I want to be able to filter courses, so I can quickly eliminate non-relevant courses.
4. As a student, I want to be able to preview my schedule and check if it is feasible, so I don't bid on courses I won't be able to take.

Solution

Bidding should not be boring and administrative. It should get students excited about discovering amazing classes, designing their education, and putting them on a trajectory of success in their early professional journey. That's what Biddit is trying to achieve.

The Biddit interface has four general areas that map to the user stories from above:

After reviewing the degree requirements (i.e., How many credits do I need per area?), students need to get an overview of the courses and be able to put together a list of potentially interesting courses quickly. It's not about the details but identifying 2-3 alternatives for each course they ultimately need to take.

While adding to the list of interesting courses, eventually the lectures of two courses will be at the same time. Biddit automatically checks for these situations and warns students by marking them in yellow in the course list and the calendar.

In these cases, the decision usually comes down to the specifics of each course:

• Which one sounds more interesting?
• Do I even meet the prerequisites for the courses?
• How will I be graded?

Getting these answers before meant opening up a different university website and downloading the PDFs. With Biddit, students can easily access those by simply clicking on the course:

The final step is reviewing all the selected courses and getting an understanding of how high the workload is going to be. We built the summary for just that with the three most important categories: time, credits, and exams.

Afterwards, students are ready to bid on the courses on the university's website.

Technical Implementation

In a nutshell, Biddit is a progressive web app built with React and Tailwind CSS. The backend is an integration with the university's MS Azure infrastructure for authentication/authorization.

Challenges

While there is a long list of challenges we faced during this project, I'd like to highlight two product-related and one technical one as they were crucial to the success:

How do we ensure that the data is accurate and up-to-date?

Our initial idea was to simply scrape the relevant university websites, store & host the data in a SQL database, and build the frontend in React. However, after I had coded all the scraping scripts and was building the backend in Python's Django, I started to realize a problem:

If students rely on Biddit to plan their semester, how can we make sure the data we have is accurate and up-to-date?

First, I thought about using CronJobs to scrape the websites each day at midnight. But what happens if something changes throughout the day? Let's do it every 12h. But why not every 6h, 3h, ... Eventually, I decided to simply contact one of my computer science professors at the university. With his help, we got in touch with the IT department and were able to convince them to grant us access to the relevant API endpoints. Problem mostly solved. I deleted the backend and got to work on the integration of the APIs and the frontend with Micha.

How would people use Biddit?

While the university's bidding portal is only available on desktop, soon after launch we realized that many students wanted to do the initial planning and discovery on mobile, especially early on in the process (e.g., on the bus on their way to uni). HotJar and Google Analytics were crucial to help us understand this dynamic. Students don't do their planning on desktop because they like it, but because the university's rigid system forces them to.

We quickly adjusted and launched the corresponding mobile version within a week. Today, depending on the stage in the process, mobile makes up between 25-50% of our traffic.

Not only focusing on how people are solving their problems today but how they would love to solve them (very hard to imagine and communicate directly for most people) was a key lesson for me.

How do we handle data in the frontend?

I had previous experience in data analytics and building a REST-backend for Rockethack.io, however, handling data in the frontend was new to me. Throughout the project, I learned a lot about props, states, and how to structure a React app.

This is the first time I experienced technical debt. Today, I would use something like Redux or Recoil for state management instead.

Conclusion

During the spring of 2022, Micha and I started to discuss our vision for Biddit and what would happen to the project once we finished our degrees at HSG. Fortunately, we found the ideal home: the Student Union of the University of St. Gallen (SHSG).

The acquisition was the perfect outcome as it would allow us to continue to work on the product and release more complex features and scale the product with access to the SHSG's resources and marketing channels. But most importantly, it also guarantees that Biddit will be available to all students for free long-term, achieving our ultimate goal: Allowing students to focus on what matters.

You can read more about the acquisition here.

I could not be happier about this project. What started as two students complaining about a personal experience turned into the incredible journey of building the solution and ended with a successful acquisition of Biddit after it became an integral part of the semester planning for almost half the university.

We were also interviewed by the university about our project here.