This case study follows an atypical structure and goes into four individual changes to one feature on the apps as an experiment to optimize it.
Optimizing the Quote Summary Page
Yahoo · 2021 - 2023
My Role
Lead Product Designer
Company
Yahoo
Date
Ongoing from 2021 until 2023
Overview
The Quote Summary Page (QSP) is the primary touchpoint for users evaluating investment opportunities on Yahoo Finance. While the native apps team launched a brand-new QSP experience in late 2020, it became clear after a few months that there were opportunities for improvement.
This project involved a series of incremental changes and experiments between June 2021 and December 2022.
The experiments focused on the following themes:
Helping users easily find and remember the location of critical tools and data within the quote page, reducing mental effort required to navigate the page.
Making the tools more valuable to less experienced investors, enhancing their understanding to increase their overall value of the apps.
Improving how investors research and discover from the quote page.
The Quote Summary Page consisted of two main tabs, the Summary and Details tab.
Experiment 01
Reducing cognitive load in the header
The current quote page header design is a cluttered experience, which affects users' ability to quickly discover and engage with essential information about a ticker. This can hinder the user journey, particularly for investors looking to make swift, informed decisions.
By simplifying the content above the fold, we can better highlight key data points, reduce clutter, and improve the overall user experience.
Goals
Reduce Cognitive Load: Streamline the header area to present key data points more clearly, improving user experience by making it easier for investors to quickly identify crucial information.
Enhance Engagement: Drive user engagement by reducing distractions and introducing mechanisms of discovery to further their research and analysis.
Maintain Ad Space Integrity: Ensure any design changes respect the vertical height constraints to preserve existing advertising placement.
An audit of our prev. header design, comparing our header to competitors, in addition to some areas of opportunities.
Explorations
The content above the fold is arguably the most important part of the user experience. While our goal was to declutter, we did also want to find ways to incorporate other data points that will enhance transparency and relevance for investors, such as the company logo (if present), delayed quote indicator, industry and security type.
The nav bar
Before considering the different components we wanted to introduce (i.e., the logo, the status of the market, and industry/sector), I started off my explorations focusing on the nav bar part of the UI (aka what’s been highlighted here).
As you can see, there are four key action items: search, favorite, price alert, and share. While each is essential, I saw opportunities to maximize the available real estate. By streamlining this area, we can not only create more space for additional data but also ensure these actions remain accessible as users scroll, enhancing both clarity and functionality.
By shifting the company name and the stock exchange to the left, we can make room for 4 additional icons on the right. However, this wasn't so simple as in many cases company names can be more than 8 characters.
Since company names can vary significantly in length, using the ticker ensures a consistent and streamlined appearance, as tickers are typically 1-5 characters long.
By swapping the symbol name and the company name, the predictable character range allows us to maintain a clean and organized navigation bar without needing truncation. We can apply the same concept to the Exchange.
The Search Interaction
The Search icon was the only action unrelated to the ticker itself, where it took you to a search screen prompting you to browse another stock. This flow creates a minor disconnect with common UX patterns, where actions that navigate away from the current view are typically positioned on the left. Or actions on the right in this scenario, meant a search happening within the context of the specific page.
It seemed logical enough to place the search icon on the left, indicating an exit action. However, having both a back button, and a search button side by side is a bit unconventional and confusing. To address this, I looked at exploring ways to combine the search icon with the ticker.
Mimicking a familiar functionality of a search bar, the design is meant to signal the active stock being viewed (on the quote page), while clearly indicating that users can initiate a new search directly.
Clearly indicating the quotes state, security and industry
Quote States
In the previous design, there were subtle visual cues to indicate whether a stock was at the current market or in post/pre-market, shown through the design variations. However, the design lacked a clear way to inform users when a quote was showing delayed data.
By implementing headers that indicate current market states, users can quickly identify the current state of the ticker that they are looking at. These expand initially when a user enters the Quote page, providing immediate visibility and context. These then collapse to conserve space and reduce screen clutter.
Security and Industry
Adding industry and security type to the UI provides instant context, allowing users to quickly identify what type of asset they're viewing and assess its relevance to their investment strategy. I explored different ways to showcase this, from non interactive to interactive tags. Opting for this approach:
By introducing interactive tags, users can continue browsing and discovering more of similar tickers by tapping the pill to do so.
Final header designs
After running a bucket test to measure performance of these changes, we saw an increased level of engagement with users taking action on the QSP more often (X.X% on iOS, and XX.XX% on Android). We also say an increase of number of users who visit another QSP after visiting the first one.
Experiment 02
Improving user recall
By running an analysis on the engagement of the two tabs on the quote page, we saw a consistent trend whereby engagement decreased significantly as modules were placed further down the page.
We believed that the structure of the two tabs did not support easy recall, making it harder for users to find the information they need efficiently. By understanding how users naturally categorize and prioritize financial data, we can reorganize the modules to enhance recall, navigation and overall user engagement.
Low on the page = low engagement
By running an analysis on the engagement of the two tabs on the quote page, we saw a consistent trend whereby engagement decreased significantly as modules were placed further down the page.
We believed that the structure of the two tabs did not support easy recall, making it harder for users to find the information they need efficiently. By understanding how users naturally categorize and prioritize financial data, we can reorganize the modules to enhance recall, navigation and overall user engagement.
Some of the few cards that are on the Quote Summary Page, across the two tabs.
Card sorting exercise
We conducted a card sorting exercise with 15 participants to identify the most intuitive way to structure content.
First, participants identified labels by either choosing among a predefined list or creating a name of their own.
Next, they identified where their labels would be positioned.
Finally, participants rearranged the modules within each tab reflecting the order they would expect to see them in.
Participants rearranged modules within their selected tabs, reflecting the order they would expect
This matrix was used to analyze participant feedback on how they prioritized key modules across tabs
From the results we saw that:
Participants frequently used "Overview" and "Summary" interchangeably as the primary tab.
Nearly all participants prioritized an Analysis tab, placing in-depth modules such as Research Reports, Analysis, and Holders here.
While many participants supported a distinct "Financials" tab, others felt it could be integrated with the "Analysis" tab due to overlapping content.
Some of the few cards that are on the Quote Summary Page, across the two tabs.
An optimized navigation structure
We explored two navigation structures: one with more than four tabs and another using a single scroll with anchor points. Both options led to excessive tab-switching, which impacted user experience. Based on research and intuition, we streamlined the content into three tabs—Overview, Analysis, and Financials—by reorganizing modules under their respective categories. This navigation structure was designed to reduce cognitive load and enhance content recall.
Through this change, we saw a life in virtually all our quote page engagement metric, which validated our core hypothesis.
Experiment 03
Increasing value for novice users
Finance and investment concepts can be overwhelming for novice users. While Yahoo Finance offers a wealth of tools to help analyze investment opportunities, these tools may lose value if users don’t understand how to use them effectively.
Our second hypothesis for the Quote Page experience was that less experienced investors navigating the Quote Summary Page might struggle with understanding or applying the financial tools provided, resulting in lower engagement.
To address this, we aimed to provide users with an entry point to understand key data points and charts. This approach would help enhance their financial literacy, allowing them to interpret the numbers they encounter and analyze opportunities more effectively.
Our goal was to create an experience where users could seamlessly analyze quotes by understanding key terms and charts directly within the app, without the need to leave. Instead of having users leave the app to search for definitions on external platforms like Investopedia or Google, embedding these resources into the platform would minimize disruption.
An example of the interaction when tapping on a specific terms or the card itself to access detailed definitions and explanations.
The entry points exist within cards across the quote page, as well on individual terms themselves. If there are terms within the same context, we provide an experience that allows them to continue to scroll through terms and definitions, encouraging continuous learning. As they scroll, they can easily explore how different metrics connect and influence stock performance, all within a smooth, uninterrupted flow.
After running a bucket test on this experience, we saw a 6.5% lift in high value actions on the quote page, in addition to an increase in users sharing QSPs.
Experiment 04
Increasing value for social investors
While the QSP provides rich data, it lacks a way for users to share opinions. Adding sentiment reactions enhances engagement and gives social and fundamental investors valuable insights into how others view stock performance.
This will aim to not just increase engagement generally, but to add value to 68% of our fundamental traders, where a portion of those who are social investors, will find value in social sentiment information to see how others’ are evaluating how tickers are performing, ultimately supporting their investment decisions.
The flow to understanding existing community sentiment looks like this.
Although a conversations board exists and lets users gauge others' sentiments about a ticker, it lacks a quick, summarized view of overall opinion trends and requires users to post a comment before seeing others' thoughts.
Instead of requiring users to add a comment for every opinion they wanted to share about a stock or investment opportunity, we could decrease the friction by making their contribution as seamless as possible (via one-tap-reaction).
Sentiment voting pills encouraging users to quickly express their opinion on a ticker—bullish, bearish, or neutral.
The design explores ways for users’ to quickly express their sentiment on a ticker: bullish, bearish, or neutral. Each option is styled as a button, inviting users to select their sentiment with a single tap.
Once a user selects their sentiment, their choice is highlighted in purple, and the sentiment distribution percentages is displayed across all users. This allows users to immediately see how their sentiment aligns with the broader community.
Votes remain valid for 31 days before automatically resetting, ensuring that the sentiment data stays fresh and reflective of current opinions.
Initially, we considered embedding it within the conversations section to provide sentiment feedback as part of user discussions. However, after a quick A/B test we saw significantly higher engagement when positioning it closer to the top.
We conducted a one-month test with a 25% bucket size (approx. 620,000 users) and observed significant increases in QSP engagement metrics, validating our hypothesis that a social feature encourages deeper user engagement.
Overall results
Improved user recall
Simplified navigation and streamlined content organization significantly reduced cognitive load, making it easier for users to find and recall essential tools and data on the page.
Increasing value for novice users
Enhanced educational resources and contextual explanations helped less experienced investors better understand and utilize financial tools, leading to increased engagement and satisfaction.
Enhancing discovery and research
Optimized information flow and engagement mechanisms improved users’ ability to discover, analyze, and act on investment opportunities, supporting more informed decision-making.