Product Design Case Study: Robinhood iOS Mobile App

Product design, Mobile Design

Tianjie Li
Aug 22, 2017 · 8 min read

I started using Robinhood mobile app to purchase stocks at the end of this June and it’s been 2 month already. I used Robinhood everyday at least one hour to trade stocks, track stock price and read related news. I also use other app like StockCharts (web app) StockTracker (mobile app) and some other financial news apps at the same time. After 2 month of using the app, I have some user experience feedback and hypothesis on the design of Robinhood and want to do a case study here. This may not be a better design comparing with what Robinhood has for now and I also know the limitation of my research (the sampling is too small) and stock knowledge may downgrade my insights and ideas. However, please just treat this as a UX practice.

Research

Based on my own usage experience, I found some problems and had three hypotheses: (1) browsing stock watchlist, (2) having limit/stop orders, (3) home page design. Thus, I conduct a simple survey and put it on stock forum and Facebook to collect some answers help me confirm my hypothesis.

Results and insights

1.Most of the users who answered my questionnaire are quite young and new to stock market (85.7% under 30 and in stock market less than 3 years).

My target users for this case study might be young people who has less experience in stock market.

2.Most of the users have less than 15 stocks on hold but more than 15 stocks on their watchlist (85.7%)

This shows that if the users are on their mobile phone, then under most of the time they have to scroll at least 3 pages to browse all the stocks.

3.All of the users claim that they placed limit/buy orders before and would track and change the price of limit/buy orders. Among those users, 71.4% of them do this quite often.

From this result, we can see that, the target group of users are very likely to place limit/buy order and have a high demand of tracking those orders.

Feeds Card Redesign

Problem

Current Robinhood iOS mobile app main page
  1. It is not following the right interface logic structure. The home screen of Robinhood includes 5 parts: (1) Top menu bar, (2) Portfolio value and chart, (3) Feeds card, (4) Purchased stocks and (5) Watchlist. We can see (1) and (3) are global while (2), (4) and (5) are related with users only. Visually it may look good to have (1), (2) and (3) together to fit into one whole screen, but from the logic side, it is wired that feeds card divided other parts. *Feeds card is global because it contains not only updates from purchased stock or watchlist but also other related news and info, such as stock price change rankings and system notifications.

Design Solution

Move Feeds card on to the top and have a button on menu bar to trigger it. This not only moves the Feeds card to the global level where it suppose to be, but also save the space when it is unnecessary to show.

This page shows the case when there is no new cards.

Turn on/off the automatically pushed feeds. By default the auto push is on and when users firstly swipe to check out all the cards, there will be a statement appear and give users instruction to turn on/off under Settings. Feeds card closes everytime when users check out all the cards.

After users have once checked out all the cards, feeds card icon will show no numbers. When feeds card is open, icon shows the cards number. When closed, indicating new cards if there is number (notification off).

Corner Case

  1. When users are swiping, there are new cards available. The numbers will increase and new cards will be load at the end of the cards order. When next time open it, it will be in time order again.

Prototype

Feeds card animation

Stock Order Redesign

Problems

  1. Pending orders or queued orders are too hidden. After users placed limit or stop orders, they can only check those orders in history or inside one stock’s detail info page (under orders) which is very hidden and forgettable.
Current where pending orders are at

Design Solution

Offer a pending order indicator on home screen. If users have ever placed a limit or stop order, it will appear on the stock list as a green circle indicator to remind the users that they have pending orders which can be happened all the times. Users can click to check the details of the orders.

If the user has placed a stop loss order to sell all the shares then the sell button will become unavailable unless the user cancels the stop sell order.

When one of the orders gets executed, it will go to the page bottom part in the history as a happened order.

Pending orders indicator and pending order redesign

If users did a limit order on a not purchased stock, then this stock will appear nolonger on the watchlist, instead it will be moved to purchased stock section with the order indicator, better for users to track. After the order is canceled or expired, this stock will go back to the watchlist where it initially was from. The stock will become a normal purchased stock when the order gets executed.

User placed a limit order on a not purchased stock

When users decide to check details of one stock and want to edit the pending order, they can tap on Edit button and revise the shares or price directly. After submitting the edit, it will automatically cancel the old order and place a new order for the users. If at any point during the edit process, the users exit editing, then nothing will be changed from the previous order.

Edit a pending order

Corner Case

When the users placed 3 or more than 3 orders on one stock, then on the stock page it will show 2 and half of all the orders. Users can scroll to view them, thus the first screen will still include pending orders, stock price and chart, and Buy/Sell buttons.

Stock List Redesign

Problems

  1. Users can’t easily know how each stock affects the whole portfolio behavior on main page. On main page, users can only see the whole portfolio performance, but it is very hard to know how each stock contributes to that. Especially when users purchased at a very low price (still red but gaining) or purchased at a very high price (still green but losing).

Design Solution

Instead of offering last price, percentage change and equity, I propose to change the third data into today’s return. The reason is because equity is easy to know from 2 other data on the stock list page, last price and purchased shares. However, today’s return which is one of the most important data that users really care about is hard to know from the main page (need to remember purchased price and calculate price difference). In the screens below, users can see although Netflix is on red, but he may purchased at a very low price, thus he’s still gaining 134.5 dollars.

Today’s return show gaining in green and losing in red which won’t be influenced by stock price movement
Watchlist sort feature

If a user has added over 20 stock, then it might be very hard for them to manage and track each of them. Thus, I provided a sort function on the top right for them to sort the stocks they have by customized order, alphabetical order, added time order or price percentage change order.

When users scroll to check their watchlist and it reaches the top, it will replace the top menu bar to indicate users are viewing all the watchlist stocks at this moment. If users scroll down again, it will transit to a whole list again. If users click back button on top left, it will go back to the home page and reset the position to top.

Watchlist interaction redesign

Prototype

Reflections

I believe there is a gap between my research and design, for instance, I need to conduct some usability study to verify the users answers and the survey seems a bit simple without any validation questions. If, in the future, there is another opportunity to keep working on this project, I would definitely spend more time in research and usability testing area.

)

    Tianjie Li

    Written by

    Designer with stories :-)

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade