︎

Mozilla Webmaker mobile app + tools


As Design Director for the Mozilla Foundation I ran all product and brand design efforts (note this was circa 2012!). The Mozilla Webmaker project, a collection of tools that aimed to transform passive online consumption into active online making, grew an international audience through its website, mobile app and three online tools – Thimble for HTML/CSS, Popcorn for video, and X-Ray goggles for digital literacy. As the original UX/UI designer for the Webmaker project I touched early versions of each and experimented with new ideas. Later I oversaw the team that continued to develop more mature tools. I oversaw a rebrand for Webmaker, was involved in the Mozilla rebrand, iniatiated our first Open Design community efforts, and helped to guide and develop more mature product launches and advocacy campaigns.


My role: Leadership, strategy, UX/UI, research 
Team: Mozilla Foundation



Initially we developed paper prototypes and tested them with personas we’d identified early on in the process. Working extremely low-fidelity at the outset, we were able to quickly narrow in on the process of getting users from the state of “making” to “having made something” very quickly.

“Hank” was just one of our many personas. He was a real person and target audience member with whom we could test our ideas.
Our early ideas for tiles as a means to make a huge variety of outputs became the core tenet of our app. We developed an early proof of concept, in blue below, and quickly iterated on the UI for a more consumer-facing mobile app for Android.





Thimble was another Mozilla tool under the Webmaker umbrella. Its core functions were to make coding in HTML and CSS easier for beginners and to bring a meaningful coding experience to the web.

Over the project’s lifespan I oversaw a rehaul of its interface for improved functionality, a realignment with the shifting parent Webmaker brand, and a relaunch of the tool under Mozilla’s Teach initiative.







An important aspect of all the Webmaker tools was experimentation. As a non-profit, we were doing something that other organizations did not have the mandate to do. If we had an idea we thought could get us closer to our mission, we would quickly fashion up a prototype to see how far we could take it. Webmaker’s “Collector” project was one simple idea to make the web more transparent and accessible to makers.





Our final product was X-Ray googles, a plugin that allowed users to see how any website was built and then “hack” it, or remix it to make it their own.

To encourage remixing, we showed off other people’s projects in galleries. Applications varied from teaching prompts to practical jokes such as rewriting the homepage of the New York Times.

Onboarding was always a key concern in X-Ray Goggles. Because the tool was not yet entirely intuitive, we created a fun and easy way to get started by remixing the head, torso and legs of fun characters.
Orlando, Fla.   hello@cassiemcdaniel.com