Duration / 2 Weeks
Role / User Research, Visual / Interface Design, Wireframes, Liaison with Amazon Designer

During my University of California Irvine UX/UI bootcamp I set out to improve the user experience of shopping for a Amazon Echo. I worked with two designers in my class and a interaction designer from Amazon to create a proposed redesign of the Amazon Echo website.

Goals

Easy Style Choices / Allows informed buyers to quickly choose their preferred color and make a purchase through Amazon.

Simplify Features / Provides new users with an intuitive browsing experience which simplifies technical features into valuable everyday benefits.

Brand Recognition / Consistent brand representation through leveraging Amazon's colors, typography, and marketing stock photography.

Persona

User Persona / We determined the average Amazon Prime user is mid 30s with a household income of $70k and as of February 2018 44% of all Amazon Echo owners were between 18 to 44 years old.

Meet Natalie / She values clean aesthetics and staying up to date with tech. As a busy mom she wants to multi task efficiently and make her life easier. We wanted to inform users like Natalie how Amazon Echo could assist in scheduling tasks,making hands free phone calls, find recipes, etc.

Amazon Persona
Amazon Storyboard

User Research

Challenges / The current website is not user friendly since there is so much info. There are no modern animations to explain the tech to the common user. Users who end up confused leave the site leading to lost sales opportunities.

User Research / Based on comScore the percentage of Smart Speaker adoption in the United States more then doubled in nine months. Smart Speakers increased from 8% of U.S. households in June 2017 to a 20% in February 2018!  

Slice Intelligence shows although the Amazon Echo family made up 76% of U.S. sales in May 2018 competition was catching up with Google Home reaching 21%.

In the international market Smart Speakers from Google surpassed Amazon with 3.2 million compared to 2.5 million units by Amazon in Quarter 1 2018.

Ideation

Moodboard / Invision was used to craft a Moodboard to generate design ideas. Smart speakers sites such as the Apple Homepod were reviewed along with major electronics sites from LG, Samsung, and Bose. Their designs inspired us to simplify technical features so they are easily understood. Amazon brochures were reviewed to identify key product features while stock photography was leveraged to ensure a consistent design.

Style Guide / The colors and typography from Amazon were well established so the style guide leveraged and enhance the existing palette. Amazon Ember and Bookerly were used for the fonts. These fonts are used in other Alexa product lines outside the Echo so it was important in retaining brand identity.    

Wireframes

Adobe Illustrator was used to develop the Desktop Wireframe. The front page uses a hero image to capture attention and presents a clear call to action. The page is designed to be scrolled so info is presented in small manageable sections. Sections fade into view. Videos explain complex features by educating users of their everyday benefits.  

The wireframes developed paved the way for the developer to create the proposed website redesign at https://wtiao001.github.io/amazon_echo/

Design

Upon entering the site animations provide Alexa utterances an Amazon Echo owner can use to simplify their lives. Animations are designed to appear quickly so users get ideas and imagine the benefits of the product in their own home.

There are two simple choices the user can make. The See options button lets users already informed on the tech to quickly make a purchase. Users can browse color style options suitable to their home decor. Each color has a background animation and leverages high resolution imagery. Users can add the Amazon Echo to their cart and seamlessly purchase using their Amazon account.

Users who want to better understand the Amazon Echo product can scroll down to see demos of it's capabilities. The Dolby section fades in and scroll animations are used to show Alexa utterances. The quality of Dolby sound is emphasized with larger bold text to show it is a key feature exclusive to Amazon.The original design of the website didn't focus enough on sound quality.

Links allow the user to learn more about a particular technology such as Dolby, Microphones, Bluetooth, etc. Our design decision was to show the most essential info to users while allowing them to delve deeper into the tech. This avoids providing too much info at once which overwhelms users.

Reflection

The Echo Products section has several icons designed for other Amazon Alexa Smart Speakers. Given more time these pages would have been built along with the Alexa Overview page to explain the different Alexa commands in detail.

With more time the links which allow users to learn more about the technical features of the product would have been built as well.