Mozilla needed an app store experience for Panasonic's smart TV powered by Firefox OS. My job was to deliver the design and I was responsible for the whole process from initial concepting to the final interaction spec.

I started with background research. I read and summarized 40+ articles and reports on smart TV usage and trends, online video consumption, TV design patterns, set top boxes, dongles, gaming consoles, and video streaming apps. From the summaries I identified a handful of insights and turned them into high level design recommendations. One of the most important insights was that watching "traditional TV" already is a good experience for most people. Users are accustomed to immediate entertainment. There is always something on TV. The first thing a user sees when they turn the TV on is probably their favorite channel from the previous evening. Introducing any type of choice upfront like picking an app to use would already be more work and we had to make sure we didn't add any other obstacles to the flow.

Next I tried out a wide range of different concepts for the main structure of the app. I sketched out ideas and turned the most interesting into quick and rough wireframes that I presented to a team of leads (product, engineering, project manager, design). With each concept I presented some pros and cons with the approach to simplify the comparison for the team. I tied my ideas back to the design recommendations which helped the team identify and focus on a few key items that were essential for the first version. As part of this phase I also created a couple of video prototypes to explore navigation options.

We decided to move forward with a design where the user could explore, learn more about, and launch web apps from the same screen. This addressed my most important design recommendation to remove barriers to content and kept the hierarchy flat. I used the top part of the screen to display information about the currently highlighted app and the bottom part as a "browsing area". I modeled the porportions of each area from the OS and all buttons, notifications, and interactions used building blocks to leverage users' familiarity with the Firefox OS design patterns.

One defining feature the team wanted to showcase was that web apps can be used without installation. To highlight this we de-emphasized installation and used the primary action, pressing "OK" on the remote, to open the highlighted app. This decision introduced a technical constraint which meant that we could not have a software button for installation on the screen. Instead of using a software button the user would need to press a button on their remote to bring up a menu with an option to "pin" the app to the home screen. This consequence was very concerning to me as it hid an action that is core to every other app ecosystem. I was worried that it would confuse users who expected to go through an installation flow. This tension between the mental model of how apps "work" and the benefits of not needing to conform to the traditional installation model was probably the biggest pain point of the whole project. We decided to investigate further in user testing.

In preparation for user testing I built a prototype in HTML/CSS/JS. I wanted to make sure the prototype would work with the TV remote, an essential piece to the actual testing. With some help I managed to hook into a navigation library built by the TV OS engineers and it worked great. I had fun hacking together this prototype. It purposefully lacks visual design and smooth animations for two reasons: I like to prototype before adding polish so work isn't wasted if something needs to be redesigned and I also find that lower fidelity prototypes are better at uncovering usability problems than highly polished prototypes.

We tested the prototype on a Firefox OS TV at Mozilla's office in Mountain View. An outside contractor ran the sessions and I sat in on all of them. Along with several lower impact insights the study had two major findings:
1. The placement and branding of the Marketplace app misled users into thinking it was a store with paid, premium content. This caused confusion and frustration with users.
2. The "instant" (no installation required) app model was not clear and left users feeling lost and confused.

I discussed the findings with the team. We were getting short on time and to realistically make our deadline we couldn't afford any major design changes. The team decided to push ahead with this version and to do what we could to address the findings. I added a tutorial to the first-time flow and incorporated visual hints on how to install an app. I also put together a proposal to change the access point of the app and some IA changes to the OS. The branding team created a new logo and name for the app. I created the full UX spec and reviewed it several times with the team before handing off the final version to the engineering team.