Alexa Smart Home
Amazon Work Project | Mobile UX Design

Alexa Smart Home
Amazon Work Project | Mobile UX Design

In a smart digital era, how can we get people excited about connected homes & confident in the purchases they make?

 

bk-header

Connected home at the time was a young (6% household penetration) industry but has been driving lots of curiosity among majority consumers. In this seemingly early market, the Amazon Echo is a major mover. It is beloved by its frictionless, voice control that makes it natural to control smart home devices without always relying on mobile phones/apps. The function is scaling quickly with Alexa API Integration, Alexa Skills Kit, and the Alexa Fund. Approximately 20% of Echo customers interact with Smart Home functionality through Alexa – almost 3X the national average for smart home usage.

Challenge

Alexa + Smart Home! This is a unique challenge due to dillemas below:

  • The connected home products are too new to get people pass the hook.
  • Although Alexa is loved by its owner for convenience, shopping for things compatible with Alexa is not easy; it often needs to be a techy enough process to “pick the right ones”.

ASH - challenge - img

In a word, shopping for smart home products should not be confusing or intimidating…

 

 

ASH showcase

I was there from the start. Our home improvement business partners came to us when it’s just a drafted press release document, and I worked with them to design the smart home shopping experience on Amazon.com from the concepts. Where to prioritize efforts in the shopping journey, what to get people inspired if they decided to care or if not, how we still let them explore with transparency, how people discover and evaluate Alexa compatible products, how to help customers onboard in an interactive education experience, even the brand badges and marketing copy – the works. As there’s a complex set of variables in this request, I chose to go mobile-first to better dissecting and simplifying the user flows to rapidly push designs further. I couldn’t be more chuffed about how much the experience evolved based on what was learned in a single month, and our targeted customers seem to agree.

 


Process

My quick process

Areas of opportunity in the shopping journey

I dived in distilling information from the preliminary research, and mapped out the shopping mentality for smart home product shoppers from discovery to evaluation. This helped identify why and how to incorporate greatest areas of opportunities into the shopping journey.

Alexa Smart Home Shopping Mentality

Where to Prioritize Efforts

Among the various touchpoint in different parts of the shopping journey, the search and product detail pages are the highest touch areas, and Amazon has full control of its customer search and product details page. In the research, I’m seeing customers are using them but they are not fully rewarded; they also use all these alternative tools and resources, thus taking up lots of their energies trying to get inspired and learn about how to make right decisions. This means in Amazon shopping journey we’re not doing enough in those cases to help customer make the purchase. Therefore, I chose to investigate these two areas, so that customers can efficiently find information they need at places they expect.

A Simple Model

There’s a common theme in the research that customers are not sure they have all the information they need to make the confident purchase, when they did, they may have gone all over the site or maybe all the way to checkout only to finally find that they need to get other things together to work; To solve this theme about lack of information, I set up a simple model to help customers understand all of the tools and equipment they need to start discover and evaluate in the purchase journey. I call it the “A+B” model.

The right shows how the concept propagated into the UI, as an example.

simpleA+Bmodel1.1

So customers come in here and see that they either need both the A and B devices, or just A – like an Alexa device, which the customer might already own.

We remember what the customer already own, and lead with that info in the user experience. This brings convenience in the shopping journey, saves customers’ time by making their lives easier & preventing accidental purchases, and helps the customer relate better the advantages Alexa smart home can deliver in a more confident way.

Sketches, explorations, learn fast… ideas are evolving!

Click video below to view how lots of ideas are generated and evolved, for the product evaluation part.

 

Fast ideations that were put into early testing

Assumption:

Smart home shoppers need to explore and find out what bundles of items that work together in order to purchase.

The idea:

  • Provide the compatibility structure with a default bundle
  • Easily pivot and explore compatible smart products options without leaving the context of a product detail page
  • Browse and zoom in with more information, while creating customized bundle
final_the nav idea

1st round guerrilla user study

With the low-fi wireframes, I employed fast research study to validate or invalidate some of our major assumptions and ideas, and see if they hold true for the smart home product evaluation experience. I invited the team to help facilitate & sit in with 6 participants we recruited from other departments in the company, and tested the initial design concepts based on the mobile experience I created using InVision that can be interacted on real phones.

