Timeline: 3 Weeks (Ideation to production)
Role: Lead UX Designer (research, UI, UX)
Team: 1 Front-end Developer, 1 Full-stack Developer
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.
After receiving sufficient parent complaints about not being able to find information they were looking for on our website, it was decided that a re-design would be a good investment.
The purpose of making the homepage and nav bar more user-friendly is so that parents can understand our company, and be inclined to sign up for a free trial class.
To view the most recent homepage (in 2020) and nav bar, visit www.ktbyte.com/home
I conducted user testing, interviews, as well as worked closely with customer service to get insights about our homepage UX.
After a series of user research, I've broken down the key insights below:
‣ "'Request a Brochure' and a 'Free Trial' are good resources"
‣ "Compelling Student testimonials and results"
‣ "Skimmable icons of class resources are helpful"
‣ "[Hero] Video is very busy"
‣ "I don’t understand the Spring Semester, Workshops, Online Class, In-Person, etc. They go to a [class] page that doesn’t make any sense to me at all."
‣ "Too much information, lots of scrolling"
‣ "What I don’t get is what [the KTCoder] is or why its important."
‣ "I can't find information about classes."
‣ "Where do I go to signup?"
‣ "I don't see how KTBYTE is better than your competitors"
2018 - 2019 (Previous) Homepage:
Tabs on the Homepage:
From customer feedback and user tests, we learnt that our users aren't clicking on the tabs.
Tab 1: Our Unique Class Format
After Covid-19, we didn't need to explain the benefits of learning live, online. We also didn't need a section about our in-person offerings.
Tab 2: Why Learn to Code?
Many users that visit our website already have the intention of learning to code, so they're familiar with the reason. This section can be emphasized more in the free trial flow.
Sidharth Krishna is a 48 year old married male living in Long Island, NY.
His son, Vikram, is 12 years old. Vikram is the leader of his middle school's robotics club, his school teacher's assistant, and a member of the debate club. He spends his time playing Fortnite with his friends, watching anime, and recording videos on Youtube.
Sidharth is a software engineer and is heavily involved in Vikram's STEM education. He wants to know exactly what Vikram learns at school, and ensure that his son is ahead of all the other students. He dreams for Vikram to attend an Ivy League university in the future.
Homepage Mockup Version 1:
Fullstory Heat Map:
Main Results: Student Accomplishments and the Free Trial Signup buttons received the most clicks on the homepage.
Actionable: Simplify homepage to focus on free trial signup as the main call to action (CTA) and add more concrete evidence of our course benefits.
New Homepage and Nav Bar Desktop View:
"Free Trial Signup" is the only CTA, followed by "Request a Brochure"
‣ The previous homepage directs users to multiple different pages, which can cause users to get lost
Cleaner, minimal UI with shorter scroll
‣ The main complaint was that there was too much information on the homepage, and it was too messy
Clearer layout of course information
‣ The previous "project" section of the homepage had a playable game. However, most parents don't know how to play it. Instead, we've added a gallery of projects from various classes
‣ Course filter on the old page was categorized by semesters and class format. Parents want to know what classes are right for their kid(s). The new version categorizes by student grade and age
‣ We've acquired all the FAQ from user inquiries, and added it to the homepage. This help parents make the decision about if KTBYTE is a good fit
Nav Bar Decisions
We optimized our nav bar for easier search and request for assistance, as they are common features that parents ask for. We found that parents prefer to ask for help than to find out information for themselves.
Easy Access To:
News and Discounts
‣ As a school, we want to build a sense of community. We wanted a space to feature notices about special promotions, school holidays, etc.
Wechat QR Code
‣ About 70% of KTBYTE parents use WeChat
"Classes" Dropdown Filter
‣ For parents to easily find classes that are suitable for their child
Web Localization - Chinese
In 2019, KTBYTE started expanding to China. As a bi-lingual speaker of English and Chinese, I led the web localization efforts of website through working with a translator and a full-stack developer.
It's not over yet! The next steps will include:
• Card sorting to improve site architecture, which informs nav bar menu items
• Inclusion of more student accomplishments (ie. universities that students are accepted into)
Our parents, ages 38-58, are busy people that are not as digitally fluent as the later generation. Even with our changes, we still have some parent who aren't able to find information from our homepage
We know that student accomplishments are important. The team would need better communication with parents and students to learn about what our students are accomplishing after taking KTBYTE classes.
Thanks for scrolling :)