New Platform Build
As a children's education platform, ByteSize Learning offers virtual technology classes to kids in rural areas. As their business grows, they needed a way offer asynchronous learning options so they could reach new audiences without growing their internal team. In a 3 week sprint, I spearheaded this challenge to design a new platform from scratch
Role
UX Designer
Client
ByteSize Learning
Team
Jack Rasmussen
Ava Manning
Phillip Kang
Batsheva Tropper
Timeline
3 Weeks
Business Need
The business needed a way to offer asynchronous classes to students. They asked me to design the new platform with login capabilities and one course from start to finish, with the option to add more courses as they grow
What Did I Do?
I ran UX research to determine the best way to approach this new platform build. Then I moved into the design phase where I created a fully functional prototype ready for developer handoff
Impact
Created a fully functional prototype ready entirely based on research and refined the platform through usability testing which informed additional design decisions that got task time down by up to 55 seconds
Overview
User Problem
Users want to learn new technical skills in engaging ways that motivate them and retain their attention
Allow students to take live classes (current model) & asynchronous classes to grow user base, expand number of classes available and increase revenue
Business Need
Process
Research
First, we ran a competitive task and competitive feature analysis. Additionally, we conducted 8 user interviews which included 4 parents and 4 children (ages 8-18) who had all used online learning platforms previously
Key Takeaways
Both parents and children highlighted common issues such as course structure, feedback and safety. However, the primary user issues identified were a necessity for gamification & simple navigation
Insight
Action
75% of our interviewees felt this way
Designing gamified elements to motivate user
63% of our interviewees agreed
Designing simple login & course flow to guide user
Persona
From our user interviews, we created the persona "Elliot" to embody our users' pain points and humanize the UX process
"Hi I'm Elliot! I love to learn but sometimes I have trouble focusing"
Elliot is an inquisitive 12 year old with a strong desire to learn about technology. Elliot's parents also realize the positive effects of learning technical skills at an early age and encourage Elliot to explore different topics
Frustrations
-
Loses attention easily
-
Needs help online
-
Overwhelmed by too many choices
Needs
-
Engaging learning
-
Structure
-
Age-appropriate lessons
Design
Now that we have our user & his pain points in mind, we can begin ideating solutions
Now What?
Goal #1
Use gamification to engage users
How To Achieve This
Designing ways for students to earn points & use those points
Designing layouts and features that feel "gamified" to engage young users
Coins & Trophies System
Allow students to earn coins for individual lessons & trophies after completing whole classes
ByteSize Store
Allow students to use coins on avatar & screen customizations
Interactive Course Map
Show students their progress on interactive "Course Map" designed to emulate online games
High-Fi Wireframes
Features
ByteSize Store
Course Map
How We Got Here
100% of users successfully navigated through the class user flow for the first time
Users felt the layout was easily navigable, but not gamified enough for young users
Users felt that the course map should have a more intuitive layout & scroll vertically rather than horizontal
Course Map
Home Screen
Takeaways
Low-Fi Wireframes
Goal #2
Create simple user flows & navigation for younger users
How To Achieve This
Designing simple "create an account" & "login" flows for students to complete without parent supervision
Designing clear CTA's & paths for students so they don't get lost or distracted
Simple "Create Account" Flow
Since students should be able to access this site without parent supervision, we wanted to keep the flow as simple as possible, only requiring what was needed
Clear CTA's & Class Layout
We also knew that younger students can be easily distracted online, so wanted to make their "next steps" as clear as possible
Features
High-Fi Wireframes
Create an Account Page
Individual Lesson Page
How We Got Here
Takeaways
Low-Fi Wireframes
75% of users were confused by the parental control options step while creating account
Users felt the layout of the home screen should be more intuitive and the "login" and "create account" buttons should be stacked
Some users felt it was distracting and unnecessary to see all available lessons on the lesson screen
Parental Controls Toggle
Website Landing Page
Individual Lesson Page
High Fidelity Prototype - Notable Features
Additional Resources Page
Congratulations Page
Congratulations Page
Finally, our user interviews revealed that parents & children appreciated feedback during learning. We wanted a fun, animated way to congratulate a user for finishing a class
Additional Resources Page
We also knew that our founder was passionate about democratizing education and wanted ByteSize to be a launchpad for future learning. So we created a page that suggests additional resources for learning after a user finished a course
Impact
Time to complete Task 1 (create an account) decreased by 24 seconds between the first round of usability testing and this round
Time to complete Task 2 (finding and completing 1 lesson) decreased by 55 seconds between the first round of usability testing and the second
Overall, users said the app was intuitive and easy to use but said certain pages were too visually stimulating
Impact
Based on usability testing of the Hi-Fi prototype on 10 users...
Next Steps
Build additional pages for student help & past student projects
Design additional user flows for student errors including password reset & document upload errors for student projects
Create help videos explaining how to upload documents to include at project submission checkpoints
Research & test possibility of rebranding "coins" to "Bytes" for branding & teaching purposes (gigabytes, megabytes, etc.)