iOS + ANDROID

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

Yahoo Finance X-Ray Screens Animation
Yahoo logo with a white graph line and green trend arrow on a purple background.

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.

Gradient background transitioning from purple to blue.

User-Centered Approach

01.

Content Reorganization

Categorized content into X-Ray and Finance components, defined hierarchy, and built a streamlined structure aligned with requirements.

02.

User Testing

Ran two rounds of testing with diverse users, uncovering key interaction patterns and applying insights to refine the feature.

03.

Cross-Team Collaboration

Partnered with Yahoo design teams to align with the broader design language, share knowledge, and define shared component specifications.

04.

Interface Refinement

Enhanced X-Ray interface components with a swipe-down gesture, subtle overlay, and balanced information density for clarity.

Yahoo Finance logo in purple text on a black background.
Yahoo Finance X-Ray Pills on News
Yahoo Finance X-Ray Experience

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.

Yahoo X-Ray Content Modules
Green circle icon with text 'X-Ray Module'
Screenshot of a Yahoo Finance Module icon

User Testing

User-testing to understand what Finance users and Non-Finance users would benefit most from.

X-Ray Components

  • A graphic comparing stock tickers with their abbreviations and percentage changes, showing some in green for positive change and others in red for negative change. Includes a paragraph explaining the concept of ticker pills.
  • A webpage showing two Yahoo Finance stock charts over five days, both indicating a rising stock price, with a side paragraph explaining feature removals from an original chart for quick snapshot access.
  • Screenshot of a user flow explaining the 'Follow' button function on a website, including options to follow, add to watchlist, and notifications, with associated labels and informational messages.
  • A slide from a presentation showing related companies in the stock market. The slide displays 'Related Companies' with a description, and two groups of stock info: one labeled 'Related' with ABC and GOOGL showing stock prices and changes, and the second with spark lines illustrating stock performance.
  • Screenshot of a webpage with a news section titled 'New Stream'. The left side has text explaining users' interest in related news stories. The right side lists recent news articles about Verizon 5G expansion, with titles, times, and images of Verizon 5G devices and logos.
  • A webpage explaining the benefits of a Premium account, with sections showing investment ideas and research reports, including sample data such as bullish and bearish signals and report summaries, with blue buttons to view more ideas and reports.

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.

Yahoo Finance logo in purple text on a black background.
Yahoo Finance X-Ray
  • Diagram illustrating the structure of a system, with categories like Projects, Finance Native, and Native Components, along with subcategories and icons.

    Y! Finance DSM Setup

  • A color palette chart with four categories: Core Brand colors in purple, pink, red, and green; Grey Scale in black, dark gray, and gray; and Data Visualization colors in orange, green, and blue, each with their respective hex codes.

    Colors

  • Comparison of a webpage layout with different color themes: light and dark. Both sides contain identical text with headings such as Display, Title, Large Header, Medium Header, Small Header, Section Header, Large Value, Small Value, Large Body, Small Body, Meta, arranged vertically.

    Typography

  • A color palette chart titled 'Type Colors' showing six color swatches with labels and hex codes, arranged in three rows and two columns. The left side displays descriptive text about setting up type styles.

    Type Colors

  • Screenshot of a presentation slide about grid layouts with a section titled 'Grids' on the left and a sample grid on the right, featuring pink, green, and black text.

    Grids

  • A presentation slide with a title 'Spacing' on the left and a paragraph explaining the importance of spacing in card design. On the right, a chart illustrates different spacing blocks labeled from 'Space 01' to 'Space 10' with corresponding pixel values, and the chart includes a label indicating it is adaptable for 'MOBILE' and 'DESKTOP' screens.

    Spacing

  • A digital dashboard display showing social media posts, reports, and multimedia cards in a minimalistic layout with text and thumbnail images, including a news video and a financial report summary.

    Cards

  • Stock market dashboard displaying various stock symbols, their share prices, and percentage changes, along with a line graph showing stock performance trends.

    Symbols

  • Sketch files displayed on mobile devices showing financial app interfaces with stock market data, account balances, and navigation icons.

    Sketch Files Setup

  • Comparison of two mobile app screens. The first screen shows a wireframe layout with labeled sections: Carousel, Single card, Card row, Big Story. The second and third screens display Yahoo Finance app interfaces with trending tickers, upcoming earnings, popular watchlists, and top stories, with navigation icons at the bottom.

    Component Set Up

  • An infographic describing iOS widgets with two phone mockups displaying financial and performance data, alongside a description of Native Design Library allowing direct component pulling.

    iOS Widgets

35%

increase in user engagement with Yahoo articles, driven by the new X-ray module.

elektra creative © | design bento box

Ready to transform your product vision into reality?

Book a Call