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.
Wireframe of the two separate pages:
The Install Goggles page:

Brand 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?

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:

Activity 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’.
To 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.

Try 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!