Yahoo Finance X-Ray
X-Ray Pills were an innovative feature implemented into articles on yahoo.com. They provided both new and seasoned finance users with a quick way to discover financially relevant information related to the articles they were reading.
Introduction
Overview
As an iOS designer within the Yahoo Finance team, collaboration was key as we closely collaborated with all design teams across Yahoo for this endeavor.
Our primary objective was to enhance the user experience by enabling users to seamlessly access related tickers within articles. By clicking on a ticker, users could then delve into additional financial information about the corresponding company.
We conducted two rounds of user testing to gain insights into the needs of both seasoned Finance users and newcomers. This exploration aimed to discern the distinct preferences and requirements of Finance users compared to non-Finance users.
We synthesized the valuable insights and feedback garnered from the user tests to refine our designs. Through this iterative process, we leveraged existing data and feedback to optimize the experience for both user demographics.
Our Team
Mobile UX Design
User Research
Yahoo Team Designers
Product
User Testing Prototype
User-testing to understand what Finance users and Non-Finance users would benefit most from.
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.
X-Ray Components
Side by Side Comparison
Enhancing the aesthetic and functionality of the X-Ray interface involves refining its components. Instead of monopolizing the entire article, users can now simply swipe down to exit the X-Ray screen, facilitating seamless return to their reading.
The X-Ray Experience
Y! Finance Design System
-
![]()
Y! Finance DSM Setup
-
![]()
Colors
-
![]()
Typography
-
![]()
Type Colors
-
![]()
Grids
-
![]()
Spacing
-
![]()
Cards
-
![]()
Symbols
-
![]()
Sketch Files Setup
-
![]()
Component Set Up
-
![]()
iOS Widgets
