Improving the X-Ray Goggles Onboarding Experience

Hannah Kane

by Kristina Shu, Mozilla Foundation designer

X-Ray Goggles has been out in the world helping people kick off their code curiosities for a couple years now, but installing them has always been a pain point for many users. Ensuring users have a seamless experience is crucial for a good first impression and continued use. This post will take a look under the hood at how we redesigned the X-Ray Goggles onboarding experience.

Designer Jam Session

Sabrina, Luke, Natalie and I got together to brainstorm. Our main focus was on usability and finding the simplest way to show users how to install and use Goggles. In the end we decided on two separate web experiences: one for installing Goggles and another for teaching people how to use it.

handdrawn sketch showing relationship between landing page and activity pageWireframe of the two separate pages:

wireframes showing content areas of install page and activity page The Install Goggles page:

annotated version of install page highlighting different content areasBrand Alignment

In an effort to align Mozilla’s brand across Foundation projects we mirrored the look and feel of Thimble’s landing page. This helps create brand awareness through continuity and makes it easier for users to become familiar with our tools. Maybe you’ll notice some similarities?

annotated version of Thimble homepage, showing similarities to Goggles, e.g. "Same typeface" Let’s Get Technical

Working with Pomax, Software Engineer at the foundation, we created simple graphics to lead users through the steps to install the Goggles bookmark. With Pomax’s mad coding skills and browser detection, we are able to determine a user’s operating system and browser. Utilizing this, the site can now offer up graphics specific to a user and the system they are most familiar with. For example:

installation instructions for Firefox on Mac and WindowsActivity Page

Now the fun part, putting Goggles to use! We decided a simple mix-and-match game was the best way to engage users and the perfect opportunity to show off Goggles features like using code to swap out images. It’s eye-catching and fun, but simple enough for a first-time user to complete fairly quickly. Sticking with the Mozilla theme we chose a fox (for Firefox of course), a dino for Mozilla and a Thunderbird. Our fox has gone on to influence further design projects, such as the end of year fundraising campaign and has been christened the ‘dapper fox’.

fox, dinosaur, and bird illustrations, and three versions with top/middle/bottom body parts interchangedTo create an integrated and interactive walk-through tutorial, Pomax was able to overlay instructional bubbles overtop of the activity. We also limited the number of steps and kept the amount of text to a minimum in an effort to not overwhelm users.

screenshot of tutorial in action, with edit pane exposed and pop-up with instructionsTry Them On

Try out the new X-Ray Goggles at goggles.mozilla.org and let us know what you think in the comments below or by tweeting @mozteach. There is always room for improvement so if you have any suggestions or want to contribute to these products, check out our repo!

No responses yet

Post a comment

Post Your Comment