Improving the onboarding experience with motion and imagery
Robinhood simplifies what could be a complex onboarding experience by coaxing users through a series of streamlined, animated transitions. Each prompt contains a card with uniform white illustrations set against a bright green background—creating a subtle and optimistic play on the color of money. Robinhood’s creative director Zane Bevan believes streamlining the visual design has helped simplify the app’s complex capabilities.
We leverage bold colors and typography to create visual hierarchy within the app, which focuses the user’s attention and reduces confusion.Zane Bevan, Creative Director, Robinhood
Additionally, touch ripples help boost confidence, especially when people are asked to share confidential, personal information; a low-profile progress bar lets people know that information is being processed without getting in the way.
Using color to convey critical changes
Stock prices can fluctuate in a minute, and keeping users informed of the impact on their portfolio is critical to building trust. Color is a great way to visualize the trending price of stocks, allowing users to understand at a glance if the price has gone up or down. If the overall portfolio of stocks is performing well, the UI is a light green graph on a green background. Individual stock performance is also represented by a change from green to red, depending on how the price is tracking. A full-flood background color lets users know when the markets are open or closed—after trading hours, the background shifts from white to a dusky grey.
With this elegant system, the user can launch the app and glimpse the health and activity of the Stock Market without reading a single word.Zane Bevan, Creative Director, Robinhood
Increasing discoverability with cards
Cards are used for news updates and labeled with green badges to indicate the quantity of unread stories or messages. Users can easily dismiss cards with a simple swipe left.
More importantly, cards are used to represent each stock in a person’s portfolio. This allows users to organize related information easily. When pressed, the cards animate and transition to fill the screen from their point of origin. The value of the stock is represented by a large number and a graph, both of which animate when the stock value changes.
Stocks that are of interest to the user can be followed, unfollowed, and added to a person’s “Watchlist” for tracking and potential purchase. The search function uses reveal animation and autocomplete to make it easier for users to find more companies to add to their “Watchlist”. Finally, a snackbar informs users when a stock has been added or removed from their list.
Card Patterns have been extremely helpful for grouping information. They allow us to give our users small amounts of information upfront but the opportunity to dive deeper should they want to.Zane Bevan, Creative Director, Robinhood
Getting positive feedback and engaging with users
The feedback from Robinhood’s users has been fantastic with a 4.65 average rating and well over 9,000 reviews. The design team thinks material design has played a huge role in making this possible: “Material design has been a very positive factor in their [users] app experience. We hear time and time again that our design is clean, easy to use, and beautiful to look at.” It’s this attention to detail and visual design that the Google Play team cited in their 2016 awards ceremony, proving Robinhood’s redesign is gold standard.