Redesigning a Teen-Focused Coding Platform: Enhancing UX for Game-Based Learning
A freelance UX and visual design project to redesign Bytesize, a web platform teaching teenagers to code by building games — solving difficult UI/UX challenges including the code editor, instructions flow, and run-code window through rapid prototyping.
Overview
A web platform that teaches teenagers to code by building games.
Brief
A designer to help us solve some difficult UI/UX challenges and simplify the experience to be more intuitive. There is a rough working prototype, but we are looking to redesign the interface completely. There are a few components to the application that need to be considered, including:
- Instructions for each step
- The code editor and display window
- Window when running the code
My part in the team
- UI/UX Designer
- Information architect
- Visual designer
Methods: Rapid prototyping
Deliverables
Dashboard
The dashboard shows the lesson progress and different projects that the student can start or has already been progressing through.
Brand design (bonus work)
Project view
Adaptive colors for different projects
Gamified code editor - dark mode
Gamified code editor - light mode
Before/after visual design
Information architecture
Saad Chaudhry
Fractional Product Designer