Some awesome pieces of findings:

  1. The compatibility structure of what items needed in the UI received well
  2. It was not clear why a hub is required – participants in the user study stopped when finding out the end-point device still need another item (the hub) to work with Alexa; they do not understand hubs and quickly got hung up in the flow by dropping the current flow and trying to find additional educational info or to compare hubs.
  3. Nearly all users don’t feel ready to jump into bundle purchasing while they are more in the mood of making sure if “I’m in a right position” or “at this point I am looking at the right things for how these work”, as there’re a lot to catch up with when it comes to home automation solutions, “you don’t know what you don’t know about”.
  4. Participants noticed the “works with” compatibility quickly on the page and found it useful. They trusted this information. Some interpreted this as items required for base functionality rather than for additional Alexa voice capability.
  5. Participants want to look for information about how to make items work (eg: how to install)
  6. Alternative solution areas presented was confusing on the end-point device detail page but aspirational and helpful on the hub detail page. Participants also have urge to confirm what solution areas a hub does not work with so they don’t make false purchases that do not work with the system in their home.
  7. Participants found the utterances (example commands) and “I own it” helpful when noticed. They also feel “I own it” should be already recognized since Amazon knows their account info rather than always having to take actions to indicate.

With the above customer inputs, our first guerrilla study rendered pretty good insights for us to adjust our assumptions and actionable learnings.

We had a chance to avoid doing work around a feature that should not exist in the first place (encourage products bundle purchasing), and got a better understanding of our customers; emphasizing the purchasing factor was too abrupt to be effective, while customers tend to do a little more exploration and pivoting on the product evaluation page.

This fast prototyping & testing also achieved greater clarity in the process: I thought it’s time to expand the mental model from just product evaluation and think from an end-to-end flow perspective, as I observed in the in-person user study people are willing to make efforts exploring and making sure they are looking at the right products even being exposed with individual product details – we think one possible reason is because the smart home concepts are too new to the market and people are often not prepared to have product compatibility knowledge yet. People also have choices now, if they open it up and in a few seconds they don’t immediately understand the value (like in our user study participants don’t understand why a hub is needed), they’re DONE. This means we need to surface the right information at the right place. The educational information is needed to get customers inspired and excited about the compatibility knowledge we can show and communicate to them. The next step is where in the flow we can surface those inspirational info and how.

 

User flows

How can we build better user experience for our customers in a transparent way so that users are able to balance their fears of the unknown with the advantages that the new experiences can deliver?

This is where I dived into the end-to-end flow, brought in search discovery pages to see how we can progressively educate customers about Alexa & the Smart Home products in the customer journey, without them feeling about the pressure not being able to purchase the “right” products. The goal is to provide customers the right level of information and action at each step.

When shopping for a smart light bulb:

flow_inSketchpp53_trns

Exploring search & discovery

Below are some design explorations that I thought can be compelling for the search & discovery step. They do not neccessarily show the final state, which I’ll demonstrate later.

 

 

Top guidance for smart products search terms

  • Gently drive attention on top of search results to get the idea crossed when customers start discovering products
  • Continue the guidance with simple & relevant toggles/filters for the search term context
  • Use badges to identify items in the search results that respond to the filter(s) on top

 

 

Pivot to the right set of smart products customers want

  • For customers who already own a smart home product/system, they can conveniently browse items compatible with what they own by default, and pivot to broader/narrower set of items right away through flexible filters based on their needs.
  • For curious new-comer customers, they can figure out what products are the right choices for them by following educational guidance and opinionated product recommendation showcases.

Design for inspirations

While solving for clarity, how to get people excited? We became fascinated by the idea of discovering the Alexa-enabled hands-free world through customers’ eyes. What if you could see through the eyes of a smart home owner in his/her living room? Or watch the kitchen lights from dark to illuminated in function just triggered by a your voice command? It may sound crazy, but we wanted to bring the closest thing to 360 degree home reality. While there are many ways to discover Alexa hands-free capabilities and the smart home devices, we realized there is no better way to experience a smart home experience right now than through video. A picture may be worth a thousand words, but live motions and video can take you someplace and show you around.

The light-weighted GIF as opening sequence is the idea of letting people see the smart home in action through their eyes, a visual pulse of what can happen – right now. I mocked up several cases we can educate customers in a more excited and “learn-by-doing-it” way via short video/GIFs; my team is as excited about this vision.

Learn Alexa smart home magics by trying out the commands

– Experience in the scene with the customer’s voice-over for sample commands

– Tap commands to try samples

– Flip over to explore the entire house of smart solutions!
(solution areas navigation at the bottom; or just think of the top section as a 360 degree video that allows you to “peak” into the house for various solution areas – from the lights in kitchen, the thermostats in living room,  the outlet in bedroom, to the door lock  or that camera above the gate…)

