Course Recommender

Responsive website | fall 2016


course recommender pc2.jpg


Receiving acceptance letters from colleges is the best thing that can happen to high school seniors. Students arrive on campus and start to prepare for college with enthusiasm. However, their excitement gradually dies down as they encounter a horribly designed course registration site. Suddenly, the dream of finally taking classes they want turns into a nightmare.

Course Recommender is a new addition to the SIO (Student Information Online) website. It takes a lighthearted gamification approach and builds on the pizza ordering metaphor to help new students prioritize their goals when selecting electives and find the electives based on their personalized needs. 



New incoming students at CMU feel really frustrated about selecting electives. They are faced with numerous options including confusing cross-listed courses while provided with very limited information. 

The registration process is like going on a treasure hunt with a crappy map.
— Interviewee (Freshman Information Systems Major)
People on the Facebook group were freaking out about signing up for classes. Since I had no clue what to take, I was even more stressed out .
— Interviewee (Freshman Undecided Major)
I accidentally registered for a graduate class.
— Interviewee (Freshman Business Major)


From interviews and conversations with undergraduate students, we found that they select electives for different reasons to meet their personal goals:

  • Skill development
  • Interest and curiosity
  • Good quality
  • Easy grades

customer journey map




iteration 1

After developing the 1st iteration of our customer journey map of the preferred future, we realized the problem we have chosen to solve is still too broad for us to effectively reframe the question.

iteration 2

We decided to narrow down the scope of problem to be the frustrating process of a new student to decide on elects to choose.



dESIGN Solution


  • An addition to the existing SIO system
  • Help students explicitly prioritize their goals for selecting electives
  • Find electives based on their individual needs


We experimented with the strategy of looking at seemingly unrelated things for inspiration to reframe a question. Our reframing of the question was inspired by the the hair color matching game on Loreal Paris' website for hair products. When we tried to extract insights from our interview notes, we realized that the theme of narrowing down selections of electives is similar to narrowing down hair dying products on a shopping site, which is fun to play with.

Screen Shot 2017-01-23 at 7.56.26 PM.png



Jane li

Jane is an incoming undergraduate student from Pittsburgh who recently graduated from high school. Her favorite author is Jane Austen because her name is Jane. Sadly, she’s not very talented at writing like Austen, so she decides to major in Math. Before registration begins, she plans her course schedule. Most of them are easily filled with core courses, but she still has some empty slots. She decides to take an elective course in Computer Science in order to develop her Java skills more from what she has learned from AP class.



We followed the mobile first approach to design our screen. For the first iteration, we focused on simplifying the core content and imitating the layout and feeling of the Loreal Paris' website that we got inspiration from.





In order to make our interface design less dull, we developed a metaphor of making pizza to help create a more playful tone. We also included immediate feedback (adding number of courses on the recommendation list on the continue button, which will change as the user makes progress), so that the user does not get bored. 

For the first question, instead of simply having user select one of the four circles, we changed it to dividing a pizza into 4 sections that can either be dragged to expand or shrink. We thought this is more interactive and fun to play with.

For the second question, we changed the categories from school names to areas of study since our targets (incoming students who just graduated from high school) might not be familiar with all the school names.

For the final recommendation page, we changed the square course picture to circle which displays how the course fulfills the user's four core goals for selecting an elective. It also echoes back to the first question.



Pizza kind = area of study

1. pizza type.jpg

toppings = subjects

sauce = skills

3. sauce.jpg

amount  of hot sauce = course level

4. hot sauce.jpg

Screen design

Redesigned the course description page instead of showing the information from SOC (Schedule of Classes), so that it is more readable and has a consistent design. 


final products