top of page
ByteSize3D_cover.png
CLIENT PROJECT

ByteSize Learning

A reimagined desktop experience for asynchronous learners

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.

15_ Macbook Pro Mockup Front view_homepage.png

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.

ipadframe_welcomemaya.png

Engaging UI

Customizable learner dashboard, fun projects, games, and trivia to excite learners to continue their studies

ipadframe_motivation.png
gradientsquiggle_edited_edited.png

Motivational Reward System

An encouraging, gamified reward system to keep learners coming back for more.

ipadframe_userreviews.png
gradientU_edited.png

Highlighted User Reviews

Testimonials from real families and users to convince parents of ByteSize's legitimacy and credibility 

ipadframe_educatorbios.png

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

bytesize.png
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."

learnerpic.png

Aged 8-18

Tech-related hobby

Familiar with e-learning

Parents

"It's important for me to know the teacher's background."

parentpic.png

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.

learnerpic.png

Learners need    motivation    to continue their studies.

Socialization   enhances online learning experiences.

Parents

A learners' education is a longterm    future investment.

parentpic.png

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

learnerpic.png
reward_blueicon.png

Motivational reward system and a customizable learner dashboard

engaging_blueicon.png

Short form videos previewing engaging course contents 

communitysharing_blueicon.png

Learner community to share projects with others

Parent Features

parentpic.png
projects_blueicon.png

Project-based applied learning, interactive games, and trivia

paymentmodels_blueicon.png

Transparent and cost-effective payment models

qualified instructors.png

Qualifications listed for educators

highlightedreviews.png

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.

bytesize design system.png
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

Avg Learner Hifi.png

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

Avg Parent Hifi.png

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.

Consent.png

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.

differentiate.png

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.

forest.png

Thank you for reading!

bottom of page