UX + UI
Enhancing Financial Insights with X-Ray Pills
X-Ray Pills were an innovative feature on Yahoo.com, offering users quick access to financially relevant information within articles. Designed to benefit both seasoned and new finance users, the feature allowed seamless access to related tickers and deeper company data through a single click.
Collaborating across Yahoo's design teams, the Yahoo Finance team conducted two rounds of user testing to understand the unique needs of diverse user groups. Insights were synthesized to refine and optimize the feature, ensuring an enhanced experience for all users.
Company
Yahoo Finance
Timeline
1 Month
Role
Product Designer
Services
Design System + UX/UI
The Challenge
The challenge was to create an intuitive financial information layer that provided contextual data without disrupting the reading experience, serving both experienced investors and casual readers while integrating seamlessly within Yahoo's content ecosystem.
User-Centered Approach
01.
Content Reorganization
Categorized content into X-Ray and Finance components
Established clear information hierarchy
Created a streamlined visual structure
Analyzed technical implementation requirements
02.
User Testing
Conducted two rounds of comprehensive testing
Gathered insights from diverse user groups
Identified key interaction patterns
Applied findings to feature refinements
03.
Cross-Team Collaboration
Partnered with multiple Yahoo design teams
Aligned with Yahoo's broader design language
Facilitated cross-team knowledge sharing
Developed shared component specifications
04.
Interface Refinement
Enhanced X-Ray interface components
Implemented swipe-down exit gesture
Created non-intrusive content overlay
Balanced information density with clarity
Content Reorganization
In collaboration with our developers, we delved into the technical intricacies of content grouping, discerning the necessity to categorize content into X-Ray and Finance components.
This insight significantly shaped our design approach, culminating in a more streamlined and visually cohesive user experience.
User Testing
User-testing to understand what Finance users and Non-Finance users would benefit most from.
X-Ray Components
Leveraging the Yahoo Finance Design System
Using Yahoo’s design system, we seamlessly integrated X-Ray with pre-built components, ensuring consistency, accessibility, and faster development.
-
![]()
Y! Finance DSM Setup
-
![]()
Colors
-
![]()
Typography
-
![]()
Type Colors
-
![]()
Grids
-
![]()
Spacing
-
![]()
Cards
-
![]()
Symbols
-
![]()
Sketch Files Setup
-
![]()
Component Set Up
-
![]()
iOS Widgets
35%
increase in user engagement with Yahoo articles, driven by the new X-ray module.
