/UX Design /Responsive Web Design /Customer Journey Map
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.
Date Sep - Oct 2016, 3 weeks
Team James Yan
Course CMU 05-651 Interaction Design Fundamentals
Instructor Karen Berntsen
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.
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.
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.
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.
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.
"The process of selling old house is stressful because I don't have good legal advice to help me negotiate."
"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."
"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.
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.
It’s hard to make decision on which course to take due to the lack of course information and feedback from previous students.
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.
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.
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.
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.
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.
Students now can communicate and know about insights of the course from other students' comment.
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.
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.
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.
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.
We used visual cue, animation, and text guidance to boost users' confidence when they add stars.
We simplified daily dressing pick-up for young female and help them gain insights on their wardrobe.
We worked with PNC financial group to redesign their online platform to facilitate context-based collaboration of institutional clients.
We designed a mobile app to connect property owners and people looking for parking spots.