NEUCLASS
An e-commerce site for educational content
PROJECT TYPE // UX Design, Desktop Web
TEAM // Solo Project
DURATION // 3 weeks
TOOLS // Figma, Miro
↓
The Problem
Improving the conversion from browse to completion of checkout
NeuClass’s customers abandon the site at 2 points:
Before adding products to their cart
At checkout
The Solution
Help users make a decision and simplify the steps needed to purchase
This project adds features to give customer’s confidence in their purchase decision, increases the rate of checkout, and increases revenue on NeuClass’s desktop web experience.
The Business Need
Enhance the browsing and checkout experience to improve product usability
The Product Manager (PM) shared data showing 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. The hypothesis is that users are unable to determine which course is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
The Research
How did the design and development process start?
My goal was to figure out the best way to accomplish the following goals:
Help customers decide which course is best for them based on the relative features available
Add a guest checkout option to reduce the number of actions needed from the users to complete their purchase.
TARGET AUDIENCE
12 - 24 years old
50% male and 50% female
Dependents without a steady income
These users are preparing for their SATs or just starting college and looking to supplement their learning. Their parents and/or family will spend money to invest in their future so the users do their research and expect to see results.
COMPETITOR ANALYSIS
With the baseline information provided, I moved straight into competitive analysis to get a better sense of what other educational sites had to improve the add-to-cart and checkout rate. I looked to similar competitors like Coursera and MasterClass to draw inspiration. I also included Khan Academy — a non-profit — in this analysis to evaluate how they prioritize their site experience when their focus is not hindered by the goal of generating revenue.
Opportunities for improvement
Customizable course options to flesh out the educational content and support based on the user’s learning needs
Tiered offerings that can be flexible for individuals’ financial needs
One-and-done pricing with lifetime access to course content to keep things simple and accessible
Identifying the user journey
In doing the user journey map, I looked out for opportunities to speed up the checkout process.
What are they feeling at each stage? Overwhelming confusion at the all the different options and pricing offers. Uncertainty of quality and results. Excitement to begin their course and see improvements in their learning.
What are their pain points? Opening multiple tabs to view all the different course options. High effort to checkout — they’d need to create an account.
What do they need? An effective way to compare course options side-by-side and within context. Fewer requirements to checkout.
Fleshing out the user flows
The following user flows detail the site’s critical paths (a.k.a. red routes):
1 Find a course
2 Customize a course
3 Purchase a course
The Ideation
From lo fi testing to hi fi wireframes
In order to keep to my timeline, I used a UI kit to build out my wireframes. I created greyscale page layouts to map out the site’s main features. Later for the hi-fi wireframes, I added in color and edited parts of the components to better reflect NeuClass’s style.
1
Users are able to access courses through the dropdown menu or through the Home page itself.
2
The Catalog page displays a carousel at the top so users can easily navigate from one category to another without having to engage with the dropdown.
3
On the Detail page, users can:
a View different features offered by the tiered enrollment options. Basic is the default option and users can select higher tiers through an add-on.
b Choose to add more products or services
c Add related courses at discounted rates
d Learn more about the class
e Build trust in the product’s results
f Review the syllabus and topics covered
g Read what other users liked or disliked
4 & 5
I introduced a guest checkout option to give users access to an easier checkout experience.
6
The email is auto-filled in the form to reduce the number of actions required to checkout.
Validating the designs with usability testing
ROUND 1
To validate my designs, I conducted 5 moderated usability tests. I was looking for high school or college students as my target audience, but adjusted my search to include individuals who had taken online courses in the past due to time constraints.
In these tests, I identified major usability issues and evaluated how users:
1 Find and compare course options
2 Purchase a course
3 Check out with a guest account
INSIGHTS
1
100% of participants found it confusing to select an enrollment option as an add-on. The act of ‘adding on’ an option then going back up to the Add to Cart button is an unintuitive pattern.
After
2
Low Home page engagement. Users expected to see a Shop By Category option in the Home page and were less likely to scroll through the page when they see the Courses dropdown at the top. This may be in part due to the lack of content and dummy placeholder text in the lo fi version.
3
The purpose of the comment box at Checkout was confusing. Users didn’t know what type of comments were expected and who would be reading them.
ROUND 2
To validate the changes made after the 1st round of testing, I conducted 6 moderated usability tests with participants who have purchased or used online learning classes as college students. In these tests, I wanted to see if users found it easier to perform the same tasks from the 1st round (along with identifying any remaining major usability issues).
INSIGHTS
1
The question mark icon comparing enrollment options did not seem clickable to 50% of users. Using linked text makes the action more accessible for users.
Before
After
2
Users expected to see customizable add-ons at checkout or after adding products to the cart. This aligns with Jakob’s law, where users prefer a website to work the same way as other sites they know. However, it’s unclear whether users understood customization was the value prop for NeuClass.
3
Users wanted an easier, more accessible way to get to checkout. Initially there was only one way to get to checkout – the cart icon on the top nav. To solve this problem, I:
Fixed the position of the nav bar (and the cart icon) at the top of the Detail page
Added 2 more opportunities for users to get to checkout
Going one step further
Users will experience different checkout forms based on the combination of digital and physical products. I created 2 flows to account for both use cases:
Digital products only
Physical (+ digital) products
The physical flow accounts for:
Shipping information required for delivery
Shipping confirmation once checkout is complete
The digital flow does not require this information and excludes it from the page.
The Visual Design
Building brand consistency
Reflections and learnings
Feedback from the right users lead to better insight
Due to time constraints, I my first round of testing, included anyone who had purchased any sort of online course. However in the second round, I was able to recruit users from my target audience and received feedback allowing me to improve the flow of information and display it in an order better understood by that audience.