
Product Design Case Study: Robinhood iOS Mobile App
Product design, Mobile Design
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

- 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.
- It occupies too much space. When there is no new updates or users have already catched up with all the feeds, this part takes a large valuable space on the screen which also force users to spend effort on this area.
- It confused people which are new/old cards. Every time after users swipe to check all the cards and reopen the app again, the Feeds card is same with unchecked status. This makes users have illusions that they haven’t checked all the cards or there are new cards showing.
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.

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
- 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.
- Users haven’t finished checking out all the cards and go to another page. This case will be same with case 1.
- Feeds card is still open, but users close the app or the app goes to back end. Under this situation, the feeds card will be closed when reopen and it will treat as users never checked feeds card before. Thus, if auto-push settings on, then show cards directly, if not, show number again.
Prototype

Stock Order Redesign
Problems
- 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.
- Pending orders or queued orders influence users to place other orders. If users have placed stop orders and they want to sell stocks, usually it won’t have any indication until they enter the stock share number.

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.

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.

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.

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
- 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).
- For people who holds more than 20 stocks or has on watchlist, it is difficult to navigate to the stock they want quickly. For example, the watchlist is ordered by users themselves, so it’s not in alphabetical order, this may work for a relatively smaller group of stocks but not for a large number of stocks over 20 (more than 3 pages).
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.


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.

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.
