Aligning Yahoo Finance's Widgets to Material 3
Yahoo · 2022
My Role
Lead Product Designer
Company
Yahoo
Date
2022
Context
Widgets are one of the simplest ways to bring the app experience directly to the user, offering glanceable, real-time information right on their home screen. Our Android widgets, however, were visually outdated and didn’t align with Google’s Material You design system, which focuses on personalized, adaptive, and cohesive UI experiences. Beyond a visual update, we saw an opportunity to rethink widgets as a tool for delivering value, making them more interactive and useful in driving engagement.
Problem
The main challenges were twofold:
Outdated Design
Our Android widgets consistently received negative feedback, primarily due to their unintuitive nature and lack of functionality. Users frequently commented on the outdated design that failed to align with Android 12’s Material You design language. This misalignment not only created a visual disconnect but also failed to meet modern design expectations, leading to a diminished user experience and low engagement. The widgets didn’t take advantage of adaptive theming or responsive layouts, which are essential to creating cohesive and personalized interfaces on Android devices.
Limited Utility and Engagement
The widgets only displayed data for the current day, such as earnings events, which led to empty states when no events were scheduled. This narrow focus missed the opportunity to provide users with more value by showing upcoming events or rolling over relevant information to keep the widgets consistently useful and engaging.
To address these challenges, I led a cross-functional workshop with the entire Yahoo Finance native team, including iOS and Android engineers, as well as PMs.
Earlier versions of the Android Yahoo Finance widgets.
Solution
The original widgets featured outdated designs, with sharp corners and a lack of dynamic visuals, which felt disconnected from Android 12’s Material You principles. To address these issues, we focused on modernizing the widgets with more adaptive, glanceable, and engaging interactions.
The previous widgets had sharp edges that didn’t align with Material You’s 28dp rounded corner standard. We updated all widgets with softer, rounded edges that blends seamlessly with the rest of the Android ecosystem.
Refreshed widget designs with 28dp rounded corners, aligning with Material You for a smoother, modern look.
Improved Layouts
Before, widgets only displayed data for the current day, which meant they often became empty when no relevant information was available. This led to widgets feeling inconsistent and not always useful. We reworked them to be more context-aware, reducing empty states and ensuring they surface relevant, real-time updates whenever possible.
Dynamic Sizes
Users were stuck with fixed widget sizes that didn’t adapt to their home screen layouts. We introduced resizable widgets, allowing them to scale up or down while keeping content readable and useful. Regardless of size, key information stays accessible, making widgets more flexible for different user preferences.
Example of dynamic sizing for earnings and news widgets, allowing users to resize while maintaining readability and functionality across different layouts.
Dynamic Colors
Material 3’s dynamic color system personalizes apps by adapting to user preferences, choices, and needs. Yahoo Finance widgets leverage adaptive coloring, meaning they automatically adjust their color palettes based on the user’s wallpaper and system theme. This ensures a seamless, cohesive experience, allowing widgets to feel like a natural extension of the device UI rather than a separate app component.
The color schemes are algorithmically generated based on Material You’s tonal palettes, using Material semantics to ensure smooth and consistent application. By embracing adaptive coloring, we not only improved visual integration but also enhanced accessibility and personalization, making widgets more engaging for a diverse range of users.
Example of dynamic sizing for earnings and news widgets, allowing users to resize while maintaining readability and functionality across different layouts.
