Edtech

Fluency Academy: Epic English

Class page for a free English event, with UI/UX and WordPress development

My role: UX/UI Designer · PHP/WordPress Web Developer

Context

Epic English is a free Fluency Academy English event with teacher Spencer, in four classes. I did the UI/UX of the page where the classes are watched and the WordPress development with a PHP theme.

Client

Fluency Academy

Challenge

At free online events, many people watch the first class and never come back. The page had to keep students engaged from one class to the next: show where they are in the journey, give short practice tasks and create reasons to return.

The class page, section by section

From the class video to the comments, each section gives the student a next step.

01 / 05
The class
The class video front and center, with the 4-class track alongside (live, unlocked, date of the next one) and a progress bar at the top with the completed steps. The "2,698 people watching" counter and the shortcut to another version of the video sit right below.
02 / 05
The class steps
"Time to set up your Memhack and test your memorization": three steps in cards with a "pending" status (add the deck to the memorization app, listen to the podcast and download the material, answer the class question), each with its own color and a single button.
03 / 05
The reward
Completing the three steps unlocks the "Spencer's Dictionary" e-book. The reward at the end turns practice into a clear goal.
04 / 05
The bonus class
The invitation to the live bonus class on YouTube, with date, time and a "Set reminder" button, to bring people back the next day.
05 / 05
The comments
"Liked the class? Time to answer the question I ask at the end": the comment box closes the page with the group's participation, under teacher Spencer's face.

Visual System

Graphite and beige with the Epic English brand purple, and one color per step (pink, orange and purple) so students know which stage they're in. The torn edge between the video and the steps marks the shift from watching to practicing.

Palette

Graphite

#292630

Video and class track area

Epic Purple

#7C6294

Event logo, track and step 3

Pink

#D44E86

Step 1: add the deck

Orange

#D4671D

Step 2, e-book and highlights

Wine

#770E31

Live bonus class

Beige

#E7DCD6

Steps and comments background

Takeaways

At an online event, the class page is where you win or lose the student. Showing progress, giving short tasks with a status and promising a reward at the end turns people who just watch into people who take part and come back.

More projects