DESKTOP

Carta Planning Experience.

Over several months, I led design for the core fleet of planning features for Carta – Stanford's official academic scheduling and exploration platform used by 95% of Stanford's undergraduates.

Work In Progress

This project is currently in the middle of user testing, so stay tuned to see further updates and eventual the final product!

Background

For the past few years, Carta – a popular course-planning website where students can read course reviews and create schedules – has been a prominent touchpoint in the academic endeavors of 95% of Stanford undergraduates. In Winter 2020, the team of researchers at Carta realized that the platform needed a facelift, recruiting 13 students to do so.

Joining the design team in the Spring, I began working on one core component of the redesign: overhauling the often overlooked Planner feature, where students can plan their 4-year academic schedules at Stanford.

Design goals

Understand the planning process

Breakdown the academic planning process into its most granular components.

1

Iterate towards the highest fidelity possible

Ideate, prototype, user test, iterate, repeat... repeat again... and again, etc.

2

Get it pushed

Throughout, work closely with the dev team, Carta researchers, and Stanford registrar to bring a world-class academic planning experience to the Carta platform.

3

Because Carta V1's Planner feature had been built without any standardized user research or sound design approach, the design team decided to start from scratch.

This would not be a redesign.

01

User Research

Conducting thorough qualitative research + obligatory affinity mapping, engaging with CartaLab researchers, running quantitative research on the broader student population, ideating and organizing core features to design.

QUALITATIVE RESEARCH

Sitting down with students

User interviews

Joining the design team in the Spring, I began working on one core component of the redesign: overhauling the often overlooked Planner feature, where students can plan their 4-year academic schedules at Stanford.

When all was said and done, we had 15 transcripted interviews from which to extract insightful quotes.

Kristina’s initial mapping of all relevant quotes

Affinity mapping

With easily over 300 quotes to pore over, Kristina iterated through rounds of affinity mapping to organize them and illustrate trends and patterns. I created my own Affinity map with her higher level organization to make sure I maximized my own comprehension.

My final Affinity Map for our user interviews – phew!

CartaLab research

Around this time, I reached out to Carta researchers (in the CartaLab research group) to learn about their academic planning findings on their research group of 100 freshman students.

I also read up on two research papers, “Choices, Identities, Paths: Understanding College Students’ Academic Decisions” and “Course Consideration: Understanding Undergraduate Course Consideration”.

Short-term planning insights

EVERYONE plans quarter-by-quarter

The sheer notion of "4-Year Planning" is a fallacy. No matter how much long-term planning a student has done, they always need to make adjustments during the quarterly enrollment season.

Quarters are goal-oriented

Students analyze their quarter goals, be it time commitment, GPA, interest only, balance between two subjects, etc. throughout planning to try to build up a quarter that meets those goals.

Must-take classes come first, then fillers

“Must-take” = courses that need to be taken a certain quarter for their major or degree fulfillment. Students then plan their secondary "filler" courses around those must-take courses that are locked in.

Quarter-planning is like playing Tetris

Planning a quarter schedule is all about fitting courses in around logistical constraints, conflicts, and preferences.

12-to-4

On average, students go from a "consideration set" of 12 courses to an "enrollment set" of 4 courses from registration opening to the add/drop deadline (the last day you can still change your enrolled schedule).

Long-term planning insights

If there’s any long-term planning being done, it’s the skeleton

Students make sure they're planning out the "skeleton" first: the "must-take" classes and sequences that ensure graduation on time based on requirements.

Importance of “sandboxing” multiple 4-Year Plans

Many students, especially those who haven't yet declared a major, find value in outlining different plans to gauge feasibility and prepare for each possible path.

4-Year Planning comes in all shapes and sizes

Students plan out their 4 years in whatever way they see fit, which leads to a diverse array of approaches.

I've seen students put classes [on their 4-Year Planner] simply because their boyfriend or girlfriend is taking that class… making the leap to say that what they add to their planner is in fact what they intend to consider taking is indeed a leap...

CartaLab researcher

Short-term and long-term planning differs most in the amount of available information… students might not plan more than a year ahead because they don’t have all the necessary information or are uncertain with their major.

When you think about planning long-term, there's a lot of uncertainty.

Context for the above insight

