top of page
portfolio gif.gif

Finance Bubbles: Real-time Stock Tracker via Google Search Results


Finance Bubbles: An Android feature to track stock prices in real time 

 Finance Bubbles is a mobile feature on Android where users can pin a stock on their phone, and the bubble will overlay on top of any applications to track stock prices in real-time. Once you pin the bubble, a collapsed bubble will show the price, percentage change, and ticker and when you press on it, it becomes an expanded bubble.
Modeled after the previous feature for sports
This idea was modeled after another feature called sports bubbles, where users can track the score of a sports game. My task was to create a similar feature but for Google Finance.
Frame 691289 (1).png
sport bubble (1).png
My Role
First day at the office .jpeg
Leading UX Designer and UX Researcher
Worked cross-functionally in an agile environment with my team:
Project Timeline
 My manager and Product Designer
joseph shaw.png
Software Engineer Apprentice
 Software Engineer 

Jan 2022 - Jun 2023

 Product Manager 
Security Photo eg.jpeg
 Software Engineer

 Software Engineer 



Problem Statement: How might we make real-time stock tracking easier for Mike?

Mike is an experienced investor who wants to be able to monitor certain stocks he cares about. Staying up to date with the latest price changes can require lots of constant app switching and delays for apps to load or refresh, interrupting his current flow and causing some FOMO / anxiety.

Goal: Real-time Stock Updates 

Mike would like to receive timely information about how an event might affect a stock or be able to follow a volatile stock. How about we remove friction so Mike can easily update stock prices in real-time?


It was a tight deadline since the engineering apprentice was also simultaneously coding the bubble. There was also limited space since all the content had to fit within the confines of an Android phone.

Success Metrics
  • Number of users that pin a finance bubble
  • Number of finance bubbles pinned / user
  • Number of users that use the bubble to navigate to the immersive 
UX Design Process
Frame 6986.png
Mike is a user persona based on previous research 
Medium to high income
has spare income to spend
Experienced Investor
knows how to invest in the market
in a stable career making a steady income


Wants to keep track of financial information in a timely matter
Background Research

Research Goal: to find out the motivations of investors when using a feature like Finance Bubbles.

I interviewed 5 Google internal employees on the Google Finance team to better understand their investing habits to figure out how finance bubbles can be used to help them make investing decisions. 

Participants and Quotes

MP photo.jpeg

if I want to buy Microsoft stock, I  might not do it immediately. I might kind of sit on that thought and if there's a day or the whole Market goes down, like to 3%, that might be a good day for me to get into it.

 Product Manager at Google Finance 


It's just looking at my performance and against some sort of Benchmark to see. Like, am I doing well against how the overall markets are performing? Do I have a good amount of risk and exposure, what's my allocations?

Product Manager at Google Finance


I'm curious about how the S&P 500 is doing as a proxy for how my overall Investments are doing. And again if it goes up significantly or goes down significantly. I'm just curious why? And I'll look up relevant news. 

Product Manager at Google Finance

Research Insights

Research uncovered motivations relevant to finance users that can be solved by this feature
Buy low and sell high
When an investor wants to buy low and sell high they follow a stock to find a good time to buy, when the market is down
Earnings Call
When an investor sees and earnings call coming, they are motivated to follow a stock more closely.
Initial Public Offering
An investor may want to keep track of how an IPO will affect a stock price.
Volatile Stock Market
An investor may want to follow a volatile stock or market.
An investor may want to keep track of a merger that is announced.
Day Trading
An investor may want to keep track of a stock in order to make profit on the same day.
Content Matrix
I did a content matrix in order to understand what important information should be inside a collapsed or expanded bubble under various states.
Screen Shot 2022-12-19 at 2.33.52 PM.png

Explore Mike's User Journey

Scenario: Mike is an advanced investor who currently follows Google stock. I decided to do this exercise in order to empathize with the user and understand the user flow.

Slide One (1).png
Usability Test

The second round of research was a café study done at a café at Google. The goal was to test any usability issues with the prototype. The user journey for the prototype was a user getting notified of an earnings call; the user would click the earnings call, which would take the user to the Google search result page. I proctored the research while taking extensive notes.

Prototype tested
Research Insights showed problems with discoverability and confirmed background research
  • On a scale from 1 to 5, on average, participants rated the feature as a 4.5.

  •  The “pin the stock” button was not discoverable. Only one participant was able to discover the button without being prompted.

  • The participants felt that the feature was situational for specific events such as an earnings call, IPO, tracking a volatile stock, and a company merger.

  • I also realized that the earnings call information was not discoverable either. 

  • We tested a call-out and noticed that many of the participants missed it. This is typical for callouts.

Group 4507.png
Group 4504.png
Group 4511.png
Group 4510.png
Group 4512.png
Group 4513.png
Frame 4417.png
Market bubble.png

I made several iterations of the collapsed and the expanded bubble. For the collapsed bubble, I figured that the most important information was the ticker, percentage change, and price, so I explored different placements, fonts, colors, and iconography.  I also explored adding a sparkline so that users can have an understanding of how the stock is performing.


I created banners for the collapsed state that will notify the user when there is an upcoming earnings call and also when the earning call is released.


I made sure that the user knew about earnings calls in the expanded state as well.


This is the regular state that will be launched. This state includes the most important information in a collapsed and expanded state.

MVP Final.png

For the expanded bubble, I explored different variations on adding news to the expanded state. Added news in a carousel because according to the background research, users enjoyed discovering the performance of the stock in context by having the news on a carousel. This version is not the MVP version.

Frame 6985.png
After Hours final.png
I created redlines. Redlines is a method that designers use to label the exact padding, fonts, size, and color of every element to hand off to engineering.
Frame 5132.png
Frame 5130 (1).png
Group 1676 (1).png
Dark Mode
I created a dark mode version of the original designs
Dark Mode (1).png
What did I learn?
  • At the beginning of this project, I had difficulty learning what to design/ iterate due to a lack of knowing the user and their motivations. I believe creating a user story and doing background research helped me better understand my users' pain points. 

  • It was great that I also had sports bubbles as a reference to see how to design the error state.

  • Learned to collaborate with cross-functional teams, the eng, and pm across multiple timezones.


If I were to start this project all over again, I think I would spend more time exploring different variations of the collapsed bubble and the expanded bubble.

Next Steps
  • Test out the design internally and get some metrics. This feature will be launched to the public soon

bottom of page