↓
↓
Designing to excite & empower
7.17.2019 — UI/UX Design and Illustration for Course Hero
The world of education can often feel like a pay-to-win scheme. In a world of private tutors and expensive textbooks, Course Hero seeks to give everyone a fair chance. From study guides to infographics to personalized support, millions of students from all backgrounds come to Course Hero to get the help they need to graduate. I got to work here as a UI/UX intern in the Summer of 2019.
I spent my last few weeks designing, illustrating, and animating an update to the Course Hero iOS app from scratch. Interviews and observation revealed the need for a focused interface that places the most valuable features in front of users. Check out my process below.
THE PROBLEM
Hidden & hard to use
Problem
7.43% of users interact with our “Ask a Question” feature. Only 1.57%. ever ask a question.
Hypothesis
Users either don’t know what the feature is, or don’t feel comfortable using it.
The ability to “Ask a Question” on the Course Hero app is one of our flagship features.
Here, students stumped on a math problem or a Spanish assignment can take a picture of their work and upload it to Course Hero. In minutes, a live tutor will respond with a step-by-step solution.
It’s a great resource. But in 2019 it was hidden behind a confusing onboarding process, opaque home screen design, and clunky text editor.
As a result, only 7.43% of our users saw the Ask a Question form, and less than 2% ever asked a question. After live-observing 15 users and taking a peek at the design, I hypothesized that most folks either didn’t know Ask a Question was there or didn’t feel confident using it.
Below is the original onboarding flow, home screen, and Ask a Question form for the 2019 Course Hero app.
Old App Screens
(Use side arrows to go forward or backward)
User is presented with two conflicting tasks. Should they press button to sign up, or swipe right to view value propositions? If we don’t know, they won’t know. Testing revealed that ~80% of users click the sign up button before swiping, unknowingly skipping the Value Proposition carousel.
This value proposition is a near copy of the previous one. Tutoring is a key benefit of Course Hero’s mobile app, but we undermine student interest in our offerings by feeding them irrelevant or repetitive information. Only 1 in 5 users swiped to this screen. This is valuable real estate that's hidden & hampered by unfocused UX.
Data shows that accessing Course Hero study guides and practice tests is the most common use case for our document-viewer feature. With this in mind, the ability to “save notes” is not what makes the feature or our app essential to users—it’s the ability to access the world’s largest study library.
Users responded to the 9 buttons on this interface with furrowed brows, and took an average of 5 seconds to decide which button to tap. Here, many users first tried to press one of the “Login” buttons at the top and bottom of the screen. But neither one of these buttons actually works until an email and password have been entered in the low-contrast blue boxes at the center of the screen. The bright colors and bold text of the Login buttons are at odds with their lack of functionality, which leads to tension and confusion.
“Ask a Question” is our flagship feature, but here its button is nestled alongside four less useful, equally emphasized buttons. Users are forced to search for the value in our app. As a result, only 7.43% ever open the AAQ form. Also, is the “Recommended for you” feature the best use of the bottom 40% of the screen? I’m wondering if the data supports its value.
Having multiple choices here may be yielding diminishing returns. We can increase the value of the Course Hero app by placing the most valuable features in front of our users. Here, if we think the ability to ask a tutor a question is the highest value feature we can offer to students, let’s make it the main character of our home screen. If we don’t know what users want, they won’t either.
Tapping the floating AAQ button in the previous screen opens a full-screen form with a complex text editor. It's a jarring transition. Within this control panel, the "take a picture of your problem" option is the most popular among our users who do ask questions. But new users have to search for it as a very small icon nestled among ten other icons. Finally, the “Proceed with Payment” button is intimidating. Less than 2% of users ever ask a question—this button and the overall complexity of the screen might be why.
The UX seemed to suffer from a lack of focus. Most features were emphasized equally regardless of value, choices were included even when unnecessary, and it was hard to identify what “paths” a user might follow when using the app. This meant that the Ask a Question function was both hard to find and hard to use. The issue could be broken down into three key areas.
1. Onboarding
The onboarding process did not provide students with compelling value propositions or a smooth experience. Irrelevant or repeated information and over-abundance of choice left users overwhelmed or disengaged.
2. Home Screen
The home screen did not draw attention to the Ask a Question feature, forcing users to select it from a list view or a confusing series of navigations in the bottom bar. In other words, users had to search for the value in our app.
3. Question-Asking
Within the Ask a Question interface, the helpful “take a picture of your problem” feature was hidden within a dense control panel that resembled the interior of an airplane cockpit. Choices are good, but too many can be burdensome.
02 — PROCESS
Making value obvious
It’s 1:00 AM the night before the due date for a CS problem set worth 25% of your grade. You’ve spent the past several afternoons working to support your family. And now you find yourself tired, overwhelmed, and barely able to crack the first question. You open the Course Hero app and ask a tutor for a hint.
User interviews revealed that many young people come to us for more than just help with school. Often, what they really want is a way to feel less stressed and more in control. This means that we’re not just making a technically functional app, but one that’s empowering, inspiring, and fun to use. How might we give hope to the late-night computer science student who just needs an extra push?
We can start by getting to know them. I began my design process by creating “personas” with our target users in mind—from nervous freshmen, to varsity athletes, to students with full-time jobs. These would help me better understand the people I was designing for.
My goal in constructing UX flows was to allow Course Hero’s best features to shine, while leaving the user feeling accomplished and ready for more.
Key to this effort was building a “next right button” into every screen. Students are stressed and busy enough. Learning how to use our app shouldn’t be another to-do. By always providing a prominent button to press or action to perform, I suspected we could skip the adjustment period and effortlessly direct users to our most frequently helpful features. Here, they don’t have to search for the value in our app—we take them straight to it.
The new app would be focused and intuitive. With any luck, it’d seem less like a collection of features and more like a delightful study partner.
My approach to visuals was inspired by the illustrative style of picture books and the bubbly aesthetics of mobile apps. To the extent that how something looks influences how users think, I hoped to put students in a headspace of stress-relief and accomplishment.
3 — SOLUTION
Using focus and delight to empower students
Placing our app’s most important features front and center lets students skip the guesswork. Breezy yet tactile interactions empower them with a sense of accomplishment. Offering choices only when choices are helpful brings value into focus. A streamlined navigation bar cuts the fat. And light-hearted illustrations, paired with candy-colored UI elements, reinterpret the stress of homework as an opportunity for creativity and playfulness.
I got to present these screens at a company-wide meeting in July. Several animations have been embellished for effect.
Updated App Screens
(Use side arrows to go forward or backward)
The complex Login/Sign Up page is simplified to one question: what's your email?
The original 9-button screen is cut down to 4 essentials.
Using their email, we figure out whether the user has an account or not. This removes the need for a Sign Up or Login button—we remember so the user doesn't have to.
Here, we notice that the user doesn't have an email registered with Course Hero. We seamlessly take them through the Create Account process.
Only if users are new do we offer them opt-in onboarding.
Value Prop 1: We start off by telling users about Ask a Question and live tutors. It's the reason most of them will be opening the app.
Value Prop 2: Course Hero's library of 40M+ crowdsourced study resources remains a major selling point. Let's help stressed out students feel like they're not alone.
Value Prop 3: Users can take pictures of their own study resources and upload them in order to unlock free content from Course Hero.
Users 'graduate' from the onboarding, invested in and excited about the app.
Ask a Question's presence on the home screen reflects its value. Users can easily ask a question, look at their ongoing questions, search for documents, or review their library of unlocked documents.
Tapping on Ask a Question seamlessly opens our camera. It's the most popular way to enter questions that, until now, was hidden behind submenus and tiny icons.
The intimidating "Proceed with Payment" button is replaced with the expected, tangible "Submit question."
Users can share a picture of their problem with the tutor instead of writing it out. They might add notes to clarify what sort of help they're looking for.
Options are only present when useful. We prioritize lightweight interactions and simplicity so sleep-deprived students can do a little less thinking.
Submitting a question produces a Success screen, giving users a tactile response to their query.
Final Thoughts
This project was researched and designed during my last three weeks at Course Hero. In many ways, it’s a first draft. Prototypes never made it into the hands of users. I’d love to one day see what they think, feel, and do with the redesigned app. It might be too childish this time around. Or it might still seem complex. I know there’s only one way to find out. Until then, the mockups—rendered in Sketch, and illustrated and animated in Apple Keynote—live here.
Course Hero Design Team + intern on August 5th, 2019