Stanford only releases scheduling information for classes (who's teaching what, what are the class-times, what quarters is a class offered, etc.) for the CURRENT academic year.

QUANTITATIVE RESEARCH

How do students 4-year plan?

What is 4-Year Planning?

The term “4-Year Planning” is a widely popularized term at Stanford, and it’s exactly what you might think. For most students, at some point in their undergraduate education, they plan out which classes they are taking and when on a spreadsheet to signify their “4-Year Plan”.

To better understand the nuances of the 4-Year Planning approach, our design team broadcasted emails throughout various cross-sections of the undergraduate population, asking them to send in screenshots of their 4-Year Plan.

The form we used to accrue student's 4-Year Plans

One example of a 4-Year Plan that we received

Trends throughout the 4-Year Plans

Color-coordination and labeling

Students color coordinate to distinguish the different purposes classes have (major, WAYS, must-take, etc.), and oftentimes label those distinctions on the 4-Year grid itself.

The "Saved" database

Students frequently maintain databases of courses that they're interested in based on various goals and information. As one student in our interviews put it...

That's the whole reason I made this [database] because I didn't want to be floating in like nothingness. Like, there are a million classes. I need to have a specific list that I already know I'm interested in so I can just like look at it and choose something from there.

Interviewee 3

The Requirements section

It was common to see students tracking their degree requirements progress adjacent to their 4-Year grid to ensure quicker cross-referencing. Students would often transcribe information about different requirements (i.e., "Take 3 classes from this list.") here. To ensure congruence with the 4-Year grid, classes here would sometimes be labeled either "Taken", "Planned", or "Not Planned".

IDEATION

From insights to ideas

User personas

At this point, since we were drawing from in aggregate over 200 research subjects, we utilized user personas to catapult us into the ideation phase.

USER PERSONA

Confused Christian

Christian is a wide-eyed freshman with various academic interests. He wants to make the most of his education, but is not sure what path to pursue.

User Journey

Excited to explore the intellectual opportunities abundant on campus.

1

🤩

Realizes he doesn't want to completely ignore his other "fuzzy" curiosities and aptitudes.

2

🤭

Dreads the idea of comitting a major for 2+ years and avoids creating a 4-Year Plan at all costs.

3

🙄

Tries to 4-Year Plan but is overwhelmed and confused with the never-ending web of contingincies.

4

🤬
USER PERSONA

Laidback Larry

Larry is a senior who's taken a more spontaneous and carefree approach to academic planning, often taking classes just because his friends were or he'd heard that "the professor gives easy As!"

User Journey

Despised the seemingly complicated degree planning process that he saw other students following.

1

😡

Struggles each enrollment season because he doesn't have a long-term plan or list of interested classes to turn to.

2

😖

As graduation nears, he chastises himself for his lack of intentionality.

3

🤬

Regrets not taking certain classes and exploring majors just because he'd wished for an "easier" way to plan.

4

😰
USER PERSONA

OCD Olivia

Olivia is a junior majoring in Biology who plans obsessively. In downtime, she plans for fun, obsessively analyzing pro/cons lists and sandboxiing multiple paths simultaneously.

User Journey

Wields the mindset: "this is MY education, so I'm going to maximize it".

1

🤗

Treats long-term planning as a full-time job, yet fatigue openning up 7+ tabs to do so each time makes her dread the process.

2

😬

Struggles each enrollment season to choose a quarter schedule from the multitude that she has sandboxed.

3

🤯

Wonders desparingly if all of her efforts are worth it.

4

😭

We decided that, in alignment with the overall direction of Carta’s redesign, that Confused Christian would be our primary user persona to design for. Once Christian steps foot on campus, it is his existential angst that we most want extinguished via our planning experience!

“How Might We” brainstorm

With this core group of users to design for, our design team devised a set of “How Might We” statements to guide our brainstorm. Each statement we used to summarize a key pain-point in the academic planning process that at least one of our personas faces.

The midst of our brainstorm session – organization around our HMW statements

Difficulty/importance matrix

Another key Design Thinking tool that we relied upon was the Difficulty/Importance matrix which allowed us to settle upon a definitive set of functionalities and features with which to focus on moving forward.

Giving a hierarchy to our ideas

The planning view family

At this point, we began organizing our highest-priority ideas into tangible views, views informed and inspired by our quantitative research and the Carta V1 platform.

4-Year Planner

The 4-Year Planner, like the 34 4-Year plans we received in our quantitative research, is where users engage in long-term planning, updating their requirements progress, extracting courses from a Saved database, sandboxing different academic paths, among other key pieces of functionality.

QuarterView

The QuarterView is the workbench for students to build up their quarter schedule, playing a form of academic “Tetris” as they choose class-times and plan around non-academic constraints. If they’ve made a 4-Year Plan elsewhere, it is the QuarterView where they turn that plan of considered courses into the reality of an enrolled schedule.

Sidebar

Carta V1, primarily a course exploration platform, allowed students to plan short-term (in a fixed-position sidebar) while they browse through courses. We agreed that this view would persist in the re-design because it would bridge the course browsing experience with the planning experience.

The 4-Year Plan, QuarterView, and Sidebar would from here on encompass the academic planning experience on Carta!

02

Long-Term Planning

Researching analogous UI, building grayscale prototypes based on previous insights, realizing the long-term planning experience.

ANALOGOUS UI

The Apple + Google Calendars

In order to begin designing the 4-Year Planner, I chose to look at both Google Calendar and Apple’s Calendar app (aka, Apple Calendar). These interfaces offer users a place to visualize, organize, and plan a diverse array of events and schedules around multiple contingencies – strikingly similar functionality to our 4-Year Planner.

My Apple Calendar!
"Tagging" via a color system

Similar to the trends we saw in our Quantitative research, both interfaces allow users to categorize events into different “calendars”, each with a unique color that tags relevant events. Users can filter these categories to view a subset schedule.

Apple's Calendars sidebar
Switching temporal duration

Users can quickly toggle between Week, Month, and Year views, for example, to show event content at different temporal durations to best suit their use case in that planning session.

Apple's segmented control and Google's drop-down menu
Event callout

Regardless of their temporal view, every event, upon selection, displays a callout which elaborates on event detail. Users can edit event settings in this manner.

Google and Apple's event callouts
Draggability

To account for the spontaneity and flexibility of short and long-term planning, both calendars offer dragging functionality for their events.

Event draggability on the Google Calendar mobile app
GRAYSCALE PROTOTYPING

Realizing the 4-Year Planner

The 4-Year Planner grid

The grayscaled 4-Year Plan grid that I settled on (Junior/Senior year not pictured)
Row/column layout

68% of 4-Year Plan screenshots were formatted with academic years as rows and quarters as columns, so we replicated this layout to align our Planner with most students' mental models.

Requirement tagging

Reducing complexity and real estate, I tagged (and color-coordinated) classes based on 1 metric: the requirement(s) that it is fulfilling in the requirements section. As we learned, students’ main priority was requirements-tracking. This would also enforce congruence between the grid and the Requirements section that students crave.

ME 216 fulfilling the WAYS-ED and their major's depth requirement
Draggability

Aligning with the Google/Apple calendars, we knew that draggability would vastly improve the UX of the planning experience so that users could quickly reorganize their classes on the grid.

Courses can be dragged onto QuarterCard dropzones
Tabs for multiple plans

Tabs was a convention extremely analogous to the multiple tabs for plans frequently seen on the spreadsheet files we recieved.

The tab bar that allows users to switch between plans

Saved (database)

The Saved section!
Airbnb analogy

In Airbnb, if a user wants to save a stay for future consideration, users can save it to categories that they create themselves!

Users, upon saving a stay, choose which saved list to save it to
Saved organization

Because there seems to be a variety of use cases for “saving a class to Saved” (i.e., some users save classes for use cases as niche as if they end up pursuing a Data Science minor), the Airbnb approach, rather than saving courses to predefined categories or to a generic database, seemed very robust for our users.

Example saved lists that a user might create
Navigation with Requirements

Aligning with a trend in the 4-Year Plan screenshots and because of a lack of available real estate on a standard desktop screen, I decided that the Requirements section and Saved database would occupy a sidebar to the right of the 4-Year grid.

However, I laid out two navigation formats to see which approach users liked most during testing.

The two navigation approaches that I outlined: a resizable window or tabs

Requirements section (aka, ReqsBar)

The Requirements section, or the "ReqsBar" as I called it

At Stanford, there are 70+ majors, each with unique requirement rules that change frequently and can be altered at an individual basis. Requirements tracking is a mess of ever-changing contingencies and complexity.

Despite this, as many interviewees and participants in earlier research stated, users expect Carta to be able to produce omniscient feedback on requirements progress.

After confirming with the Carta dev team that we didn’t have the bandwidth to implement (and maintain) absolute coverage of the requirement-contingencies framework, I decided to strike a balance between “omniscient” guidance and “build-your-own major” flexibility.

Skeletal Outline

While we may not be able to inject every requirement rule into code, we can pre-populate the ReqsBar with the higher-level organization for each degree. For example, a Biology major using the 4-Year Planner would automatically see the 60-Level, Foundations, Lab, and other major-specific categories on the ReqsBar. Also, every Stanford student has to fulfill the same General Education requirements – ah, some standardization!

Manual "assignment" workflow

To fulfill each of the categories within the Skeletal structure, a partial “build-your-own” requirements approach would be necessary. I envisioned that each student would assign classes to fulfill one (or more) of the pre-populated categories at their own discretion, based on their understanding of their degree requirements.

Users drag courses from the 4-Year grid onto the Reqsbar to assign a class to a requirement
Requirement transcription

Of course, I didn’t want to leave our users in the dark! Common in 4-Year Plan screenshots was what I called “rule transcription”, wherein users would recite/attach relevant requirement information – occasionally in the form of links – to the planner itself.

Users can reveal callouts containing requirement information and which courses they can assign to a requirement

The 4-Year Planner (variations not pictured) before I dove into user testing

03

Short-Term Planning

Researching analogous UI, building grayscale prototypes based on previous insights, realizing the short-term planning experience.

ANALOGOUS UI

How students short-term plan

In order to flesh out the QuarterView, I needed to first analyze the interfaces that students currently use to plan their short-term academic schedules.

SimpleEnroll

Virtually every student uses Stanford’s official SimpleEnroll platform to enroll in (and often times plan) their quarter schedule. For the current quarter in which course enrollment is open, students search classes they're planning to or are considering taking. Students also have the option to “Plan” a class rather than enroll in it.

The SimpleEnroll platform for my current quarter!
Weekly "time-block" view

This is what separates, according to users in our Qualitative research, SimpleEnroll from the other official enrollment tool – enrolled classes show up as “time blocks” on their weekly schedule, giving users an intuitive workflow to build their schedule. Hence, the analogy of playing “Tetris”.

SimpleEnroll's weekly schedule organized into course time-blocks
Callout + drop-down

SimpleEnroll provides detailed logistical information to give context to the weekly time-block view upon user interaction. Users can see in more detail the scheduling information of each course within two UI components.

SimpleEnroll's drop-down and callout UI's

Carta V1 Sidebar

The Sidebar on CartaV1 persists throughout the Carta experience, offering a touchpoint for users to short-term plan regardless of their current stage in the course browsing user flow.

The Sidebar that students used in Carta V1
Congruence with Planner + browsing flow

When a user pins a class that they are looking at, that class is automatically added to the pinned classes on the Sidebar for the selected quarter. Within the Planner, users can also see, for each quarter, the classes in those quarters that have been pinned.

Basically, the Sidebar is just showing the same scheduled content as the Planner, but in a different temporal duration.

Potential UX Problems that immediately arise

The Quarter schedule is hidden when there are many classes pinned to that quarter, because it’s beneath those items.

All sections for a pinned class are automatically added to the schedule, so classes with many sections make the schedule incredibly packed.

An example of an overly crowded schedule
GRAYSCALE PROTOTYPING

The short-term planning views

Sidebar + QuarterView

Since the Sidebar + QuarterView show scheduled content within the same “temporal duration” – one quarter, there are many consistencies threaded through both views by nature of their shared use cases.

"Must Take" + "Other"

I organized classes for a quarter into 2 buckets – Must-Take = “classes that the user NEEDS to take then” and Other = “classes that the user is considering to take then”.

Categorizing courses pinned to a quarter as "Must Take" or "Other"

This decision came from insights that students’ #1 priority during long and short-term planning is planning the classes they “need to take” and making sure that they take those “need to take” classes on-time.

Pinned-to-Planned workflow

Utilizing Carta V1 terminology, students explicitly “plan” courses that are “pinned” to a quarter. Recalling the UX problems of the Carta V1 sidebar and the fact that students often consider (or “pin”) 12 courses for a quarter, it was necessary to make users explicitly choose which courses would show up on the weekly schedule.

Workflow of a user planning a class onto their schedule within the QuarterView
Quarter comparison

Since students are building a quarter that meets pre-defined goals, we find that a critical part of this end goal is the ability to answer, “how does the quarter schedule that I’m building compare to past quarter schedules that I’ve taken?”

Example comparison charts comparing the selected quarter with past quarters in the QuarterView

The QuarterView and Sidebar (variations not pictured) before I dove into user testing

Merging the Quarter & 4-Year views

Zooming in and out

The 4-Year Planner and QuarterView features are simply 2 different views – temporal durations – of the same content, inspired by the Apple/Google calendars. A user can navigate from their 4-Year view to the QuarterView to "zoom" into a quarter or vice-versa, depending on their use case in that context.

Persistence of Saved + ReqsBar

Since many students (especially undecided freshmen) plan one quarter at a time, it was necessary provide them access to the Saved database and ReqsBar rather than forcing them to toggle to the 4-Year view to access and update that information.

04

User Testing

Conducting user tests, synthesizing insights, iterating, ideating, on repeat.

Work In Progress

This project is currently in the middle of user testing, so stay tuned to see further updates and eventual the final product!

Thanks for visiting.

Home
NEXT PROJECT

Songkick Redesign

Go