Optimizing UX/UI for Better Student Coding Experiences

Project Info

 

Details

Organization: Code.org / Product: SpriteLab

My Role: Product Design Intern

Team: Myself, project manager, senior product designer

Contributions: Comparative analysis, persona development, user journey maps, user flow diagrams, wireflows, high-fidelity prototypes, usability testing

What is SpriteLab?

SpriteLab enables students to —

  • Create games and animations using basic programming concepts.

  • Drag and drop coding blocks to simplify coding tasks.

  • Manage, edit, and draw sprites within their projects.

 

Problem

Code.org’s design team received feedback that one of their most popular learn-to-code tool, SpriteLab, had several student pain points.

I was specifically tasked with proposing UI/UX improvements that would streamline the process for K-5 students to select and manage sprites within their coding projects.

Solution

Over the course of one month, I —

  • Proposed an improved user flow for adding sprites to projects.

  • Explored an enhanced navigation between the coding workspace and sprite management panel.

  • Suggest UI improvements to increase overall SpriteLab usability for K-12 students.

Project Overview

As a design intern at Code.org, a non-profit org dedicated to teaching K-12 students how to code, I contributed to overall UI/UX improvements of their student and teacher experiences.

This project is based on a design improvement proposal I made while at Code.org for SpriteLab, one of their most popular learn-to-code tools. SpriteLab allows kids to create simple animations and games using editable characters (sprites) and customizable code blocks.

Project Outcome & Challenges

Challenges and Limitations

Due to COVID-19 precautions, scheduling usability tests with students was challenging. While this limited direct feedback from users, the designs were informed by existing qualitative data and stakeholder input.

Impact and Future Directions

Although I did not remain on the project long enough to evaluate the prototype’s effectiveness through testing, Code.org planned to continue developing and playtesting these improvements.

Skill Growth & Career Advancement

My contributions to this project ultimately helped me transition into a full-time role as a product designer at Amplify Education, where I continue shaping educational technology tools.

Design Process

 

Translating Qualitative Data into Student Personas

Using qualitative data from previous play-testing, I identified two key pain points for SpriteLab’s two most common K-5 student use cases.

  1. Students struggle to find the Sprite (Costume) Library due to an unclear flow and interface.

  2. Younger students get lost in the Sprite Editor and fail to return to the coding space.

    • Older elementary students who want to utilize the Sprite Library to add specific sprites to a school project

    • Has difficulty navigating to the Sprite Library using existing navigation and UI

    • Desires more project customization, and wants be able to upload their own sprite images

    • Desires an easier way to manage sprites when coding for a more optimized workflow

    • Younger elementary students who use SpriteLab as a way to decorate new or existing sprites within exploratory coding activities

    • Has difficulty returning to Coding Space when finished using the “Draw” tool

    • Has difficulty navigating the existing UI, as it is a very text-heavy interface. The age range of this persona is typically 5-7 years old, so reading skills are limited.

 
 

Comparative Analysis

Before initiating design exploration, I conducted a comparative analysis of SpriteLab’s features against other K-12 learn-to-code platforms.

I discovered that SpriteLab’s sprite selection process required significantly more steps than competitors. This analysis provided inspiration for simplifying the sprite selection flow.

 
 

User Flow Mapping

I began by mapping the existing sprite selection flow, focusing on the most common method: the dropdown menu within the sprite block. This mapping revealed inefficiencies that required attention.

 
 

User Flow Exploration

To provide flexibility for the engineering team, I explored 4 user flows with varying levels of complexity. While simpler flows often required more technical changes, these options balanced usability improvements with implementation feasibility.

 

Exploration 2: Quick Select from Coding Space

Exploration 1: Existing Model, But Better

 

Exploration 4: Sprite Panel Within Coding Space + Improved Search Experience

Exploration 3: Sprite Panel within Coding Space

 

Key Project Decision: After socializing the above flow explorations with stakeholders, the team decided I should move forward with Explorations 2 and 3. I created six design iterations that proposed the following solutions —

 

Exploration 2: Quick Select from Coding Space

Exploration 3: Sprite Panel within Coding Space

 
 

Key Features of Design Proposal

 

Solution 1: Quick Sprite Select Tool in Coding Space

By integrating sprite selection directly into the coding workspace, students could access sprites more efficiently. This feature could reduce the number of steps needed to select a new sprite from the Sprite Library from 9 to 4.

 
 

Solution 2: Relocate Sprite Management Panel within Coding Space

A dedicated panel within the Coding Space would allow students to more easily manage sprites, as they would not need to navigate to the Sprite Editor tab (which was causing friction).

 
 

Solution 3: Integrated Draw Tool

By relocating the "Draw" tool to the Coding Space, we would be able to minimize distractions and help students stay focused on their coding workflow.

 
 

Solution 4: New “Getting Started” Modal

By relocating the "Draw" tool to the Coding Space, we would be able to minimize distractions and help students stay focused on their coding workflow.

 
 

Other Projects