TIMELINE
Sept - Dec 2023
10 weeks
ROLE
Product Designer
TEAM
2 Product Designers
SKILLS
Market Research, Usability Testing, Wireframing, Prototyping, Figma
CONTEXT
As my first design project switching into UX design from pre-med, I worked with another new member in Design Consulting at Cornell, a student-run human-centered design consultancy, to design a 2-in-1 education-based finance app to boost college students' confidence and knowledge in investing and savings. I led market research on investing and visual designs of the investing process, stock portfolio, and profile.
💭 HAVE YOU EVER BEEN ...
On the verge of clicking “Create Account” on an investing platform, only to SIKE yourself out because you DON’T actually know HOW to invest??
Don’t worry. I’ve been there too.
...
INTRODUCING A GLIMPSE OF FINANCE FROG
The investing app made FOR college students (+ anyone who wants to start their investing journey!)
01 | Lessons
Users can learn the basics of investing — from what it is to a guided in-app tutorial, explore key terms, and access external resources for deeper insights through fun, bite-sized modules and short quizzes.



02 | Invest
Users can buy and sell 60+ stocks and ETFs, view their key stats and trends, open a high-yield savings account (SoFi), and Roth IRA (Robinhood) — all within the app.
03 | Portfolio
Users can track their investments, manage their list of saved stocks and ETFs, access their external accounts, and view term definitions at all times.
REFLECTIONS
Besides having to learn the ins and outs of investing (and the jargon that comes with it), I also was able to learn that ...
Usability testing is key.
Usability testing gave key insights into the final features of our designs that were originally confusing to the user and helped create a more intuitive and seamless end product that actually addressed our users’ needs.
I enjoy making components.
This was my first time using Figma and learning how to create components, but it was actually such a fun process that also streamlined standardizing our designs and has piqued my interest in design systems.
Let’s start at the beginning!
...








INITIAL BRAINSTORM
How might we design a product that streamlines the investing process and allows college students to feel more informed about investing?
We engaged in a Crazy Eights brainstorming session, drawing from user personas to identify our top four app features:
Gamified Learning
College Tips
AI Learner Curator
Interactive Courses
We then evaluated them based on impact and feasibility to narrow down our focus to two of the features:
🌟 Gamified Learning + 🌟 Interactive Courses.
Gamified Learning
🌟
Tips for College Students
AI Learner Curator
Interactive Courses
🌟
High Impact
High Feasibility
Low Feasibility
Low Impact
MARKET RESEARCH
What does the current market offer?
To clearly define our market value, we analyzed competitors to understand the digital finance and education landscape and identify which design trends to adopt and avoid.
Additionally, I conducted in-depth research on investment types, stock analysis, and investing app features to ensure our product aligns with industry standards and provides accurate information.




To Follow
✅ Bite-sized modules
✅ Gamified / social aspect
✅ Personalized learning
To Avoid
❌ Content unrelated to
college students
❌ Influencer opinions
✋🏼
PAUSE
At this stage, my partner and I decided to each lead a side to design: she chose the educational side while I chose the investing side.
BACK TO TOP
VALIDATING OUR PROBLEM SPACE
Why is it so difficult to take the first step toward investing?
Despite wanting to invest, we both found it difficult to actually take that first step especially as college students because we don’t have spare money laying around and lack knowledge on the complex investing terms.
To gather a more holistic view on how other college students feel, we conducted 4 user interviews and learned about their attitudes towards investing and financial goals.
These were our 4 main insights:
Limited knowledge of investing.
“Current investing books and online resources seem to be tailored towards working adults, not college students so it’s difficult to apply the tips to my own life...”
— Ellie, Cornell Undergraduate
Too busy & spends too much money.
“I’ve been wanting to invest, but I’m too busy as a college student. Plus, I spend too much money on Uber eats...”
— Marcus, Cornell Undergraduate
Thinks investing is important.
“In the future, I aspire to be financially independent and sustain a comfortable lifestyle in the city where I can let my money work for me instead of strictly converting hours to dollars!”
— Sam, Cornell Undergraduate
Weary of the risk.
“If I were to start investing, I’d prefer to be more risk-adverse because losing money with riskier investments is an avoidable outcome.”
— Justin, Cornell Undergraduate
These insights led us to create two user personas to inform our initial brainstorming process.
Entrepreneurial Investor
Immediate Earnings
·
High Risk
·
Low Financial Literacy

