Timeline: 6 Months (Ideation to production)
Role: Lead UX Designer (research, UI, UX)
Team: 2 Front-end Developers, 2 Back-end Developers
KTBYTE is a Computer Science Academy that offers online and in-person coding classes to students ages 8-18. Our users include both students and parents. Parent's main goals on our website is to get informed about our class offerings, enroll in classes for their child(ren), and keep track of their child(ren)'s learning progress. Students are the primary users of our product, which are classes on our integrated learning platform.
We needed to consolidate the free trial signup and course enrollment workflows, as well as improve usability and experiences for parents/students who are trying to complete a transaction on the website.
To view the most recent class enrollment workflow (in 2020), visit www.ktbyte.com/freetrial
(2017) Old Free Trial Signup page:
Problems we want to solve:
1. Form is too long, with fields that are not completely necessary. Users drop off when they encounter a difficulty
2. Can't signup for two children at the same time. Would need to fill out the same form twice
3. When users enroll for a class after the trial, they are required to input most of the same information when they create accounts
4. The page must be open on the computer, as it runs a preliminary computer test in the background
5. Asks for student typing speed, which is not common knowledge
6. Tells users to select times they are not available, instead of when they are available
7. Outdated visual design
Our signup process is challenging to design for because instead of having 1 account per user, our system requires separate parent and student account(s). These accounts are linked together with different permissions.
Flow Chart Accounting for Edge Cases:
What the flow chart is accounting for:
1. User's progress state on the site (ie. saves their previous session's progress)
2. Long funnel (account creation, free trial class, official class enrollment)
3. Flows for when you're logged in/logged out of certain accounts
4. Having to accommodate for parent and student accounts, as they have different purposes and permissions
5. How the new free trial and enrollment signup intersect with the other site pages (ie. student and parent account dashboards, class pages, etc.)
6. How the backend is built to require certain information from users
The average time of completion for the old and new workflows:
By removing unnecessary fields and consolidating the trial and class enrollment forms, the total time saved in the whole process is about 3 minutes.
Janet Bai is a 42 year old married female living in Lexington, MA
Her son, Casey, is 10 years old. He loves to play video games with his friends. Casey's schedule is often packed with activities like piano, swimming, soccer, math tutoring. At school, he is a member of the robotics club.
Janet wants Casey to have all the opportunities he can, so that he's well equip for success in his future. Casey is a gifted child, and she wants to nourish that as much as possible.
She is often busy juggling her full-time job and caring for Casey. But, she is still heavily invested in his education by going to PTA meetings, reading articles, and staying connected with other parents.
Usability Testing and User Research:
I worked closely customer service and directly with our parents to determine the UI/UX for free trials and class enrollments.
• 70% of users browse our site via desktop (google analytics)
• Our demographic has a slower typing and parsing speed compared to the younger generation
• Parents don't realize when accounts are being created for them
[Video] New Free Trial Signup Process:
Free Trial Signup Page:
• Parents can sign multiple students up for trial classes
• Parents can login to their existing parent account and signup for their child
• If the student already has their own account, parents can use that account to signup for a trial
Free Trial Signup Page:
• Parents can either select a trial time (based on the teacher's availability), or input their child's availability
In-Person Free Trial & Account Creation:
• Parents can choose to take a trial in-person by selecting the checkbox to let us know
• Fewer parent information required to create the parent account
• Student account is auto-generated for faster completion (with the option to edit)
Class Checkout & Confirmation:
• We built a shopping cart functionality (included in nav bar re-design)
• Unlike before, we are treating a free trial class like any other class enrollment
• Parents can easily checkout classes for multiple children
• We've introduced "progress state", which saves the user's enrollment progress (ie. the cart items are saved, whether users are logged in or not).
One More Detail!
(2017) Old Student Account Creation:
New Login/Signup & Student Account Creation:From our user studies, 98% of parents don't create accounts until they signup for a trial or enroll in a class. We want to further encourage that behavior. So, we've de-prioritized the account creation option on the Login/Signup page.
Student account creation fields are kept mostly the same as the previous form, but it is slightly shorter. We also tried to be more inclusive with the gender selection.
It's not over yet! The next version of the enrollment workflow will include:
• Phone number two factor authentication login
• Further automation in parent and student account creation, with functionalities on the parent and student dashboard to edit information
Our parents, ages 38-58, are busy people that are not as digitally fluent as the later generation. We noticed that parents were creating new accounts with different email addresses, which is problematic as our CRM and database was designed to support 1 account for each person.
Thanks for scrolling :)