Peter’s Roadmap: PeterPortal’s 4-Year Course Planner
by Trisha Le, Iqra Abbaali, and Ryan Mohta
Peter’s Roadmap is an interactive tool that helps UCI students plan out courses they need to take each quarter and school year. This system enables students to create and customize a holistic arrangement of required courses for their degree and modify it throughout their academic career at UC Irvine.
The main goals the system aims to accomplish are:
- Enable students to plan a long-term schedule for their academic years.
- Allow students to identify and account for course prerequisites.
- Facilitate the tracking of degree requirements so students can graduate on time.
- Provide flexibility, usability, and efficiency when planning out courses.
The target audience is undergraduate UCI students and other stakeholders include UCI Academic Affairs, academic counselors, ICS Student Council, and developers.
Competitive Analysis
Leveraging the strengths and weaknesses of competitors
Before designing a new product to solve a problem, it is important to assess how others have approached this problem already. This is the role of competitive analysis: researching and using related software that already exists, incorporating the strengths of each of these softwares into our own design, and using their weaknesses to indicate what to avoid during development. We performed four competitive analyses of different course and degree planning websites:
- ICS Academic Planning Worksheet (UC Irvine): The simplest of the websites we tried out, this was nothing more than a spreadsheet allowing the user to input their classes over a four-year timescale. While very straightforward, it contained only the most basic functionality and as a result was very tedious to use.
- NUSMods Planner (National University of Singapore): This website introduced us to the concept of “drag and drop modules” that could be placed in different sections corresponding to a specific quarter or year. It was very intuitive to use, allowing for smooth dragging and dropping and adding/removing a course. Some aspects of the UI could be improved (such as the placement of sections, harsh colors, and excessive horizontal scrolling), but nonetheless, it gave us an idea of what the overall layout of our website should look like.
- TigerPath (Princeton University): As with the NUSMods Planner, TigerPath was intuitive and featured a similar layout. The TigerPath feature that impressed us the most was its search functionality: its placement as a panel on the side of the screen felt natural, and searching was “fuzzy,” meaning the user could type in the course code, name, or description and the intended course would pop up in the list. We intend to incorporate this in our own product and have already included it in our prototype layout.
- Stellic (independent): This website featured the cleanest design of all, and was the primary inspiration for the current design of our own website. Each year can be expanded or collapsed if necessary, with sub-sections for each quarter that also expand or contract to fit the number of course modules.
User Research
Understanding user needs, frustrations, and experiences
The next step in deciding what functionality to include in our website is to understand what our users actually want. We created a Google Form survey to understand how UCI students plan their courses, and distributed our survey across various communication channels (Slack, Discord, Facebook, and Reddit) to ensure participation from a variety of UCI students.
Our survey featured multiple-choice, checklist, and rating type questions about course planning resources people use, challenges they face when planning out courses, and, if the responder does not use any course planning tools, what functionality would encourage them to use one. We also added an optional space for people to upload a screenshot of their course plan to look for any common themes to incorporate.
At the conclusion of the survey period, we received 111 responses, the majority of whom already have four- or one-year plans:
We then looked through the data to identify common issues and suggestions people mentioned, and narrowed it down to five main things that can make course planning easier:
- A unified application including major requirements, general catalogue, and schedule of classes
- Not having to check prerequisites
- Create multiple course plans or backups
- Know which quarters a class is offered and which professors are teaching it
- Comprehensive information about a course (prereqs, past teachers, ratings, etc) all on one page
Almost all of these requests will be satisfied by either Peter’s Roadmap itself or its integration with the main PeterPortal Core (lending features such as the prerequisite tree and course pages featuring comprehensive information about a course), which was great news for us since it meant that our efforts will cater towards our users’ needs and demands.
(To ensure we received the most authentic responses from our respondents, we did not mention our project at all in the survey)
Requirements Specification
Defining functional and non-functional requirements
Our goal with Peter’s Roadmap is to provide students a one-stop-shop for degree planning. After carefully evaluating the strengths and weaknesses of competing applications and analyzing common trends from the survey, we brainstormed a list of all functional and non-functional requirements that this system hopes to achieve. In terms of functional requirements, there are 3 main categories, which include “must haves”, “nice to haves”, and “great if we can get to.” The following section lists out the “must haves” for Peter’s Roadmap:
- Add course
- Remove course
- Browse and search for courses
- Add year
- Add quarter
Other functionalities that we hope to achieve include things like, creating custom modules such as elective placeholders, viewing course offering history, receiving course recommendations, marking courses as taken to keep track of major requirements, and more!
After carefully creating a list of all of the functional requirements, we created a use case diagram and accompanying use case descriptions for each. The purpose of this was to augment our understanding of how the system will flow and what information is needed in order to successfully accomplish a user’s task.
For non-functional requirements, the 4 major characteristics that Peter’s Roadmap hopes to accomplish includes usability, flexibility, reliability, and correctness. Usability is one of the major goals of this application because UCI students struggle to plan courses long-term primarily because they have to keep numerous tabs open to carefully plan out which courses to take. Peter’s Roadmap will eliminate the need for this and condense all of this information into one platform. Flexibility is another major characteristic because students constantly modify their schedules and may change majors/minors. Peter’s Roadmap will accommodate for this by enabling students to load/save their schedule and modify it as they see fit. Lastly, reliability and correctness are equally important because we want to ensure students get accurate information to make their academic journeys at UCI the most successful it can be.
Design
Aplying evidenced-based UI/UX design
For the final phase of Peter’s Roadmap’s design stage, the team applied evidence-based UI/UX design in order to create a range of wireframes and transform that into a high-fidelity prototype.
Each member began with creating a low-level wireframe that outlined the general structure of how they envisioned the application to look. After comparing each of the wireframes, we combined the best parts of each into a mid-level wireframe. In the mid-level wireframe, we added more details outlining exactly what information will be displayed on each component, refined the design more, and also worked out how different modals and pop-ups would look like. Finally, we took the mid-level wireframe and created a high-fidelity prototype. In the prototype, we added more details, such as following PeterPortal’s design guidelines in color scheme and typography, and made it interactive and clickable using Figma’s prototyping system (see demo below).
Throughout the design process, we made sure to keep Nielsen’s 10 Usability Heuristics and Norman’s 6 Design Principles in mind. For one, Peter’s Roadmap follows the principle of there being a “match between the system and the real world.” In our survey, we asked students to submit pictures of their 4-year course plan and found that most students kept track of this in a spreadsheet, where each row represented a year and each column contained all of the courses they would take in a quarter. Our system closely resembles this design, so students will find course planning on this platform intuitive. In addition to this, Peter’s Roadmap adheres to having “consistency and standards” by following PeterPortal’s design guidelines for color scheme and typography. Another key heuristic this system follows is providing “flexibility and efficiency of use.” Students will be able to add/remove years and quarters as they see fit and drag and drop courses into different quarters. On top of this, students will be able to edit the unit count for eligible courses (such as research) and create custom modules. These functionalities are intended to help students allow their schedule to be flexible and modify it as their degree plans change.
Implementation
Now that we have completed the planning and design phase, we are currently working on implementing our prototype and integrating it within PeterPortal. The application will be built with React.js along with React DnD and the PeterPortal API. We aim to develop a MVP (minimum viable product) within the upcoming weeks, and continue to come up with new ideas for the system.
With Peter’s Roadmap, we hope to provide an excellent and essential tool for current and future UCI students.
