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
Impact and Future Directions
Code.org planned to continue developing and playtesting these improvements with students in K-12 classrooms.
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.
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.
Students struggle to find the Sprite (Costume) Library due to an unclear flow and interface.
Younger students get lost in the Sprite Editor and fail to navigate back to the coding space.
-
Older elementary students who want to utilize the Sprite Library to add specific sprites to a school project
Have difficulty navigating to the Sprite Library using the existing navigation and UI
Desires more project customization, and wants to be able to upload their own 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
Have difficulty returning to Coding Space when finished using the “Draw” tool
Have 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
Assessing Competitor User Flows
Before initiating design exploration, I conducted a comparative analysis of SpriteLab’s features against other K-12 learn-to-code platforms. I assessed user flows for navigation efficiency.
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.
Design Exploration
To provide flexibility for the engineering team, I explored 4 options with varying levels of complexity. While simpler flows and enhanced features often required more technical changes, our team sought to balance usability improvements with implementation feasibility.
Option 2: Quick Select from Coding Space
Option 1: Existing Model, But Better
By adding a button to the sprite dropdown, we would shorten the navigation time to the Sprite Library by 2 steps.
Quick select would remove the step of opening the sprite dropdown, which would further reduce navigation time to the Sprite Library by 3 steps.
Option 4: Sprite Panel Within Coding Space + Improved Search Experience
Option 3: Sprite Panel within Coding Space
This option reduces navigation time to the Sprite Library by 3 steps with quick select, and also relocates the sprite management panel to the coding space for a quicker and easier editing flow.
Option 4 is the same as Option 3, but it also includes the addition of improved filtering and search experience so that students can more quickly locate their desired sprite costumes.
Key Project Decision: After socializing the above flow explorations with stakeholders, the team decided I should move forward with a hybrid of options 2 and 3. After 6 design iterations using stakeholder feedback, I proposed the following solutions —
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.
