Overview
My team of UX designers ideated and designed a new asynchronous learning platform on desktop for ByteSize Learning.
This project focused on understanding and designing an engaging program for young learners and building credibility with their parents. I specifically designed the checkout process, achievement tracker, and about pages.
Role
Product Manager
Lead UX Designer
Researcher
Tools
Figma
Zeplin
Notion
Timeline
3 weeks
Industry
EdTech
Deliverables
Hi-Fi Prototype
Mid-Fi User Flows
User Personas
Customer Journeys
Design System
UI Guidelines
Spec Doc
1 in 3
workers lack the digital skills necessary to enter and thrive in today’s jobs
Source: National Skills Coalition, 6 Feb. 2023
CONTEXT
A Digital Future
In a world where digital literacy is increasingly important, parents need to be confident that their learners are well equipped for their future careers. Without access to trustworthy tech education, learners may fall behind their peers and find themselves dealing with obstacles later in life.
CLIENT OBJECTIVE
ByteSize Learning's
New Chapter
Founded in 2020, ByteSize Learning aims to
introduce youth with limited digital exposure to real world tech skills. They provide live tech education online for learners aged 8-18 and specialize in student-driven, project-based learning.
To further expand their offerings, ByteSize plans to roll out a new asynchronous learning platform that continues to bring their personalized and unique approach to learners.
Discover target audience and their goals
PROJECT GOALS
Our Mission
Design asynchronous learning experience for desktop browser
B
b
Update branding guidelines and color palette
THE CHALLENGE
How might we create a kid-friendly platform
that provides learners with real-world tech skills while reassuring parents that their learners are being taught by knowledgeable instructors?
THE SOLUTION
Learn what you want, when you want
A new asynchronous platform for the learner and parent in need of a flexible learning schedule.
The redesign solves issues for 2 distinct users
Learners
Capture the attention and motivate young learners to advance their tech skills.
Parents
Reassure parents that ByteSize Learning is a trustworthy destination.
Engaging UI
Customizable learner dashboard, fun projects, games, and trivia to excite learners to continue their studies
Motivational Reward System
An encouraging, gamified reward system to keep learners coming back for more.
Highlighted User Reviews
Testimonials from real families and users to convince parents of ByteSize's legitimacy and credibility
Educator Bios
Bios for each educator listing their credentials, teaching styles, and courses they teach
COMPETITOR ANALYSIS
Sizing Up
The Competition
Typical Competitor Offerings
-
Generic or hyper-specific content
-
Flexible learning pace
-
Lecture style asynchronous learning
✨ByteSize’s Unique Value Prop✨
-
Student-driven learning
-
Live 1-on-1 lessons
-
Education across several tech subjects
USER CRITERIA
Who Did We Look For?
Initially, our client provided 6 imagined personas for children and parents. However, we soon identified 2 distinct users from our in-depth interviews with 10 people.
Learners
"I'd like to talk and share my ideas with other kids around the world."
Aged 8-18
Tech-related hobby
Familiar with e-learning
Parents
"It's important for me to know the teacher's background."
Parents with learners aged 8-18
Wants to invest in learner's future
RESEARCH TAKEAWAYS
Our Key Insights
Learners
Online learning needs to be fun and engaging.
Learners need motivation to continue their studies.
Socialization enhances online learning experiences.
Parents
A learners' education is a longterm future investment.
Parents want to know instructors' qualifications and backgrounds.
Parent recommendations are crucial when choosing
a program.
Did we validate our assumptions?
YES, WE DID.
DESIGN FEATURES
Something for
Everyone
With research in hand, our team started to ideate design solutions while keeping our personas' needs top of mind.
We utilized Must-Could-Should-Won’t and Feature Prioritization matrices. These methods helped us highlight the most essential features from our research to be part of our minimum viable product (MVP).
Learner Features
Motivational reward system and a customizable learner dashboard
Short form videos previewing engaging course contents
Learner community to share projects with others
Parent Features
Project-based applied learning, interactive games, and trivia
Transparent and cost-effective payment models
Qualifications listed for educators
Parent and student testimonials
MID-FI WIREFLOWS
Visualizing the Flow
We created mid-fi wireflows to fully understand the updated user journey for parents and learners. Below are our most critical new user flows for learners and parents.
Learner Flow
Motivational Progress
Reasoning
We designed this flow to excite learners about their progress. Upon logging in, they're greeted with a customizable avatar, various achievement medals, a visual progress tracker, and a gamified reward system.
DESIGN SYSTEM
ByteSized
Glow Up
We revamped the color palette, typography, and created a cohesive design system that delighted learners but still managed to remain professional.
Shades of orange were added to the color scheme to make it more learner-friendly, but we also found during testing that using orange helped users find CTA buttons more quickly.
THE REDESIGN
Let's Demo It
USABILITY TESTS
The Results
We conducted 2 rounds of usability testing where users either acted as a learner or a parent.
Learner Results
Shown here are the average hi-fi scores for all 3 learner tasks. The results told us that the hi-fi changes increased usability.
We noticed that when using orange for buttons and CTAs, the stark contrast between orange and blue helped the user identify where to go.
Parent Results
Though the tasks were fairly easy to complete, users were still struggling to reach their destinations directly.
Most users indirectly arrived to the FAQ section in both mid-fi and hi-fi rounds. Thus, the information architecture for FAQ would need to be improved in later iterations.
Recommendations
To facilitate ByteSize Learning’s long term success, below are some suggested next steps. These recommendations stem from usability testing feedback and business research findings.
1. Conduct additional rounds of usability testing
2. Invest in fun avatars and imagery
3. Add more course details to course overview
4. Highlight purchasing CTAs
5. Clearly impart that the asynchronous learning program is not live
Reflections
Consent not consensus. As project manager, I thought it important to gett consensus before moving forward. However, the process was time consuming given our tight deadline. In the future, I would adopt a “consent not consensus” mindset; as long as no one is vetoing a decision, the decision is safe to try.
ByteSize Learning vs everyone else. We aimed to design a learning experience that felt familiar to users, but there was concern that the final product was reminiscent of other competitors. ByteSize Learning will need to continue to separate themselves from its competition.
Look at the forest, not the trees. Usability testing informed us that weren't enough CTAs to purchase a course. Our team was so overly focused on finding engaging visuals, that we lost sight of the overall user flow. I was reminded that it's important to take a step back from the details to design a cohesive website.
Thank you for reading!