Updated Student Registration for Course Hero
Role Product Designer II, Reported to Design Manager
Timeline Sep 2021 - Feb 2022
Skills UX-UI design iterations, prototyping
Timeline Sep 2021 - Feb 2022
Skills UX-UI design iterations, prototyping
Overview
Course Hero is a web-based platform that seeks to become the one-stop study tool to help every student graduate.
The vast majority of students discover Course Hero by searching for homework help on Google, and landing on a study document on the Course Hero platform. Registration is the first of several steps required to get past the preview. However, the sign up process was outdated & cumbersome, and resulted in high drop-off rates by students who were turned off by being asked for their school information.
The current sign up experience was overwhelming with lots of repetitive information, and frustrating to students in need who could otherwise become potential customers.
The project was part of a onboarding redesign initiative, and some early design concepts were started by a senior designer who also created the new design system. My role as Lead Designer for this project was to take the early design ideas as a starting point, work out some iterations, prototype them and prepare the final concepts to test.
The Problem
User data showed a high rate of abandonment in the registration funnel. One of the issues with the legacy sign up form was that students saw right away they needed to enter their school information to sign up. We discovered this was a big turn off to those students who thought their school would be contacted, and wanted to protect their privacy.
How might we redesign the registration process to encourage students to trust Course Hero and complete the sign up flow?
Video showing the legacy registration flow in a modal overlaying a course document.
The legacy standalone screen, showing the first step of registration .
Additional pain points:
● Lack of clarity into why they need to create an account to consume content on the site
● Fragmented or unoptimized login and sign up experience on the site
● Lack of information on why we need “university” info during sign up
● In addition, poor usability issues with the login led to students creating multiple accounts
Objectives
Our goal was to increase ease of use, bring the registration process UI up to date with our new design system styling, and make UX improvements to make the process more trustworthy and seamless for students.
Design Strategy
There were 2 user flows to unify: standalone page user flow & document overlay user flow.
I decided for efficiency’s sake to use a single modal component that could apply to both flows & would require less effort to maintain.
While exploring different layout options and applying the new design system styling, I considered how the order of the inputs might affect a wary student's hesitancy to continue.
Instead of asking students for their school information immediately after they selected student, I moved the school input to the 2nd step, after they opted to sign up with email. Once they entered an email address and password, they had invested a little bit more time and effort to the process. That's when they would come to the prompt to enter their school name.
At this point, I had a hunch they might be wondering, "Why are you asking for this?"
For transparency I included a "Why do we ask for this?" link that opens a popover explaining that the school information would only be used to personalize recommendations, and not be shared with anyone. This softened the friction and led to increased trust and less drop-offs.
A stakeholder had some ideas for laying out the registration form that she wanted to see. She thought the entire form to should be visible “above the fold”. I tried out various layout options, but the designs did not balance out as much as we’d hoped. So, I decided to keep the format in a single panel (like a modal), and keep the sign up method on a separate screen than the input form.
I thought that having the full form showing might be too overwhelming for users, so I suggested a progressive disclosure form. My thinking was that it would allow the user to focus more clearly on each step they needed to take. In the end, we reduced the progression to a couple of screens for the email sign up method.
For transparency I included a "Why do we ask for this?" link that opens a popover explaining that the school information would only be used to personalize recommendations, and not be shared with anyone. This softened the friction and led to increased trust and less drop-offs.
The final designs for logging in for desktop and mobile are shown in the videos below.
We tested 3 landing page layouts: one with a marketing tagline, and the last one contained the same benefit information as in the control in a side panel, but styled to match the upgraded UI.
Final results on the test showed the last screen to be the winner, and further tests led to the decision to remove the document-overlay flow altogether. Using a modal for both was helpful, but in the end the standalone page showed to be the strongest performer of the two.
