‹ Back
Chip Rogers UX Case Study

Amazon Echo

I defined and designed a visual UX experience for the Amazon Echo to communicate device state and status, assuage privacy concerns, and delight and engage customers.

A Quick Disclaimer
Unfortunately the work I did for the Amazon Echo was all done in its pre-launch state of secrecy. When I chose to move on from the project it was not possible (legally or ethically) to make portfolio copies of my work. I'm seeking to get access to old work, I hope the narrative below will suffice. Thank you for your understanding. -Chip

Context

As a groundbreaking voice interface experience, the Echo needed a complementary visual and motion UX that informed and engaged users. I was able to evolve a functional solution into a key component of the device's design and personality. My work served as the keystone for the overall product brand, establishing and representing Amazon's digital voice and vision.

User Problem

The Echo team faced a significant customer challenges. There were real concerns around customer privacy and that users may feel trepidation about welcoming a device into their homes that was always listening. The Echo product exist in common states that would clearly benefit from visual feedback to aid the user. Additionally, the hardware needed to be imbued with energy and personality, beyond the text-to-speech voice, to bring delight and life to the product experience. Being a first of its kind technology, there were no obvious patterns to follow, making my design solution a ground-up process.

Solution

Some of the very earliest work I did for the Amazon Echo was to craft a simulated experience of the device, months before the industrial design even started. With can-do enthusiasm and little else to guide me, I superimposed a not-yet-designed device into a photo of my kitchen and built a call-and-response demonstration in Flash to take to our CEO. From that first early demo, my work started to demonstrate the potential interplay between device and user, and gave the company confidence in the potential of this initiative. The very first bit of product personality was shown in that demo too, when I implemented a small ring of LEDs that flashed the user a smile on wake-up--a nod to the iconic Amazon logo. This continued to be an important goal of mine, to look for ways to imbue the varied experience with small hits of delight for the customer.

The visual and motion UX for Echo continued gaining definition through my ever-evolving systems of demos. While I started with Flash, I eventually collaborated with two of our devs in Cupertino to build a Unity 3D simulation of Echo where the device could be placed and viewed from multiple angles in a virtual room. With regular ideation, collaboration and feedback from me, an industrial design was finally chosen for Echo that featured a ring of LEDs atop of the device, engineered to be to be visible from all angles. The configuration of LEDs was a decision point that I was ultimately responsible for. My work included diagrams, collaboration with engineers, physical component evaluation, trials with our prototype devices, and ultimately presentations to our VP and CEO. I passionately and convincingly lobbied for optimal customer experiences throughout, and was pleased to earn top level support for our proposals.

My work was far from over though for we only now had a platform for our expressions, but the animations themselves didn't yet exist. The way the LED units operated was not unlike the frame by frame animations I had known for years from making them for the web. We had 12 "pixels" in our ring that could change color frame by frame, for a specified duration of time. Lacking tools to automate this process, I took to hand-coding the animations frame by frame in a text editor--a manner jokingly referred to as "using The Matrix."
A more traditional-design aspect of this task saw me proposing and soliciting three different visual themes possibilities for the device: one rooted in circular movement (to compliment and emphasize the device form), one based on organic life (to bring natural, random movement to a very artificial device), and another based on simple color and illumination. The circular movement theme gained the favor of the team and leadership, and we proceeded to craft dozens of animations in that style, each mapped to a specific state or user function.

For the final design and delivery of animation codes for the device, I utilized a self-made HTML authoring tool (with help from a talented design partner with fantastic JavaScript skills) that helped to bring color and speed to "The Matrix" and allowed for quick testing of animation concepts. This allowed me to produce much more elegant anti-aliasing and easing and saved considerable time over having to transfer the animations over to a prototype device to test.

Outcome

The visual UX I built for Amazon Echo is still in use today on the hundreds of thousands of units that have been produced and sold. They were heavily featured in marketing and product photography and are positioned as a key component of the product, platform, and service identity and branding.

Looking Back

I was thrilled to see that the intensive work I had put into the visual UX survived my 12-month absence from that team and continue to be a key part of the award-winning devices user experience--they're even featured in an 2016 Super Bowl ad, a first for Amazon! It was truly an experience that tested my design talents and understanding, forcing me to think about motion, color, and brand in ways I never had before. I look back on my experience with the Echo device UX with overwhelming positive memories, and pride myself in how the experiences I crafted were a continual source of positive progress in a challenging product development process.