Firefly Remote Tuturial

UX/UI, Tutorial

Summary

This project was to create a tutorial for a new PC remote. We wanted to give the user an option to learn about the functionality of the remote within a simple, entertaining tutorial. I conducted research and outlined the target audience for the project. The visual mockups focused on having a simple navigation and an option for the user to opt-out if they didn't want to continue. I also incorporated transition animations to add some fun into the experience. Finally, I conducted usability testing on the prototype. Once we were satisfied with the results, we added the tutorial to the product.

Project Type: Consumer
Designed for: Desktop
Stakeholders: 1
Product Manager: 1
UX Designer: 1 (me)

My role was discovery, concept design, testing, and presenting to stakeholders, engineers, and prospective users.

Discovery

I worked directly with the Product Manager discussing the requirements, key attributes, and goals of the project. I also interviewed loyal product users to understand what they need in a PC remote. One discovery I found was that the user needed an easy and entertaining way to learn the functionalities of the new remote. We decided the best solution was to create a tutorial.

Challenges

  • Improve user satisfaction when installing and learning the functionalities of the PC remote
  • Design a tutorial that was easy, educational, and entertaining for the user
  • Keep the design and functionality consistent with the existing product brand

Wireframes

I created and tested various wireframe layouts to ensure the most optimized user experience.

Firefly Tutorial

This is the start screen for the tutorial. The concept was that the start screen was a zoomed in view of the remote. When the user presses the Firefly button, the background recedes clockwise, revealing the remote.

As the remote lands on the right-hand part of the screen, the first button in the tutorial is highlighted with an animated arrow. I also wanted to give the user the option to easily exit and not be "locked in" the tutorial, so I added an "X" button to the top-right.

The Results

After some usability testing on the prototype we added the final tutorial to the product. By surveying Firefly customers, we found an increased satisfaction with the product, in part, because of this tutorial.

Firefly Remote Tutorial

This project was to create a tutorial for a new PC remote. We wanted to give the user an option to learn about the functionality of the remote within a simple, entertaining tutorial. We conducted research, outlined the target audience, and formulated a strategy for the project. The visual mockups focused on having a simple navigation and an option for the user to opt-out if they didn't want to continue. We also incorporated transition animations to add some fun into the experience. Finally, we conducted usability testing on the prototype. Once we were satisfied with the results, we added the tutorial to the product.

Project Details

  • March 2004

  • by Joel Gabiola

  • UX/UI, Tutorial