Get excited and inspired following along

– Be brought into the “smart” dimension of this end-point product with a quick, light-weighted GIF opening sequence

– Get educated simply by continuing to slide information around while browsing the product page

– Follow through easily; complemented by a more visually focused area, customers can quickly check out more about what items work together to make magics work, which is being pitched in the video

2nd round user study

This round of user study focused on testing a broader user flow than the 1st round: 1) the search experience, with the one of the above GIF top guidance solutions (similar to #4); and 2) the product detail page experience, with the light-weighted opening sequence, followed by video autoplay + related compatibility information while scrolling on the product page.

All 5/5 test participants seem to agree that with the light-weighted interactions, simpler visual cues, and new inclusions of educational information, they have clarity of understandings for smart home products and are inspired to know what seem useful to follow through.

Some of the critical findings that helped refine the UX further:

  • Participants do not want to be distracted from information not directly related to the product during evaluation (Alexa-related video V.S. the Product video)
  • Participants want to feel like they are in a boutique, a clean and personalized experience – “Alexa concepts with home seems new and cool””it’s different than usual Amazon pages… I like it jumps into that (the auto-play of video contents)””I’m definitely drawn into the box when it (the background) is greyed out”
  • All participants initially blew past the hero taken-over while searching and jumped into regular search results. Some reasons mentioned: “I’m looking for just a bulb, not looking for a system or a kit like in the top part”; 2 participants explicitly mentioned they want to “really filter out and search products compatible with Alexa”, after viewing regular search result items
  • Price, prime, and reviews stars are good to be considered “organic” or “trustworthy” Amazon product elements in search results

Directions moving forward

Search and discovery

Below is the recommendation for the search part after incorporating the 2nd user test feedback.

Opening guidance

While searching by smart home related key words like “smart lighting”, the following light-weighted opening will show on top of all search results:

Pivoting products during search discovery

Customers initially see the top guidance with top recommended products as examples, and they can flexibly filter into products meet their specific needs compatible with the smart home system they’re interested.

Product evaluation

Below are 3 directions I identified based on our 2nd guerrilla user tests and combination/refinements from previous iterations.

Head: interact with sample commands

Scroll to a section later in the detail page: show how this item [Works with Alexa]; grey-out background only after clicking into it

Head: light-weight ingress to [Works with Alexa] contents, from where it focuses on related education

Scroll to product details bullets: more tactical info around compatibility and sample utterances (commands)

Head: section to ingress to related education through sample utterances, and to ingress to compatible information

No other sections in the product details page

The stab

The final outcome of my work on this project is making the above recommendations going forward for both search and product evaluation.

The team intend to test on the directions above to validate moments Amazon shoppers evaluate a smart product: on Amazon’s product detail page, I proposed leading with moments shoppers get excited and then followed by moments that may be less exciting but crucial to build confidence in the purchase, but –

  • Which of the 3 detail page directions complements most the mental model of Amazon shoppers?
  • Where do shoppers expect to have those moments on Amazon’s detail page?
  • What are the subtleties and nuanced perceptions that can help customers make the right purchase decisions?

These are questions to be testified. As the product detail page is such an important piece of the project, we didn’t want to make the decision before knowing it can work.

 


Results

Designs rolled out on both mobile and web parity in several weblabs. Among them some very exciting data has come out of the proposed UX design solution:

  • The first US weblab ux (badging {desktop & mobile}, Above The Fold/Below The Fold widgets {mobile only} launched in February, 2017) is significantly positive with the Work with Alexa products’ revenue increase.

  • Encouraging signs keep coming during Weblab rollouts, including increased interest from vendors to join the program, increased Alexa attachment of Smart Home devices (in weekly attach rate for test vs. control), and a positive trend in shopping cart-adds for the Work With Alexa devices, which reinforced that the product proposal is on the right track.

  • Hub required products, the product detail pages with the most additional content and thus, the largest downward displacement of the original twister (product color/sizing/variation options) and price, were trending MOST POSITIVELY. One hypothesis is that the additional content provides an educational benefit that helped shoppers more easily make a complex purchase. These ultimately persuaded our team and stakeholder teams in balancing some negative OPS effect of pushing down original twister/price information to have this exception based on content.

  • Reached business impact goal (revenue size) of the year 2017.

 

(screenshots of the launched experience referenced below, as of late 2017 onward)