Lorem Ipsum was used to replace this course's paid content.
Also, for this project I was responsible for the UX design/journey, gated-content layout, and development.
Here were the
Client needed a simple way to add in a payment gateway and audio for an online course.
Needed a way to easily download an accompanying packet users would write in.
Here was my
I talked with the account manager to understand what the exact requirements were. They wanted to keep it extremely simple with just the audio player for each lesson/section of the course.
I also looked at UIs of popular e-learning platforms like Linkedin Learning, Udemy, and more.
In addition, I did research on which solution was best for the sign up and purchasing user journey.
Here was the
For the project, put all of accompanying written information in the course as well in case the user wanted more context to what the audio was saying. The account manager and client liked this very much.
In addition, when scrolling the audio player would stay in the user's view the entire time to make it easier for them.
When talking through the sign up and purchasing workflow, there was a obstacle with native Webflow functionality, which added more steps to the sign up and purchasing purpose - a bad UX and reduces chances of a user successfully completing a purchase. I proposed to include a solution called Memberstack to handle user creation and auth. In addition, it easily links to Stripe, a popular payment processor. Memberstack cut down the users steps for signup/purchase by nearly half and allowed for optional email verification after a user's first time logging in. All of which reduces cart abandonment and customer support issues.
Results for
Longer lesson page on desktop.
Another lesson page.
Login page.
Checkout page.