Finance Bubbles: Real-time Stock Tracker via Google Search Results
OVERVIEW
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.
.png)
.png)
My Role
Leading UX Designer and UX Researcher
Worked cross-functionally in an agile environment with my team:
Project Timeline
My manager and Product Designer
Software Engineer Apprentice
Software Engineer
Jan 2022 - Jun 2023
Product Manager
Software Engineer
Software Engineer
Tools
Figma
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?
Constraints
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
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
Milennial
in a stable career making a steady income
MIKE
Wants to keep track of financial information in a timely matter
RESEARCH CONDUCTED
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
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.
Merger
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.
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.
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.
DESIGN EXPLORATIONS
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.
FINAL DESIGN OF THE BUBBLES
This is the regular state that will be launched. This state includes the most important information in a collapsed and expanded state.
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.
Redlines
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.
.png)
.png)
Dark Mode
I created a dark mode version of the original designs
.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.
Retrospectives
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