Stock Market App
Overview
I was asked to create a web or mobile app screen that enables a customer to visualize how well their investment portfolio is performing, including gains and losses.
The primary focus of the project would be visual design, information design and interaction design. This was a design challenge for an interview at Deliverr.com
Role
UI, Information Architecture
Timeframe
1 week
Deliverables
1 High Fidelity Screen, Mood Board, Style Tile
Tools Figma
Research & Discovery
Who is the user? The brief was broad and non specific so I took the liberty of deciding that user to give myself a starting point. There are individual traders, professional day traders, swing traders, passive and active traders. In the interest of time I decided I would be designing for the user base I had the most access to - the individual trader. I interviewed 5 men and women in the cities of Chicago, SF and NYC.
The User demographic
Metropolitan working professionals managing their own personal portfolios on the go.
Once I knew who the user was I had some initial questions for them. This would help me plan my own Information Architecture as well as decide whether mobile or web was the way to go. It also familiarized me with the domain of stock markets.
Questions & Assumptions
Based on my assumption of who the user was, the questions I had were
What would the user want to see? What information is most important for them to see when they check their stocks in addition to gains and losses?
What tools do they currently use?
Do they check stock usually on their phones or desktop?
From these questions I got a sense of what the competition was and what platforms were most commonly used. I decided to zone in on four of the most popular ones used to gain an overall understanding of what was needed on this screen which as users indicated, should be a mobile app.
Learning from Competitors
I looked at Robinhood, TD Ameritrade, Yahoo Finance and Personal Capital. From analyzing and comparing displays, I validated the information I got from users about what information they wanted to see.
I came up with the following list in order of importance
Total stock portfolio
Gains or losses in a day, both the amount and percentage
Allocations ($ and %)
Performance history: 1d, 5d, ytd
Current stock market Dow, Nasdaq, etc.
Design & Concept
I drew two rough sketches with two different layout options, option A and B.
Because the most important information to be displayed was the total portfolio, that number would be the largest followed by total gain or loss underneath. Next would be the allocation. Under allocation would be performance history displayed as a graph.
Here is where I gave two options
A Table Format
Display
Total portfolio list display
Total gain or loss
Allocation
Graph of performance history
B Pie Chart pie chart.
Display
Total portfolio pie chart display
Total gain or loss
Allocation
Expandable graph of performance history
Because option B took real estate with a pie chart, I made the performance history graph for option B expandable so the user didn’t have to scroll beyond the fold and can see the stock market overview below upon landing on the first screen. After some thought I came to the hypothesis that having the most important information available upon first landing on the screen was more important than a pie chart visual.
Validating Hypothesis with Users
I verified this information with my users and four out of five agreed that although a pie chart is nice, it doesn’t really do much to convey information visually as the difference between 5% and 10% would be barely noticeable on a pie. I went with option A.
Next I had to organize the bottom navigation. This meant thinking through all the uses of this app even though I was only designing one screen. I decided to do a rough site map
Main functions of the app were for the user to
Get a quick snapshot of their portfolio at first glance
Buy or sell
Keep track of stocks they are watching
See state of other investment funds they may have.
I wanted to keep the bottom navigation minimal with little clutter so decided to place “my account” and “search” on the top navigation.
Other UI Elements to Consider
Mood
I started gathering images inspired by words that described my users: metropolitan, urban, professionals, sophisticated. Because this was a finance app involving lots of different numbers, I wanted to keep all other elements as simple and minimalistic as possible. I started with black & white Images and built a color palette from there.
Color
The competition used a standard red and green to show losses and gains respectively. I stuck with that standard and chose a palette that accented the clean black and white theme but was different enough from the indicator colors.
Font
I went with something simple - Lato which is a popular font across multiple platforms these days as well as the default font for Deliverr. Since Deliverr also used Montserrat as the pairing and this design challenge was for Deliverr, I felt it was appropriate to do the same.
Mood
Style Tile
Given this was a stock market app, I thought it made sense to create a dark mode color palette according to Material Guidelines.
Final Design
The user lands on home where right away they see their total investment portfolio amount in the largest font. Right underneath they can see the day change gain or loss which can be switched to week or month with the drop down on the right.
The second card is the allocation of their portfolio in order from largest investment to smallest with both amount and percentage of gains or losses. The first five are displayed with option to expand to see the rest of the allocations.
The third card is a graph that shows their performance history compared with the market of their choice: US, Asia or Europe. They can view the history as daily, monthly or yearly all the way to the max amount of over five years.
Below the fold are breakdowns of the most active, top gainers and top losers as well as other markets including bonds and currencies. Tapping on the -/+ percentage bar on the right takes them to details for that particular stock. They can then add these to their “watch” lists which is located in the bottom navigation as the eye icon.