Timeline: Iteration Over 1 Year
Role: Lead UX Designer (research, UI, UX) 
Team: 1 Front-end Developer, 1 Full-stack Developer

Context:
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.

Problem:
Parents are confused about what classes are offered, why our classes are better, and what to sign their kid up for.

Goal:
We want to show our parents our course curriculum progression design, communicate who each class is for, and direct parents and students to sign up for free trials before enrolling in classes.

To view the most recent classes page (in 2020), visit www.ktbyte.com/classes
Previous Classes Pages (2017-2018)
Previous Classes Page (2018) - Version 1
We chose to display all our classes, and rely on the filter for parents to find the right course
Previous Classes Page (2019) - Version 2
We found that parents are still confused about how our classes work and what the progression looks like. They also had a hard time finding and using filters.

What We Added:
• Why KTBYTE classes are unique (in the header)
• A clearer filter
• A button to sign up for trials
• Our class progression curriculum chart design that sticks to the scroll. Clicking on the class code will trigger the left to scroll to the corresponding class.
• Clearer class info for each class card
[Video] What our class page and class detail page looks like:
New Classes Pages (2020) 
We found that parents are still confused about how our classes work and what the progression looks like. They also had a hard time finding and using filters.

What We Added:
• Minimal design for the display of classes that takes less room, so the scroll is faster. 
• Display class pre-requisite for better understanding of class progression
• Remove the complex filter that wasn't used, and add only 5 filters that parents care about:

    • Elementary Level - Ages 8-11
    • Middle School Level - Ages 11-13
    • High School Level - Ages 13-18
    • College Level - Ages 13-18
    • Robotics, App Design Club - Ages 11-15
For each filter, there is a description about why our courses are great for students in that category.

We introduced a modal that pops up once for users that are not logged in. The classes page is meant to provide a lot of information, but we really want to direct new parents to our free trial signup page

Lastly, the bottom of the page consists of a interactive chart that shows classes that are starting soon and currently in session. This allows parents who want to fill their kid's schedule with class at specific times to quickly find what they're looking.

Summary: list of classes

Summary: ability to request classes

New Class Detail Page:
What We Added:
• Minimal Design
• Full class syllabus and more sample projects
• Full width class times chart: 
   - Shows classes that are starting soon, and classes in session (with pro-rated prices)
   - Shows class teacher
   - Displays all lesson times in a list form
• Calendar display of all classes and their lesson dates and times
Mobile View:
Thanks for Scrolling :)

Other Projects

Back to Top