ByteSize Learning - Asynchronous Platform
My Role: Lead UX Designer; on a team with 3 others
Tools Used: Figma, Asana
Scope: 3 weeks
Overview: ByteSize wanted to build an asynchronous learning platform (MVP from scratch) so that they could offer both synchronous and asynchronous classes.
About the Company: ByteSize Learning is an educational company that aims to teach technological skills to kids in areas where technology is not widely available. ByteSize began as a tutoring service until its transition to provide supplemental education for children in the field of technology.
Design Process: My team and I followed the double diamond process which breaks down the design process into four stages: discover, define, design, and deliver.
The Problem
iterate
iterate
Discover
Define
Design
Deliver
The Solution
-
Competitive Feature Analysis
-
Competitive Task Analysis
-
Heuristic Analysis
-
User Interviews
-
Affinity Mapping
-
Problem Statements
-
How Might We’s
-
Persona
-
User Flows
-
Design Studio
-
Lo-Fi Wireframes
-
Lo-Fi Prototype
-
Mid-Fi Wireframes
-
Hi-Fi Wireframes
-
Usability Testing
-
Hi-Fi Prototype
-
Next Steps
Discover
We knew that we were going to be building an MVP from scratch, so after aquainting ourselves with ByteSize Learning, we researched its competitors.
I began by conducting a Competitive Feature Analysis. The analysis showed that ByteSized Learning had very similar features to its competitors. I quickly came across a gap in the market; by enabling accessibility in both synchronous and asynchronous modes, ByteSized Learning could distinguish itself uniquely from its rivals.
Another team member conducted a Competitive and Comparative Task Analysis, which showed us that our login flow needed to be completed in 4 steps or less if we wanted to stay competitive within the industry standards.
We then conducted User Interviews with both children and parents, focusing on children as the primary user and parents as the secondary.
To the right are the top three "I" Statements that were found through Affinity Mapping.
"I want to be able to track my child's progress."
"I like to solidify my learning through practice."
"I find gamification of my learning materials engaging."
Define
Meet Elliot Branston, a 12 year old North Carolinian who is excited to learn new technology skills, but is easily distractible.
​
Elliot is a target persona created from synthesizing our user interviews.
His biggest problem? Elliot needs to learn new technical skills in an engaging way that motivates him and retains his attention.
After ideating with my team, we landed on this question to define what we would be working on for Elliot.
How might we capture Elliot's attention and promote measurable, captivating learning?
Design
After deciding on two user flows, our team held a design studio, in which we rapidly sketched ideas which I then turned into the low fidelity wireframes, as pictured below:
This first wireframe shows our landing page, where the idea was to keep it as simple as possible. Because this site is going to be used by kids that range from age seven through eighteen, we knew that all actionable aspects needed to be straightforward and easy to understand.
This wireframe on the left shows the screen that a user would see once they have clicked on a course. We gamified the design of this page by adding a journey map.
The wireframe on the right shows the lesson screen. It was designed to call immediate attention to the video. We also added a section for instructor notes on the bottom, and a bit of information architecture for the user on the left.
We then conducted Usability Testing. Ten users were asked to complete the sign up flow, and then log in and complete the Python course. Below is some of the qualitative feedback we received.
-
Users did not like the placement of the parental controls
-
Website needed to be more engaging (users wanted more gamification)
-
The user journey map scrolled non-intuitively (horizontally instead of vertically)
-
There were some copy errors that needed to be fixed
After taking all of this feedback into consideration, we began ideating a high fidelity prototype. We started by creating a design system.
We wanted to keep it in line with the current brand colors, so we took their existing Style Guide and rejuvenated it. We knew that it needed to be sleek but accessible.
We added some variations of the brand’s blue, along with addng a playful orange. We felt that this would work to complement the more serious and trustworthy tones of blue in a way that would invite and excite the kids that will be learning on this platform. SF Pro Rounded, a variation of the typography that Apple uses, became our main font. We felt that this typography was soft enough for a child’s website but clean enough to look professional.
Then, we created Hi-Fi Wireframes.
We stacked the 'log in' and 'create account' buttons to one side for a more sleek look.
We made the course journey map scroll vertically instead of horizontally.
We changed the in-course progress bar to reflect the gamification system in place.
We then conducted a second round of Usability Testing. Our findings showed:
There was 1 or less misclick
Task 1 was completed 24 seconds faster*
Task 2 was completed 55 seconds faster*
* when compared to Round 1 Usability Testing
Some of the qualitative feedback we received included:
-
Users felt that the homepage was visually over-stimulating
-
Users stated that the site was intuitive and easy to use
-
There were slight inconsistencies in the color and copy
Deliver
