Coursewise

Winter/Spring 2023 Product Project

Tagline

the ultimate academic companion

Introduction

Coursewise: Revolutionizing Course Selection at UC Davis

Welcome to Coursewise, the groundbreaking web platform developed as part of the CodeLab Product Program at UC Davis.

The current course registration process at UC Davis lacks transparency and detailed information, making it challenging for students to navigate their academic journey effectively. Coursewise provides UC Davis students with access to grading distribution and enrollment statistics from previous quarters, empowering them to create optimal class schedules.

During the 15 week CodeLab Product Program, our team combined business skills with a deep understanding of the product lifecycle and then rapidly designed, developed, and launched the platform, delivering a user-friendly and intuitive experience for students.

Join us as we redefine course selection at UC Davis with Coursewise, enabling students to navigate their academic journey with confidence and ease.

Sincerely,

The Coursewise Team @ CodeLab

The Team

Mel Avina-Beltran — Project Manager and Senior Developer

Nava Babaei — Senior Designer

Gennifer Hom — Senior Designer

Alan Chuang — Senior Developer

Timeframe

Jan — Jun 2022 | 16 weeks

Tools

React, JavaScript, CSS, Tailwind, Express, Node, Python, MongoDB, Figma, Google Slides

The Project

Discovery

The challenge our team was presented with was to take the pre-existing platform, AggieExplorer, and innovate it into a product that would address the current and future needs of college students.

First, our team had to figure out our go-to-market. Across the US, there are around 18 million undergraduate students in college. Of that number, 2.2 million are undergrads in California. And finally, there are around 9,000 undergrad students here at UC Davis. Our product would be targeting these 9,000 students.

Next, we had to research which features students deemed the most important when trying to register for classes. We also had to know how users reacted to AggieExplorer, in order to better decide which features we should add or remove from the pre-existing platform.

During the ideation phase, we took a look at potential competitors across the market, as well as what features they had to offer. We found that popular platforms locally boasted features such as grade distribution, enrollment probability, discussion forums, scheduling capabilities, and syllabus info. However, one thing that stood out to our team was that none of them had any overlaps with other platforms, leading to students having to open a myriad of tabs and websites in order to access all these features when registering for classes.

AggieExplorer previously presented numerous statistics to the user when they were searching up classes on the website. However, our testing found that users thought the format that the site presented information in was too cluttered, and made it hard to digest. After multiple rounds of user and market research and testing, we decided that the most important features to keep were the enrollment probability and grade distribution statistics.

We also asked users during testing which features they would want to see incorporated into future iterations of the platform, and most prominently among the ideas we received was that students really valued mutual feedback from other students, and they wanted to be able to easily navigate and digest information.

This also helped us come up with our product roadmap. In the short term, we would first need to iron out the existing bugs within the codebase, as well as try to optimize response time from the backend when users were searching for classes. We would then incorporate the additional features obtained from user testing, and finally try to modularize and incorporate our platform into existing ones already used by students, such as ScheduleBuilder in the form of a Chrome extension.

Wireframes and Prototyping

The design process went through multiple iterations, starting from lo-fi sketches and progressing towards final wireframes. Each iteration aimed to refine and improve the user experience. The initial focus was on fixing the hierarchy of information and buttons, ensuring that important elements were prioritized and easily accessible. The team also worked on clarifying labels and specifying statistics to provide clear instructions and accurate insights. These early iterations helped establish a solid foundation for the interface design.

As the design process continued, attention was given to enhancing the functionality of the interface. Flexible search filters were introduced to allow users to customize their searches and narrow down results based on their specific preferences. This flexibility improved the overall search experience and made it easier for users to find the information they were looking for. Additionally, the team implemented saving options, enabling users to store their preferred classes, search filters, or customized settings for future use. This feature eliminated the need for users to repeatedly set up their preferences and enhanced their overall efficiency within the interface.

Another important consideration during the design iterations was the potential inclusion of a schedule calendar. The team explored the integration of a calendar feature within the interface, allowing users to plan and manage their activities directly within the application. This provided a centralized platform for organizing schedules and related tasks, streamlining the user’s workflow. By incorporating a schedule calendar, the interface aimed to further enhance usability and convenience for users.

In conclusion, the design process progressed through iterations, addressing various aspects of the interface to improve the user experience. From fixing hierarchy and clarifying labels to introducing flexible search filters, saving options, and potentially including a schedule calendar, these iterative improvements resulted in a more refined and user-friendly interface. The final wireframes showcased the culmination of these enhancements, offering users an intuitive, efficient, and satisfying experience within the application.

