Code Naturally App Redesign

I redesigned Code Naturally’s coding app to increase usability for kids learning to code.

Date

Spring 2019

Collaborators

Code Naturally

Overview

The Challenge

Code Naturally is a Santa Cruz-based organization that helps teach kids aged 8-15 to code through student-driven projects, such as animations, games, and generative art. Code Naturally has their own coding application that renders p5.js code alongside the code editor.

In Spring 2019, the CEO and CTO approached me about redesigning Code Naturally's coding application. Our goals for redesigning the coding application were to:​​

  • resolve pain points and bugs in the current user experience

  • update the UI to be consistent with Code Naturally's new brand guide

My Role

I met with students to understand how they use the app, restructured the app's information architecture, drew initial sketches and wireframes, fielded feedback from UX experts and our end users, and incorporated the feedback into a final mockup that was implemented in the next release of the coding application.

Case Study

Understanding Our Students

While I was working at Code Naturally as a Designer, I also worked directly with students as an Educator to help them learn to code. I observed students using the app and had conversations with them to understand how they used the Code Naturally app and where their pain points were. I developed three user personas with Sketch based on my observations and conversations  with students.

User Persona - Zakir
User Persona - Joey
User Persona - Natasha

What needs to change?

In our conversations, many students expressed frustration that some action buttons inhibited their ability to accomplish tasks while coding. Two main frustrations were:

  1. It was difficult to navigate to some features due to the information architecture of action buttons.

  2. Students were unable to view the entire canvas at once because the canvas could not fit on the small screens of the Chromebooks provided by Code Naturally. 

These frustrations informed me that I needed to ​revise the app's information architecture and design with hardware limitations in mind.

popout-covers-search.png

The Pop Out Editor icon in the top right hand corner obscures the Search feature.

Although this screenshot was taken on a high-resolution screen, the toolbar at the top took up too much space on the low-resolution Chromebooks.

Defining and Grouping Actions

To address the first frustration, I decided to refine the hierarchy of actions a user could take within the app. I listed them all out, then used highlighters to group the interactions into categories based on similarity and which module of the app the action affected.

Once they were grouped by function, I wrote microcopy for each category to ensure that each action was related to the overall goal of that category.

app-buttons-1-edit.jpg
app-buttons-2-edit.jpg

Low Fidelity Sketches and Designs

Based on the groups of actions I organized, I drew some initial sketches of how they could be organized within the interface. After getting feedback on the designs from the CEO and CTO, I created a low fidelity mockup of the app in Sketch.

App Layout Sketches 1
Sidebar Sketch

High Fidelity Designs

I made several mockup versions based on my initial sketches and low-fidelity mockups, then got feedback on them from students, Code Naturally's CEO and CTO, and a design expert.

 

I found that although the low-fidelity version worked well in gray scale without any information present, the dark toolbars did not translate well into color, and distracted from the canvas and editor.

I don't understand what the buttons at the bottom of the code editor do.

— Trevor, new student at Code Naturally

The white bar at the bottom looks like an input. The green color overwhelms the UI — maybe, try a neutralized color for the sidebar. It's hard to read the text in the sidebar."

— Jeremy, Head of Design at Looker

Final Results

The final mockups I created address the original pain points we aimed to solve as well as the feedback I received from students and our design expert advisor. Labels on the text editor buttons clarify their function to new and existing users. The neutral color palette of the sidebar does not overwhelm the overall UI, allowing students to focus on their creations. The zoom feature allows students to zoom out to see their entire canvas or zoom in to focus on small details.

Some students were hesitant to begin coding with the new version of the app; especially students that were already comfortable with the old version of the app. However, they quickly adapted to the new version, and ended up loving it (especially the zoom feature)!