Firefox for Echo Show

In 2018 I was asked to design a browser for a device I had never used before, a device that could be primarily used with your voice.

That device was the Amazon Echo Show, a smart assistant with a touch display. I didn’t have direct access to the actual product, the project was covered by an NDA and all we had was a demo version locked in a room inside the SF office. So, all they gave me was the screen size, the screen resolution, and the pixel density value.

I asked myself: How should a browser “look” when you can control it with your voice? In which situations would you use such a browser? How do you interact with it when it’s not at arm’s reach? From there I listed a set of principles that guided our work: touch targets had to be as few as possible, touch areas as generous as possible. User feedback had to be visual first and voice later. Animations had to be more prominent than those on a desktop or mobile UI, for example the loading progress bar would fill the whole address bar so that you could see it from many feet away.

Not having direct access to the device was particularly challenging but we found our way through. I built a cardboard version of the device and I slipped inside a Nexus 7 tablet that had the same resolution. The engineers would send me pictures with real-world objects next to the touch targets to give me a better understanding of the actual result. It was hard but when the device was finally shipped in stores it was pretty exciting to say: “Alexa, open Firefox.”