Echo Show Visual System

We needed a consistent hierarchy, patterns, and visual treatment to create a cohesive experience for the Echo Show so that customers can more easily complete key tasks.
Client

Amazon, Lab 126

Responsibilities

User Testing
User Research

Deliverables

App Design
Business Analysis
Business Strategy
Prototype

Project Summary

When I started this project, Alexa Show was very much still in development. It had not yet been released to the public, but the company was already exploring a variety of Skills experiences. These experiences were meant to emulate those of Echo, but were intended to add value with a supplemental visual experience. Early experiments were yielding experiences that were challenging to navigate, maintain, and scale.

The core value of the product was to make it easier for customers to go about their lives, hands-free and at-a-glance, but customers were carrying a lot of cognitive load between tasks, and having to re-learn patterns with each Skill. We needed to develop visuals for a voice-driven medium without overloading the user or veering away from Echo’s mental models.

Goals

APPROACH

As teams explored skills and how experiences could give customers a more optimal experience at a glance, there grew a need for a systematic approach to both the structural, process-based, and visual aspects of the system to ensure a level of continuity for customers as they interacted with different skills, while also ensuring a system robust enough to support the breadth of tasks these skills were intended to accomplish.

Systems audit and heuristic analysis

I kicked off the project with a quick heuristic analysis of a set of visual Skills experiences and the Echo companion app. This helped identify some needs early on, and helped narrow and clarify what needed to be identical versus what needed to be improved or simplified The cards below, for example, were being used in some Echo Show experiences over the top of images in some places and in a grid in others. The hierarchy and saturation of information made some tasks challenging--how much information did the user really need at one time?

The original home screen for the Echo companion app, mostly gray with a weather card.

Establish patterns + EVALUATING PRINCIPLES

Following the systems audit, I mapped out patterns in key domains: entertainment (music), shopping, lists, and weather. There were few common themes between Skills and domains, which I used to form a set of guidelines and patterns that would streamline the customer experience across domains. This was a new type of experience, so it was important to establish a set of evaluating principles to help us choose a direction objectively. These principles included: consistency across systems, visibility of system status, recognition over recall, and clarity.

This is a sample from a concept for a card-based launcher experience

Synthesis

In addition to the details of the Echo Show experience, we also needed to consider the larger Echo family of products as a system–how would the devices relate to each other? Should they? Did the same schema make sense for both? Below is an exploration of different organization models.

Further exploration led us to an experience built on a broader conceptual hierarchy based on the nature of the specific task–one that would apply to a skill regardless of which domain the Skill fell under. Because we opted for simplicity and focused tasks, we could distill the information into three levels:

exploration

Our guiding principles were simplicity, scalability, cohesion, ease of use, and emulation of existing mental models. We also wanted to make sure the experience had an ambient quality to it to be a calming and inviting experience in the home.

The next step was to explore how this might work within the different domains:

Home + Launcher Screens

The home and launcher screens followed the same format, so some exploration was needed to determine how much detail would serve a spectrum of Skills. In this concept, we explored the option of displaying other Echo users who might be online.

Calendar

When it came to the calendar. I explored weekly and daily views, and several interactions for scrolling through events for the day.

Media Player

The three page depths outlined for the different screens worked well for the media player--the ambient "launcher" view showcased cover art, while this view made it easy to view and choose between media a list of options.

Video Caller

An early example of a video message. Screens below show different layouts for an "inbox", which may have needed to support a mix of video- and non-video messages.

Weather

This is one of the iterations--we took a different direction with reduced information.

Final designs

Ultimately we opted for simplicity, keeping the visuals incredibly simple. We expected most customers to be focused in on a specific task, so we cleared out all extra information. This made tasks easier to complete, as well as making it easier to accommodate larger text and controls so customers could better consume the information from a distance.

Echo Show music player screen
MORE portfolio items