David Yoon's Portoflio

CAESAR Student Portal

How might we harness the excitement of a new quarter through Northwestern's class registration process?

Context

Northwestern’s student portal makes the necessary process of class registration a stressful and unnatural process for students. A friend and I sought to create an intuitive system that extends naturally from a student’s mental framework of planning and registering for new classes.

Timeline

Feb - June 2020

My Role

Structuring project plan and leading user interviews and testing phases

Outcomes

Desktop prototype

Research

We interviewed students across all 6 of Northwestern University’s undergraduate schools to understand the common problems in CAESAR’s user experience, focusing on the class registration experience. We then continued to information architecture (IA) and card-sorting tasks to discover these insights.

Sample Interview Tasks & Anecdotal Responses:

"Pretend to register for Design 384 and walk me through the process."
"What was the last thing you used CAESAR for? Could you walk me through your observations and reenact the process?"

Sample Interview Tasks & Anecdotal Responses:

"Pretend to register for Design 384 and walk me through the process."
"What was the last thing you used CAESAR for? Could you walk me through your observations and reenact the process?"

“It’s weird that there are so many steps. What are all the Next’s even for?”

“I don’t understand the arrangement of all the tabs under Manage Classes. What are these for?”

“The first page where you see the different courses is very overwhelming.”

“I wish I could get notified on certain classes I want to take. Last week they all filled up!”

Why is there a course catalog under degree progress? Isn’t that what Manage Classes is for? Oh it just brings you to this very broad page on the website.’

Key Insights: Most students use independent web apps to plan their class schedules before registration. CAESAR has poor organization and navigation systems, as well as redundant pages that create confusion.

Information Architecture Mapping & Content Audit

NEW YORK UNIVERSITY

NORTHWESTERN UNIVERSITY

MANAGE CLASSES FEATURE IS ESPECIALLY CONVOLUTED

Card Sorting Task

How might students best organize this information? We asked non-Northwestern students to complete a card-sorting task to prevent learned bias from confounding our results. Users consistently distinguished schedule planning and class registration as separate processes.

REMOTE CARD SORTING USING OPTIMALSORT.COM

IN-PERSON CARD SORTS PROVIDED VALUABLE QUALITATIVE INSIGHTS

Participants distinguished planning and enrollment as integral but separate stages in the registration process

Information was organized into 5 or fewer categories, validating the significant potential for simplifying the IA

User Personas: Josh & Judy

By creating 2 user personas based on the use cases and feedback from our research, we guided our design process with empathy for our target users.

We mapped out Josh and Judy’s experiences while trying to register for a class, realizing it filled up at the last second, and having to improvise their schedule on the spot. This use case was chosen as it encompasses the most commonly used features of CAESAR – as well as a truly tragic situation.

Reconstructing the IA

Working in a small team allowed us the flexibility to start with our own ideas and prototypes, and then come together to quickly receive feedback and bounce ideas off of each other. This allowed us to iterate quickly and efficiently, in line with the Agile design methodology.

Reorganizing the class registration experience based on a user's natural flow reorients focus away from navigating the product and towards the task at hand.

Wireframing & Prototyping

Hand-sketching wireframes focused our efforts on generating ideas and quickly verifying concepts instead of focusing on details. Then, collaboratively mocking up digital wireframes allowed us to further refine ideas and develop design details that impacted the overall user experience.

Initial ideation sprint, practicing generation of volume, rather than detail. Less planning, more sketching. Credit: Nick Halim.

The sheer amount of information on CAESAR was certainly a challenge. Changes made to a given module often impacted other modules - leading refinements being made in parallel. We focused on how to condense info and in a consistent and intuitive manner.

Low-Fidelity Digital Wireframes

Collaboratively producing digital wireframes allowed us to quickly explore and refine ideas while simultaneously providing a foundation for our updated design flow and user experience.

Outcomes

We started by investigating the existing onboarding flow and platform homepage on Five to Nine (FTN), as well as performing competitive research on similar companies. FTN’s current onboarding process doesn’t minimize the time for users to benefit from the platform, and neither does the platform homepage.

New Dashboard

Immediate access to crucial features and info

A Natural Flow

Plan, Enroll, Revise. Simulating the students' mental models

Mock Schedules

Plan multiple schedule versions to minimize risk and stress

It's Okay – Revise!

If When something goes wrong, quickly tweak your schedule

Mock Schedules

Plan multiple schedule versions to minimize risk and stress

It's Okay – Revise!

If When something goes wrong, quickly tweak your schedule

Dashboard & Landing Page

I completely overhauled the existing landing page and turned it into a dashboard. The goal is to give the user immediate access to CAESAR’s most crucial information and features, thereby reducing the need to navigate through the website.

Select classes to keep tabs on and track seat availability – minimizing surprises on registration day.

Each student has different priorities and uses for CAESAR. Custom links let them access their favorite features, fast

A Natural Flow: Plan, Enroll, Revise

Our new class registration flow naturally mimics the linear mental models identified during research.

We integrated a dedicated planning feature into CAESAR, eliminating the need for third-party tools.

Our new class registration flow naturally mimics the linear mental models identified during research. We integrated a dedicated planning feature into CAESAR, eliminating the need for third-party tools.

Calendar View & Class Search

Students visualize schedules in chunks, not time slots. We used an interactive calendar as a better schedule visualization tool to help students understand and plan their schedules.

We improved the class search feature displaying class search results before individual sections, in order to organize the flow of information.

Different sections (time offerings) are displayed after selecting a class. A status bar indicates whether a class has many, few, or no seats open.

Users can add a class to a mock schedule, add it to the shopping cart, or track the class enrollment

Special enrollment requirements (e.g. Permission Numbers) are displayed here so a student is fully aware of their eligibility before adding a class to their schedules.

Different sections (time offerings) are displayed after selecting a class. A status bar indicates whether a class has many, few, or no seats open.

Users can add a class to a mock schedule, add it to the shopping cart, or track the class enrollment

Special enrollment requirements (e.g. Permission Numbers) are displayed here so a student is fully aware of their eligibility before adding a class to their schedules.

Mock Schedules

Adding a mock schedule directly to a user’s shopping cart eases the transition from planning to enrolling.

An undo option – inspired by Jef Raskin’s principles of HCI – appears after a schedule is added to the cart. The alternative, a confirmation box, is ineffective as it fades out of a user’s locus of attention and causes habit formation to harm the user.

Drop, Swap, Enroll

When making changes to a class schedule, delays always risk a student’s preferred class filling up. Being able to make quick changes to a student’s current schedule is important, and we made tweaks to the existing features to facilitate this process.

Reflection

I was definitely passionate about reworking a tool that is so instrumental to a Northwestern student's academic journey. Working with a great friend also reminded me of the importance of empathizing not only with users but also with fellow teammates and designers.

Pat on the Back

Executing the human-centered design process and reiterating on designs based on feedback

Lessons Learned

Leading a product design and setting timelines for checkpoints in the project process

Outcomes

Presented work to relevant NU faculty to explore future implementation and use

Five to Nine

Walgreens In-Store Mode