Mozilla

My Role

Ideation • Wireframes • Functional Prototypes • User Surveys • Implementation

Background

In addition to Firefox, Mozilla offers a suite of apps under the Webmaker umbrella including TogetherJS, X-Ray Goggles, Popcorn Maker, and Thimble. Thimble is a code editor that makes it simple to create webpages by writing HTML, CSS, and JavaScript. It’s used by educators to teach coding, but there are no built-in pedagogical features to support this use case. Instead, teachers repurpose code comments to embed explanations within the code.

The use of code comments has several drawbacks. It bloats the code, reducing the readability of both the code and comments. There is no option for multimodality such as images and links that can contribute to the instruction. Lastly, there is no way to order comments on a pedagogical basis. Instead, comments must be read in the sequence they’re presented in the code.

Our goal was to create a dedicated feature that integrates tutorials within the code editor. This feature would enable educators to create and share tutorials in a low-friction way, while keeping out of the way of other user groups who don’t need the feature.

I took a user-centered design process for this proect. From ideation to implementation took about one year.

Ideation

I met regularly with the Webmaker team, a cross-functional group of designers and developers led by a product manager, to discuss blockers and receive feedback on my progress as I went along.

My first step was to wireframe potential designs for the tutorial feature. The key considerations were making the tutorial usable while referencing the code, and making efficient use of the screen real estate. I created low-fidelity sketches using pen and paper.

Five layouts were created: drawer, popover, sidebar, palette, and expander. After several rounds of feedback and iteration, I developed functional prototypes, spinning them up as Heroku instances. Screenshots of those are presented below.

User Surveys

Next I solicited feedback from Thimble users by conducting a user survey with 92 respondents. Demographics revealed that respondents ranged from age 16 to 52, characterizing 17 as novice versus 75 experienced coders.

Respondents were presented the five potential designs, plus the original comment version of a tutorial as the baseline, in randomized order. They were asked to rate each design according to their preference on a Likert scale of 1 to 5. In addition to this quantitative data, we asked open-ended questions for qualitative analysis, such as what they liked or disliked about each design.

Results revealed that comments were least favorable, averaging a rate below 2.5. The sidebar design was most preferred by novice and experienced coders alike, with an approximate rating of 4.

The free responses gave us insight into how our users considered the pros and cons of each design. For example, respondents noted the Sidebar layout was good at getting out of the way, which was a theme that came up frequently when discussing the other designs as well.

Very similar to Drawer, but better, as it doesn’t pop over the code nor does it effect the editor space nearly as much (losing vertical space from the sides less frustrating then losing horizontal space from the bottom). Also how it takes space from both the input and output sides equally, rather then just squeeze the input.

Here, a respondent talks about the drawback of the Expander layout:

Visually I found it hard to find the tutorial again after I “close”d it. Also, the animations right on top of hte code I was editing was distracting and felt like it was slowing me down considerably. Though it pointed me to the right part of the code it wasn’t obvious in the beginning.

Design

The final design added a number of touches to improve the user experience based on feedback received in the survey. This included a way for users to toggle the tutorial into and out of view. It also supported a feature dubbed smart lines, that detected line number references in the tutorial, turning them into links that users could hover to highlight the relevant lines and click to scroll to them.

Line references in the tutorials were designed to update their line numbers as the the code was edited, adding or removing lines before the relevant section of code.

Careful consideration was given to the user flow. Linking a tutorial to the Thimble document as achieved by tagging it with its URL. The design also accounted for multiple tutorials to be linked, resulting in a paginated tutorial.

Implementation

My next responsibility was the implement the feature. To accomplish this, I learned the ropes of many systems including the Webmaker Suite codebase, Bugzilla, and libraries like CodeMirror and RequireJS.

My pull request underwent code review, uncovering several areas to improve performance and better match the coding conventions with the existing codebase.

At last, the tutorial feature was put into production.

We saw immediate adoption, both from Mozilla using them for starter templates, and from our target audience of educators.

Future Steps

While the timeline of the project didn’t allow it, as a next step I’d like to conduct a summative evaluation. This would include a usability study of the landed feature, identifying pain points and opportunities for refinement. I’d also like to track feature adoption rate and explore how tutorials can be a unique value proposition of Thimble to be adopted by educators and other users beyond.

Portfolio