top of page

Finance Bubbles

portfolio gif.gif
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 be able 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. 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
My Role
First day at the office .jpeg
Lead UX Designer and UX Researcher
Team
JP.jpeg
 My manager and Product Designer
joseph shaw.png
Software Engineer Apprentice
sport bubble (1).png
Project Timeline
batu.jpeg
 Software Engineer 
MHOP.jpeg
 Product Manager 
kgreg.jpeg
Security Photo eg.jpeg
 Software Engineer

 Software Engineer 

Jan 2022 - present

PROBLEM STATEMENT

Mike is an experienced investor who wants to be able to monitor certain stocks he cares about  but 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 & causing some FOMO / anxiety.

GOAL

Mike would like to receive timely information about how an event might affect a stock or be able to follow a volatile stock. How might we remove any friction so that Mike can be easily updated 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 andriod phone.

MY UX DESIGN PROCESS
Frame 6986.png
TARGET USERS
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
Wants to keep track of financial information in a timely matter

MIKE

RESEARCH CONDUCTED
Background Research

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

I interviewed 5 Googlers 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 

shoaib.jpeg

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

MHOP.jpeg

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 to keep track of a merger that is announced causes a company to go up or down.
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 of 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
andrew-neel-cckf4TsHAuw-unsplash.jpg

The second round of research was a cafe study done at a cafe 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 and while taking extensive notes.

Prototype tested
Research Insights
  • 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
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 were  ticker, percentage change and price so I explored different placements, fonts, colors and iconography.  I also explored adding in a sparkline so that users can have an understanding of how the stock is performing.

FINAL DESIGN OF THE  BUBBLES

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

MVP Final.png

For the expanded bubble, I explored different variation 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
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.
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 a difficult time 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 have a better understanding of the pain points of my users. 

  • It was great that I also had sport bubbles as a reference to see how I could 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've spent more time exploring different variations of the collapsed bubble and the expanded bubble.

How we'll measure success
  • 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 

Next Steps
  • Apply for a learning experiment in order to test out the design and get some metrics.

Link to slide deck

bottom of page