Esther Wang
Freshman @ Cornell University | 18
🍽️
Enjoys eating out with her friends
🛍️
Wants to sustain her college lifestyle
👨👩👧
Parents believe investing is too risky
Retirement Planner
Gradual Earnings
·
Low Risk
·
Medium Financial Literacy

Noah Williams
Senior @ Cornell University | 21
🧑🏾💻
Spends most of his time applying to jobs
💰
Wants to build generational wealth for his future family
📝
Wants to financially prepare for his post-grad life
INITIAL IDEATIONS
Investment Portfolio
View your net gains dashboard and browse through safe investments (ex. high-yield savings, government bonds, CDs) and risky investments (ex. stocks, ETFs) to add to your list.

EXPLORATIONS + ITERATIONS
🚨 ALERT! ‘Portfolio’ and ‘Invest’ have become two separate screens.
Based on feedback from our user tests to reduce information overload on the landing screen, we decided to split the ‘Investment Portfolio’ into:
💼 Portfolio: allows users to VIEW their invested stocks and accounts and MANAGE their list of saved stocks
💰 Invest: allows users to BROWSE stocks to buy/sell and OPEN new accounts
After implementing this design decision, we explored a few more iterations:

+

How to Read Stock Charts: Learn The Basics
Open price, market cap, P/E ratio, dividend yield, 52-week high/low
What is this?
Open Price: The price of the stock open for trading on that given day.
High Today: The highest price that the stock was traded at on that day.
Low Today: The lowest price that the stock was traded at on that day.
Market Cap: The cost to buy the entire company at the current price.
AUM: Stands for ‘Assets Under Management’ which is the total market value of the investments managed by a person or entity on behalf of investors.
P/E Ratio: Looks at where the stock price trades relative to the underlying company’s annual earnings. This is a popular metric that helps investors determine whether a stock is appropriately valued.
Volume: The number of shares that have been traded in a given day.
52 Week High: The highest prices the stock has traded for in the past year.
52 Week Low: The lowest prices the stock has traded for in the past year.
What are the
‘Buy Order Types’?
There are 5 options:
Limit Order (default)
Stop Loss Order
Stop Limit Order
Trailing Stop Order
Recurring Investment
Limit Order: A stock is purchased at your limit price or lower. Your limit price should be the maximum price you want to pay per share.
Stop Loss Order: A stop price is set above the current price of the stock and when the stock rises to your stop price, your buy stop order becomes a buy market order.
Stop Limit Order: A combination of a Limit Order and Stop Loss Order.
Trailing Stop Order: The stop price follows the lowest price of a stock by a trail that you set. If the stock rises above its lowest price by the trail or more, it triggers a buy market order and is executed at the best price currently available.
Recurring Investment: Automatic payment depending on what amount and for what date is set.
*Click here for more examples of each order type
How to Buy a Stock
Limit order, stop orders, recurring investments

How to Sell Stock: A 3-Step Guide for Beginners
Market order, limit order, stop orders
What are the
‘Sell Order Types’?
There are 4 options:
Market Order (default)
Limit Order
Stop Loss Order
Stop Limit Order
Market Order: Quick execution is preferred over price specificity. You’re willing to accept the next available price and a certain price isn’t guaranteed.
Limit Order: A stock is sold at your limit price or higher. Your limit price should be the minimum price you want to receive per share.
Stop Loss Order: A stop price is set below the current price of the stock and when the stock falls to your stop price, your sell stop order becomes a sell market order.
Stop Limit Order: A combination of a Limit Order and Stop Loss Order.
*Click here for more examples of each order type
What is a ‘Stock’?
Represents how much of a company, that you invested in, you own.
What is an ‘ETF’?
Stands for ‘Exchange-Traded Funds’ which are a basket of multiple stocks or other securities to let you invest in the broader market or a sector, industry, or even region. ETFs allow you to invest in a group of companies all at once.
Investing in a Stock, Bond, ETF, or Mutual Fund
Stocks: individual, more risky
ETFs: group of stocks, less risky


