Standard Catalog

UI/UX Design / September 25, 2022

UI/UX Design

September 25, 2022

Cover image.

Standard Catalog is a redesign of the college registration experience.

Issue #1: Providing Context

Screenshots of the system used by the college I go to. Left side is the registration page, right side contains the course catalog.

In the current system used by my university, class information is separated from the registration page. This adds friction to the registration flow if users want to see information about a class.

Students also tend to go to outside sources, such as Rate My Professors, to get a better sense of their instructor. In some cases, this data can be misleading or inaccurate; however, no better data source exists for the student.

Sketch of the class page, including registration info, description, and buttons.
Sketch #2 of the class page, including the number of credits and the prerequisites.
CS 361: Student study the foundations of humancomputer interaction and user experience design. This class covers topics such as designing for usability, multi-model interfaces, and the UX design process. Theory will be put into practice with several projects throughout the semester, which involve the design and development of user interfaces on mobile devices.
CS 361: Credits - 3, Prerequisites - CS 102 (completed)
PHIL 101: An introduction to approaches and issues in fundamental areas of philosophy such as ethics, political philosophy, philosophy of religion, and metaphysics. As part of the course, students explore how philosophy can help to shape and to justify personal values.
GD 313: Introduces the major epochs in the history of graphic design. Explores how visual communication was designed to fit the needs of pre-modern societies and how it responded to shifting contexts and new technological inventions at three critical moments: the invention of the printing press, the industrial revolution, and the digital revolution.

Initial sketches indicated some of the page requirements, such as the ability to view credits, class description, and prerequisites. Also indicated is the ability to view registration information from the same page, such as time, location and instructor.

On this page, users can preview the class before they register, as well as view the completion status of prerequisites. This provides better context to the user and makes them do less work to find this information.

Screen showing registration options for a class.
Screen showing the app in a loading state when registering for a class.
Screen showing a notification for a class registration.
Screen showing registration information for a class.
Overlay showing information about a professor.
Web page showing class information.
Web page showing registration times.
Wireframe of the user feedback flow.
Flowchart of the user feedback flow.

After registering for a class, section-specific information like location, time, and instructor are displayed on the same page as before.

Users can view more information about a professor, including a short biography, contact information links, and a consensus of other students’ feedback on the professor.

To generate overall professor consensus, a feedback form like this is presented to each user after each term. This ensures that only those who took a professor’s class can rate the professor, and reduces potential bias by limiting the amount of information collected and displayed.

Issue #2: Planning the Long Term

Two screenshots stitched together, showing the Program Evaluation page for my school.
Condensed view of all the sections, with my annotations.

The current system presents too much information at once, and doesn’t clearly distinguish between different types of information. The single point size of the text, and the added spacing between related elements, makes it difficult for a student to understand important information.

There are an excessive number of sections, including similarly named ones that can cause confusion for the user. For example, the last two sections both contain requirements related to Computer Science, so how am I supposed to know which requirements are under which section?

In my design, I aimed to limit the information presented to the user, and improved the spacing so related elements are closer to each other. I also cut down on the number of sections, so the user is guaranteed to find the information they need.

Graduation requirement sketches.png
Frame #1 showing the graduation page.
Frame #2 showing the graduation page.
Frame #3 showing the graduation page.
Frame #4 showing the graduation page.

In my initial sketches, graduation requirements were integrated with the class bookmarks page. I soon moved the content to its own page because of the amount of content displayed.

With my design, I improved the grouping of related information, and used visual elements like the progress bar to better visualize information. I also removed the toggling of information, so no information is hidden from the user.

Issue #3: Schedule Viewing

After class registration, there’s an opportunity for the app to become a hub of information students can refer to. The app can be used to check class times and locations, find their professor’s contact information, or look up graduation requirements.

Keeping this in mind, I designed a schedule page, to accommodate the user’s need to see class times for all of their classes.

Screen showing a person's class schedule.
Screen showing different semester options in the schedule.
Screen showing the editing mode for the class schedule.
Screen showing a person's saved classes.

Issue #4: Existing Technology Stack

To better accommodate existing systems, I designed the sign-in flow around a school’s single-sign-on (SSO) platform. This eliminates the need to design traditional account management flows, such as a sign-up form.

Screen showing the sign-in page, with a button to search for schools.
Screen showing the selected school on the sign-in page.
Overlay showing different school options and a search bar.
Placeholder overlay for a webview.
Sign-in screen on the web.
"Redirecting" message and loading state for the sign-in screen.

Custom Icons

Custom icons used for the project.

For this project, I created a custom icon set designed to match the final prototype.

Attributions

All digital sketches were created using Excalidraw. The final prototype was designed using Figma, and the typeface used is Greycliff CF. All icons were designed using Figma.

Image credits, in order presented:

Like this project? Consider sharing it: