Image for post
Image for post
Phil Dunphy, the typical American Dad used as my persona. Not too techy, but loves new gadgets!

Case Study: Helping you to find and buy smart devices compatible with Amazon Alexa

Antonin Lapiche
Feb 8, 2017 · 8 min read

Shopping online for smart devices can be a real hassle for non tech-savvy people. Information overload, tech lingo and never ending product lists make it hard to make an informed purchase decision. How do we allow shoppers to find and buy smart home devices compatible with Alexa?

I used Amazon as my reference point. I compared the usability of the shopping experiences for smart devices. I mapped out the conceptual models of the different categories of information. I then sketched and prototyped a revamped product page.

Disclaimer: I do not work for Amazon and this is a pure design exercise for a problem I found relevant.

Why did I design this?

“Echo and Echo Dot were the best-selling products across Amazon this year, and we’re thrilled that millions of new customers will be introduced to Alexa as a result.” Jeff Wilke, CEO Worldwide Consumer, Amazon

Alexa was one of the most popular gift for christmas and is not only used by a tech-elite anymore. This means that your parents also have an Alexa and they want to say “Alexa, turn the living room on”. But the reality is a little different.

I came across this problem when my friends tried to buy me a smart thermostat for my birthday. My friends asked my wife if we owned an Alexa. She said yes and they ordered me an Ecobee. Of course it was not compatible with my old heating system and I had to return it.

I went online to see what other devices were compatible with Alexa. The amount of devices and technical details shoked me. As a proud geek, I must say even I was even confused and I decided to look into this problem.

I stepped in the shoes of the Amazon product team and came up with the following goals for the project:

Image for post
Image for post
The business and user goals.

Who did I design for?

I decided to design for all the people who have an Amazon Alexa device but are not tech savvy. The democratization of smart devices and assistants will happen when everyone can make the most of it. It might still be a niche today but the growing competition in the space makes it a promising challenge.

Understanding what a user wants is easy. But delivering a compelling action requires devices, setups and integrations. I’m hoping that making those devices more accessible will change their routines in the long term.

Image for post
Image for post
The user persona of our Amazon shopper

What was my role?

I focused on the interaction design part of this project (usability competitive analysis, IA and user flows). I also sketched and prototyped a solution. Ling helped and provided guidance and feedback throughout this project.

The design process

Validating the problem

The problem was the overflow of information preventing shoppers to find a smart home device compatible with Alexa.

It was a hunch at the beginning. I decided to conduct a competitive analysis to answer those questions:

  • What are Amazon competitors doing in the space?
  • Where should I focus my efforts in the current journey?

I first started to look at 4 places where shoppers look for info about a smart device. I compared Amazon, Best Buy, CNET (the first blog post that show up in Google when I typed “Amazon Alexa Smart Devices”) and Ecobee (a device manufacturer).

I looked at their websites and came up with this:

Image for post
Image for post
The summary of the general competitive analysis

I now had an understanding of the disparities and weaknesses of the competing experiences. I decided to dive deeper at the usability level to compare the most similar experiences: Amazon and Best Buy.

I went through each steps of the shopping journey and applied basic usability heuristics points.

Image for post
Image for post
The usability competitive analysis of the product description

I summarized my results in the customer journeys of Amazon and Best Buy:

Image for post
Image for post
The usability competitive analysis results

Organizing information

To better understand what were the shoppers dealing with , I did 2 card sorting exercises to answer those questions:

  • How might we categorize the smart devices?
  • How might we order the the product sections on the product page?

For the categories, I asked 5 shoppers to group 20 popular smart devices. I used Optimal Workshop to do the card sorting and gather the results.

For the product sections, I asked 6 shoppers to rank 9 product sections including Amazon existing sections and an Interactive Demo section that I wanted to test.

I found that the existing categories on Amazon were pretty close to my findings. Product categories would be Smart Sockets/Plug/Outlets, Smart Appliances/home, Smart lighting and Entertainment.

For the products sections, the results were more interesting:

Image for post
Image for post
The results from Optimal Workshop cart sorting

On average, most of those 6 users were not interested in seeing the ease of setup at first. This was going against my initial hunch. On the other hand, the Interactive Demo section was before the Questions & Answers. Note also that the business driving sections from Amazon are at the bottom of the page.

Iterating toward a solution

At this point, I knew I wanted to focus on the product page and try a solution that would not be disrupting the Amazon shopping experience. My two solutions for the design would involve a rather classic navigation bar for the product page and an animated demo of the smart device.

With that in mind I created the following sitemap to understand how the user would interact with the page:

Image for post
Image for post
The sitemap

As my understanding of the product evolved, I’ve put together a set of product requirements that I would use on my design. I moved on to some low-fi sketches:

Image for post
Image for post
The userflow with wireframes

The navbar was the most challenging part. What information do we show and when? Is it redundant with what the user already sees? How much space do we have for our categories/ What’s the call to action?

After a few iterations, I ended up with the following:

Image for post
Image for post
The Navigation Bar

For the Interactive Demo, I considered using the microphone of the device or an actual Alexa device. It would allow the user to say the command himself and see the result happen right away. Instead, I went for something simpler and easier to interact with using a carousel and a button to trigger the action. We would have to test with user to see if it makes the job.

Image for post
Image for post
The Interactive Demo


I created a prototype of the solutions using Origami to get a feel for the experience and see if the navigation bar was integrating properly in the current Amazon website. One of the constraint of the project was to keep the same visual design as the Amazon brand.

I also wanted to see how easy it was to interact with the demo on a touch device (sliding and tapping).

The prototype made with Origami

My focus for this project was on the interaction design and information architecture. I decided not to proceed with an in-depth user testing. Instead, I got feedback from 4 Amazon shoppers:

  • Everyone understood the use of the navigation bar to go from one section to another one.
  • The space where the Product Summary thumbnail is on the navigation bar feels “weird” when it’s blank.
  • No one noticed that the product sections order changed.
  • Everyone found the Interactive Demo helpful to understand what the product does.
  • But the swiping and “try it” button combination seemed confusing.

The next iteration would have to deal with those two challenges:

  • How might we best use the space on the navigation bar?
  • How might we increase usability of the interactive demo?

What is Amazon doing?

As a conclusion, I wanted to highlight that throughout the project I’ve noticed that Amazon has implemented two navigations bars. They are on the product page of the desktop version.

The first bar is a fixed navigation bar that appears when the shopper scroll down to the bottom sections of the product page. It includes the product summary and the “buying option” button:

Image for post
Image for post
The new “product summary” bar on Amazon

The second bar is a fixed right bar that appears when you have an item in your cart. It shows the content of your cart at anytime on the website:

Image for post
Image for post
The new “cart” sidebar on Amazon

What did I learn?

In depth usability analysis of your competitors will help you find the missing gaps.

When I started to look at what other companies were doing in the space, I noticed differences in the wording and the information’s presentation. It’s only when I looked at the usability at a granular level that I was able to see how the competitors were solving the problem. I created a report that follows heuristic guidelines and outlines both positive and negative aspects of the product interface and service offering. I was able to gather insights and identify where the problem was and why it was there. For this particular project, I focused and got inspiration at the same time on how to fill the usability gaps.

Elegant and simple UI patterns can be tweaked, but not too much.

Effective interaction design relies on standard patterns for the behavior of interface elements. Communicating their interactivity, providing actionable feedback and indicating progress help a user through a flow with little effort. By starting with a pattern for some of my UI elements, I tweaked them to solve the specific problem for Amazon shoppers. While it worked pretty well with the navigation bar, the carousel and button who represented and Amazon Echo confused the users. A simpler button might have been enough?

Basic product requirements will save you time

Before jumping too fast into wireframing, I fnd it useful to go back to my sitemap / user flow. I can list what I need to design and how specific UI elements of the design will help the user complete tasks. I spent 20 min writing down the requirements for this project. When I did my wireframes, I used them as a checklist to make sure I did not forget any UI elements. It was also easier to go collect the required assets and have them available.

Further readings: I recommend you the book by John Rossman called The Amazon Way on IoT. John shares great insights about Amazon’s strategy, customer obsession and some good stories about the echo and Alexa.

Please tap or click “♥︎” to help to promote this piece to others.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store