Mozilla Firefox


What I did
  • UX/UI
  • Illustration
  • Art direction

Firefox Desktop Onboarding

As part of a small durable team devoted entirely to Firefox desktop retention, one of our key initiatives was to design and test an onboarding experience for Firefox’s desktop browser using a small cohort of users.  The initial concept focuses on highlighting key features within the browser over the first few weeks of usage. We went with a simplified gamification approach to create incentive to try out the various features when they were presented to a user at various times.  The project involved multiple iterations of design and various content was tested over the course of a year. The following are examples of the final iteration of the testing stage. The key findings were passed along to the product team to design and implement a final version to be built into the browser for all new users.

Day One

On Day One an auto open feature would trigger the left panel to reveal a basic intro to Firefox, with the ability to proceed to the next step along the journey. The user had the ability to close the content if they did not want to engage. The Day One key messaging focused on highlighting that Firefox is a product of Mozilla, a non-profit organization.

Day Two

Day Two represented the second panel in the onboarding journey. The auto timing of this panel depended on the behaviour of the user. It would open upon reopening of Firefox, or would auto open after 24-36 hours of the browser remaining active. The visuals were designed with various coloured background gradients in order to show the user that they were at a different point along the journey.

Day Three

Day Three follows suit in the sequence. A user is encouraged to try the search function of the browser with a call to action from the side panel, and is awarded a star for doing so.

Day Four

Day Four is the last stage of the journey where a user is encouraged to try a feature. In this case the user is has the opportunity to download a mobile version of the browser in order to sync their desktop experience with their mobile device.

Final Day

After completion of Day Four, a user is presented with the Final Day panel where they are presented with an opportunity to receive a limited edition sticker in the mail. The goal of this was to provide a real-world item to create brand affinity for our new users.

3x3" Limited Edition Sticker

The sticker is a simplified play off of the official Firefox logo. Since this was intended to be limited edition, we felt that we could break a bit of brand rules 😀

Early Iterations

These are earlier iterations of the onboarding experience. With this version we experimented with the idea of allowing a user to trigger the opening of the side panel using a browser notification as a reminder.

Early Sketches

These are early sketches of various fox poses. The idea of using an animated fox was also explored, but our team decided against this due to an overall goal to keep this onboard experience as lightweight as possible.