What Is a High Yield Savings Account?
Higher interest rates, good for short term goals, ideal emergency fund
What is a Roth IRA?
Retirement account, initial deposit is taxed but grows tax-free, withdraw after 59.5 years of age
What are ‘Accounts’?
High Yield Savings Account: offers higher interest rates (APY) than normal savings accounts and is an option to grow your money risk-free.
*Click here for more information
Roth IRA: an individual retirement account where the initial deposit is taxed but once inside the account, it grows tax-free and can be withdrawn tax-free after 59.5 years of age with the account open for at least 5 years.
*Click here for more information
BRINGING THE DESIGNS TO LIFE
Design System + Components
We designed FinanceFrog’s visual system to blend the professionalism of finance with the playful charm of an encouraging frog companion. The palette consists of a deep, dark turquoise paired with a lighter sage green to signal positive net gains, while subtly reinforcing the frog motif. For negative net gains, we introduced a dark red and soft pink, both consistent with stock market color conventions and optimized for color-blind accessibility. The clean, modern Inter sans-serif typeface ensures clarity and readability, keeping information front and center without distracting from the app’s inviting personality.
Aa
Inter
Typography
Assets & Components
Colors
Font
#2096A1
#A5CDBD
#E94C69
#ECB6C0
Accent Colors
#EBDD92
#000000
#6C757D
#CED4DA
#FFFFFF
Grey Scale
Heading 1
40pt
Heading 2
24pt
Body text 1
18pt
Body text 2
12pt
Nav Bar
Header

Logos


Information Pop Ups
Stock Cards
$price/share
+$3.00 today
ABBREV
Details

$price/share
-$3.00 today
ABBREV
Details

AMZN

$138.54/share
SPDR S&P 500
$436.27/share
Stock List
$price
Name (ABBREV)
$price
Name (ABBREV)
$price
+
Name (ABBREV)
$price
-
Name (ABBREV)
$price
+
Name (ABBREV)
$price
-
Name (ABBREV)
Transactions


Stock Graphs
DAILY
WEEKLY
MONTHLY
YEARLY
LIFETIME
Icons
1
1
Buttons
Button
Button
Goal
Goal
Button
Button
Goal
Goal
Button
Button
Goal
Goal
Button
Button
Goal
Goal
Lesson
Lesson
Quiz
Quiz
Quiz
Game Markers

Lesson Markers
1
2
1
1
Vocab Cards
vocab
n. definition
Progress Bars
Sign Up Inputs
Default
*********
Default
Default
What is this?
Explanation etc etc etc etc etc etc etc etc
Badge Details
Badge 1
This is a description of Badge 1. It is an amazing achievement - good job!
Badge 1
This is a description of Badge 1. It is an amazing achievement - good job!
Badge 1
This is a description of Badge 1. It is an amazing achievement - good job!
Share
Selectable Answer Buttons
Answer
Answer
Answer
Answer
Answer Feedback Pop Ups
Correct answer!
Wrong answer!

Correct! Explanation

Incorrect! Explanation
Badges
Badge
Badge
Badge
FINAL REVISIONS
3-tab layout with fewer buttons on the ‘Invest’ screen

Placed the ‘Buy’ and ‘Sell’ options in one place


INTRODUCING FINANCE FROG
01 | Sign Up
Users can create an account (or log in) to begin their new investing + education journey by securely linking their banking information and setting their financial goals to stay accountable and motivated.



02 | Lessons
Users can learn the basics of investing — from what it is to a guided in-app tutorial, explore key terms, and access external resources for deeper insights through fun, bite-sized modules and short quizzes.
03 | Invest
Users can buy and sell 60+ stocks and ETFs, view their key stats and trends, open a high-yield savings account (SoFi), and Roth IRA (Robinhood) — all within the app.

04 | Portfolio
Users can track their investments, manage their list of saved stocks and ETFs, access their external accounts, and view term definitions at all times.

05 | Profile
Users can easily view their total earnings and transaction history, monitor lifetime growth, manage funds and financial goals, and adjust settings — all in one convenient place.
...
NEXT STEPS
If I was to continue designing Finance Frog...
Although this was a new member education project that concluded with a presentation to our club members, I identified areas for further improvement that I wished we could have achieved during our project timeline.
1
Conduct Additional Rounds of User Testing
On our final designs with beginner investors to evaluate the usability of the app’s features in real time.
2
Create an In-House High-Yield Savings + Roth IRA
To make it convenient for first time investors to have everything all in one app.
3
Re-Design the Profile Page
By taking more time to fully flesh out the visual layout of the dashboard and history transactions.