Creating an easier checkout experience

Product Design / Desktop & Mobile Web

Chegg Study is a subscription based service that provides college students with personal, immediate online homework and study help. Chegg Study needed to overhaul their mobile web experience. Our first major project was to tackle responsive mobile web checkout. My responsibilities as the designer was to carry the voice of the user, craft pixels, create reason through story, ask questions, and work alongside my team to build our students a better experience.

Frame the context & problem


Who are our users? Frustrated college students who need homework help.

What are students buying? A $14.95 monthly subscription to access our expert answerer community and solutions to their textbook sets.
Checkout blocks users from the help that will help them understand and complete their assignments.
Within this context, we understood that checkout becomes a second point of friction. Annoyances and errors are amplified during this time. Framing this user context helped us frame our problem during the design sprint.
Define & Align


Our data showed that 40% of students committed to paying for a subscription but left halfway through checkout.




We defined our problem: students were leaving Chegg Study mid checkout because they did not have (or want to) spend an excess amount of time paying for a product that had unknown benefits. It was misaligned with one of our company product goals: save students time. We had to fix that.


We aligned on our success metric as a team of 1 engineer (Irene 😺) , 1 designer (moi 😙), a shared UX Researcher (Twyla😁) and 1 PM (Colin 😎).
Capture 2.5x the current user conversion rate (3% lift).
Explore with Eyeballs


I dug into payment best practices and rigorously iterated with these found principles. I designed mobile first, using the limited screen real estate as a positive constraint, then scaled up to our desktop experience. We refined each round of designs through formal presentations and off the cuff critiques with co workers, users, and key stakeholders.


It's in the details
Pre•cise (adj): to be exact, accurate, and careful about details. We worked with our platform team to eliminate form fields that were no longer necessary for security. As a result we cut down half of the input boxes whittling down the entire experience to a single page.




Anticipating Actions
Credit card information is a long string of random numbers susceptible to human typos. We wanted to help students focus on translating their credit card information offline to online. We used numerical keypads for number only input fields such as the cc number and CCV. We combined the expiration month/year fields with a pre-populated ‘/’ (just as it is printed on your cc) to remove any extra taps.

We decided to validate the cards post submit, as opposed to inline, to provide a distraction free environment (recently written about here).




Words Matter
Heavy fine print in a checkout flow causes decision hesitation– Is it a scam? Any hidden fees? Its a cognitive interruption as users read, process, and reconfirm. We wanted to build trust and clarity, not cast doubt. We worked with marketing and legal to remove excess fine print and wrote it in a tone that was more human. We created information hierarchy to let our students know about our easy cancellation policy.




Show Love
About 60% of Chegg Study users were also past Chegg textbook renters. This meant we had their payment information saved to their account. Many of our users reported that they only had 1 credit/debit card. Using this information, we decided to pull their saved payment information for a simple 1-tap checkout. We designed an add card experience to cover any edge cases in which students wanted to use a different card for the monthly charge (vs a one time charge).


Execute


We began to run user testing lab sessions with our final design to test our design hypothesis– through fewer steps and form fields, smarter input fields, clean copy, and clear expectations, our users would be able to move easily and quickly through checkout. Unfortunately, we quickly learned that context was important for accurate feedback. If users weren’t using their own credit cards or having to subscribe because they actually needed it for homework their feedback to us consisted mainly of bored faces and yes’ and no’s. However, there were insightful moments that confirmed our hypothesis on the small details we pored over.

For example, users inherently understood and interacted with radio buttons as a toggle option as opposed to checked buttons.

Launch & Learn



Our team set out to launch the new design as an A/B controlled test in April 2015. As the test period wrapped up our results started to come in with significant positive impact.

We hit our target conversion number by 4X for an overall conversion lift of 13%.
🚵
Design is an iterative process. What may work successfully now may no longer work at scale or in the future, problems change. So it is important to ask the post mortem ‘Whys’ and learn from each project to create reference points. It allows other teams to learn from our victories and mistakes as we move forward to build better experiences for our students.