AggieExplorer to Coursewise Hi-fi Sketches

Home Page

Catalog

Statistics

Schedule

Development

The application is built using various technologies and frameworks for different components.

On the frontend side, React is used as the main JavaScript library for building user interfaces. JavaScript and CSS are also utilized for implementing the interactive and styling aspects of the application. Additionally, Tailwind CSS is employed as a utility-first CSS framework to streamline the styling process and create a consistent design.

On the backend, Express, Node.js, and Python are the primary technologies used. Express is a popular web application framework for Node.js, providing a robust and flexible foundation for building server-side APIs and handling HTTP requests. Node.js, on the other hand, is a JavaScript runtime environment that allows the execution of JavaScript code on the server-side. Python is used in specific backend functionalities, providing additional capabilities and flexibility.

For data storage, MongoDB is the chosen database solution. MongoDB is a NoSQL document-oriented database that offers scalability and flexibility for storing and retrieving data efficiently.

The web application consists of several UI page components:

1. Home Page: This page serves as the introduction to the web application. It provides a brief description of the application’s purpose and core features, such as grade distribution, enrollment probability, saving classes, and personalized planner. Users can get an overview of what the application offers.

2. Catalog Page: The catalog page allows users to search for courses that are stored in the database. It displays general course information, including the number of units, description, prerequisites, and more. Users can explore and find relevant courses based on their interests and requirements.

3. Statistics Page:

• Grades Toggle: This page presents historic class grade distributions. Users can filter the statistics based on the class name, professor, and quarter to view specific grade distributions.
• Enrollment Toggle: The enrollment page provides statistics related to class registration. Users can check the availability of open seats for a selected class throughout the course registration timeframe. This information helps users make informed decisions about their desired classes.

4. Log-In Features:

• Profile: This feature allows users to access and manage their profile information. They can update personal details, preferences, and other relevant information associated with their account.
• Saved Courses: Users can save courses of interest to their account. This feature enables them to easily keep track of courses they are considering or planning to enroll in.

By utilizing these frontend and backend technologies and implementing various UI page components, the web application aims to provide an intuitive and feature-rich experience for UC Davis students during the course selection process.

Takeaways & Challenges

Takeaway 1: Effective Communication and Collaboration

One of the key takeaways from our journey was the importance of effective communication with team members. With busy schedules and the challenge of checking slack messages often, finding time to meet for this project, on top of our other time commitments (ie. class, other clubs, etc.) became difficult. However, we quickly learned that maintaining constant and open lines of communication was crucial for successful teamwork. We made it a priority to find alternative ways to connect, such as scheduling regular meetings or utilizing other communication tools (ie. zoom, text, etc.). By fostering clear and consistent communication, we were able to overcome obstacles and work together more efficiently.

Takeaway 2: Adapting to Time Constraints

A significant challenge we faced as one of two CodeLab product teams, was the limited time we had to understand a new codebase. Unlike other teams, who had a generous 15 weeks, we started our journey with only 9 weeks to delve into the codebase, as the prior 6 weeks our team spent creating and expanding our product. This time constraint forced us to be focused and proactive in our design and deployment approach. We quickly realized the importance of spending time wisely and prioritizing our efforts. Despite the shortened timeframe, we were determined to thoroughly understand the codebase and make meaningful contributions to the Coursewise’s fruition.

Takeaway 3: Embracing the Power of Collaboration and Support

Another valuable takeaway was the importance of asking for help when needed. Throughout our journey, we encountered various challenges that required expertise beyond our own. Whether it was seeking guidance from developers, designers, or project managers, we could not be afraid to reach out and ask for assistance as we had no time! In particular, when we lost our initial project manager, we recognized the significance of relying on a network of professionals. Through collaborative efforts and support from others at CodeLab, we were able to navigate through difficult situations and achieve our ultimate goal! And for that we are extremely grateful to everyone at CodeLab and UC Davis.

In summary, our journey taught us valuable lessons that we will carry forward. Effective communication, adapting to time constraints, embracing collaboration and support, and breaking tasks into manageable pieces were all critical factors in our success. By applying these takeaways, we can continue to grow as a team and overcome future challenges with resilience and determination.

Lastly, we express our heartfelt gratitude to the entire CodeLab community for granting us the privilege to work on this project. The past 15 weeks have been a transformative journey, filled with invaluable lessons and cherished connections. As we embark on new ventures as agents of change, we carry with us the inspiration and wisdom gained during this experience.