Echo Spot
ROLE
Art Director, UI Designer
TIMELINE
Dec 2022 - June 2024
TEAM
UX, VXD, PM, IXD, VUI, MXD, Illustration, Product, Engineers, UX Writers, Packaging
PLATFORM
Echo devices, Mobile App, Packaging
STATUS
Shipped Q3 2024
TOOLS
Figma
Overview
Replacing the Echo Rook and Dot, the Echo Spot offers a compact, stylish, all-new semicircular form factor that fits seamlessly into any space. Designed to address common customer feedback, such as "Alexa didn't do what I wanted," the Echo Spot features a focused display that makes it easier to see what Alexa is referring to on the screen, reducing the need for repeated or rephrased requests. We simplified Alexa's understanding by removing camera-enabled features, added presence detection and focused our efforts on a streamlined, easy-to-read interface with no clutter or ads.
As the UI/UX Designer and Art Director (for certain features), I directed a team of designers (MXD, VUI, UI, UX, Illustration) to unify Alexa's visual language, presented key features and explorations to 15+ cross-functional teams, defined the UI and interaction design, and scaled the delivery of specifications.
The Echo Spot's vibrant display offers customizable options, including clock faces and color schemes, allowing you to personalize its appearance to match your style while managing daily tasks or listening to its high-quality audio. Seamlessly integrated into the Alexa ecosystem, the Echo Spot offers an intuitive interface design where you can view the time, weather, song titles, audiobooks, alarm clocks, or control your smart home device on the same home page, at a glance.
Results
The Echo Spot has been met with overwhelmingly positive feedback from customers, earning a 4.6 rating since its launch in July.
Visual Language
Adaptive Design System
Our IA, UX, and layout design are intuitively responsive to the user's presence and proximity. When viewed from a distance (far field), the display presents a glanceable interface with a category icon, larger headline size, and hidden touchable actions. As the user approaches (near field), the display prioritizes key information by reducing headline sizes, revealing visible CTAs, and emphasizing text.
Due to its smaller display compared to other devices, the Echo Spot focuses on essential "fan favorite" features like the alarm clock, speaker, and weather information. By simplifying the navigation and emphasizing the feel of each domain, we've created a more intuitive and user-friendly experience.
Color Customization
The Echo Spot's black background bleeds the rectangular display into its semicircular shape, eliminating the visible edges and creating the illusion of a larger display. As we narrowed down the color options, we factored in the display technology, night mode compatibility, and overall visual appeal. To ensure optimal legibility and contrast, we carefully selected six colors with similar values, intensities, and chromas. Yellow and red were excluded to avoid visibility issues in night mode. By offering customers a choice of customizable colors, we created a personalized and visually appealing experience that enhances their overall satisfaction.
2017
2024
Visual Identity
Departing from its 2017 predecessor, the 2024 Echo Spot prioritizes simplicity and functionality, focusing on essential features like the clock, weather, and alarm settings. In line with it's physical appearance, we introduced micro-animations, asymmetry, and flat, bold colors that align with the product's focus on providing essential information without overwhelming users. Animations add personality and visual interest, making it a memorable and enjoyable device.
Art Direction
Product Packaging
As a voice-forward speaker, the Echo Spot focuses on core features like music, weather, smart home control, and the clock. To highlight these core functionalities, I incorporated the weather clock into the packaging design. My decision to feature the weather clock was based on customer usage data and feedback, which identified weather information as a high-priority feature. In fact, due to the frequent use of weather and time-related commands by Alexa customers, we made the weather clock the default. This visually reinforces the Echo Spot's ability to provide essential information at a glance, meet user needs, and creates a cohesive brand experience.
Weather
As the UI/UX Designer and Art Director, I led a team of (MXD, UI, VUI, Illustration) designers to elevate the weather domain display. I introduced diagonal lines, asymmetry, color blocks, bold outlines, analogous colors, and micro-animations to create an engaging and informative experience.
To adapt 16 weather icons from 24 x 24 pixels to the Echo Spot's larger display, I redesigned the weather interface into two distinct screens. The primary screen prominently displays the current temperature and weather condition, while the secondary screen provides additional details such as wind speed, humidity, UV index, or in grandeur cases weather forecasts. There's also an expanded view of weather forecasts with concise details of upcoming conditions if you ask Alexa. This simplified structure ensures that users quickly and easily access the most relevant weather information.
Out-Of-Box-Experience
To streamline the onboarding process, I reduced the number of required actions from 40 to 5, making the setup process efficient and user-friendly.
I enhanced the QR code experience by animating it, using a distinctive blue color, removing a quadrant to align with the device's asymmetry, and adding organic curves to the corners. Rotating text strings based on common languages in the delivery country further improved accessibility.
These design choices eliminated user frustration and potential errors while making the setup process more engaging. Most notably, the playful line art reflects the setup stages (search, connect, update, and load) guiding users with visual feedback.
Smart Home
Smart home integration aligns with our overall design system, featuring a simple yet informative interface for managing connected devices. The screen prominently displays a primary title, secondary title, and button(s) for each device. I designed the layout and its visual confirmations for state changes, fonts, buttons, sliders, and error messages, providing users with immediate and glanceable control over individual or grouped devices like lights, plugs, switches, or thermostats. I increased the font size of the temperature display to increase legibility and accessibility, accounting for Fahrenheit, Celsius, decimals, and 4 digits.
“Simple, But Effective”
— PC Mag (2024)
“Good option if you want the benefits of a smart speaker and some basic visual information in your bedroom without the distractions of a large screen. “