Class Star

Course registration system redesign to let students take control of their waitlist

/UX Design    /Responsive Web Design    /Customer Journey Map

CHALLENGE

For this project, we were challenged to dig out problems along a student’s journey from receiving the acceptance letter to the arrival at campus of Carnegie Mellon University(CMU). We were asked to pick up a problem and solve it with a responsive website innovatively. Class Star is the solution we came up with to resolve the waitlist problem during course registration of new admitted students. We turned waitlist into exchangable spots and reframed it into an opportunity for students to communicate about the course.

How can we increase student's control over their waitlisted courses?

Date Sep - Oct 2016, 3 weeks

Team James Yan

Course CMU 05-651 Interaction Design Fundamentals

Instructor Karen Berntsen

Design Outcome

Class Star: a responsive website to allow students to exchange waitlist seats

To enable students take control over their waitlist, we designed Class Star, a website platform on which students can exchange their class seats and communicate about a course. With the website, students now have full knowledge of their class registering process and can start off a new semester with great confidence.

Introduce a new system to show preference and help students get into the class they love

To give students a way of showing their preference, we introduced "star" into the registration system. The more stars you give, the higher chance you'll get to secure a seat. We also introduced a new concept of "droplist" to let students know their chance to get into their favourite class.

A platform to enable students to communicate and learn about a class

To reframe the waitlist challenge, we were thinking: what if we transform waitlist into an opportunity for students to communicate about a class? In addition to adding a comment section, we designed a new list showing students who want to drop the class and motivate waitlist students to talk to them.

Intuitive registration process with guidance

The website shows the registration process and guide students go through it with text guidance. Fresh students can easily figure out what they need to do at the moment.

Design Process

/ Guerilla research to define problem space

What problems are there along a student's journey to CMU?

To identify pain points along a student's journey to CMU, we first conducted guerrilla research with one undergraduate student and two graduate students. Based on the interview, we made an as-is customer journey map depicting all the stages that a student might come across on his or her journey to the university. Among all the action, we identified three problem spaces.

Guerilla Research: get it fast, get it for free.

Sam
19 years old
sophomore
native resident

Shirley
26 years old
first-year graduate student
native resident

Ying
24 years old
second-year graduate student
international student

Three problem spaces
1
Previous house selling

"The process of selling old house is stressful because I don't have good legal advice to help me negotiate."

2
Renting new house/apartment

"I don't have time to fly to Pittsburgh to check the house situation."
"We asked for a few pictures remotely, but it's hard to tell if it's a good place or not."

3
Course registration

"So many people on the waitlist. I don't know if I can get into the class."
"I kept auditing all classes that I was interested in to keep tracking them. This is so exhausted."

After looking into all the problem spaces and considering the medium we were required to use — responsive website, we finally decided that the third problem space — course registration — was the most appropriate one to focus.

/ Insights synthesis

What's wrong with the current course registration system, especially the waitlist?

The current waitlist system follows the following rules:

First come, first serve. The current waitlist spots are ordered by registration time, but the registration time for different students is randomly distributed, which might result unfairness.

Maximum waitlist 5 courses. Each student can waitlist 5 courses at most.

No communication ways among students. Students on waitlist are not able to know other students’ thoughts or preference towards the course.

No information of chances to get in. So students can only wait and hope to get a spot.

Lack of insights and communication channel

It’s hard to make decision on which course to take due to the lack of course information and feedback from previous students.

Uncertain about waitlist

It’s hard to make decision on whether to stay on a course waitlist because students have no idea on the chances that they could get into the course. 

/ Reframing & Ideation

What if we transform waitlist into an opportunity for students to communicate about new courses?

Then we used pen and paper to rapidly brainstorm possible ideas. We were trying to reframe the problem to help ourselves gain new perspectives. Instead of just thinking about how to increase students' control over waitlist, we were also thinking about how to turn waitlist into an opportunity to communicate about courses?

"Reframing is a method of shifting semantic perspective in order to see things in a new way."
--- Jon Kolko

After several rounds of ideation and speed dated with our fellows, we came up with this idea to make the waitlist spots into something exchangeable, and give them “price” by measuring a student’s desire towards the course. The stronger desire a student has, the higher “price” he or she would love to “pay” for the spot.

Ordered by preference and use stars as measurement

We took out registration time factor out of current system, and instead, ordered waitlist spots based on students’ preference measured by stars. Each student will be given 100 stars before class registration starts.

Droplist and waitlist

We let students know who is considering dropping a course by creating a droplist. Students who have already registered a class but considering dropping it put their names on the drop list, so waitlist students could know their chances of getting into the course.

Automatic exchange system

At a certain time of the day, the system will automatically match waitlist students with droplist students based on their relative position. The exchange happens daily until the end of course registration period.

Comment and chat function

Students now can communicate and know about insights of the course from other students' comment.

What would the future course registration process be like?

With the envisioned system in mind, we imagined the future course registration process and made a new future customer journey map, within which no pain points exist during course registration for CMU students.

/ Prototype & Iterations

Translate the ideas into valid design

Based on the ideal customer journey map, we created user flow with wireframes and tested the flow to make sure it's reasonable. With the validated flow, we then further turned the design into hi-fi prototype.

Design Iterations

We used Balsamiq to quickly draft key elements on each page based on the ideal flow, and then used Sketch to refine layout and detail elements. Finally, with the last iteration, we refined the user flow to make sure it's reasonable and did visual design.

1st iteration with Balsamiq to identify key elements.
2nd iteration with Sketch to identify layout and detail elements.
3rd iteration with Sketch to adjust layout and element based on feedback.
User flow in wireframe

/ Design decisions

Make unfamiliar into familiar

From user testing, we found that the biggest problem was that users were not familiar with the newly introduced concept - "drop list". The unfamiliarity made them uncertain about the next step and obviously added friction to the experience. To solve the problem, we made three changes: make the introduction of the concept into multiple steps, change the UX writing into something familiar, and use text guidance.

/ A closer look at the design

Home Page
Elective Course Page
Add stars to show preference

We used visual cue, animation, and text guidance to boost users' confidence when they add stars.

Responsive Web Design

/ More projects