<p>Published on <a href="http://ift.tt/2r6mzcC">| Prototyping: From UX to Front End &mdash; Medium</a> Will Yoshimura <img alt="" src="http://ift.tt/2rQAv7L"></p>
<h4>Robinhood feature concept</h4>
<p>With multiple design awards on display, it’s no secret that Robinhood’s design team is a core contributor to their success. As a daily active user I am often thrilled with their tasteful refined user interface. In the past, I’ve benefited from comparing financial assets on other platforms. So as a personal challenge, I’ve augmented Robinhood’s ironclad design with the possibility of analyzing two different stocks.</p>
<h4><strong>Discovering the problem</strong></h4>
<p><img alt="" src="http://ift.tt/2r65vDO">Existing flow for comparing two stocks.</p>
<p>I often find myself checking to see if my investment portfolio is beating the market. For example, I may search for “SPY” (an ETF that mimics the S&amp;P 500), then scrub back to the day I started investing (June 14). This lets me see the percent change from past to present — which I mentally note. Finally, I navigate to the home screen to manually compare my portfolio against SPY.</p>
<p>After doing this a few times, I thought, “I wish there were fewer steps.” So as an exercise, I set out to design some sort of compare functionality.</p>
<h4><strong>Researching competitors</strong></h4>
<p><img alt="" src="http://ift.tt/2rQvZX3">From left to right: ClosingBell, Stock Master, Yahoo Finance.</p>
<p>I studied how stock comparing functionality is implemented in different apps and around the web. Based on popularity, Yahoo Finance, by popularity, is the primary example. But despite the app’s popularity their compare solution is simply not that elegant.</p>
<h4><strong>Starting out</strong></h4>
<p>I started with <a href="http://ift.tt/2r6oYnF">some sketches</a> and initially made the assumption of comparing the S&amp;P 500 to my portfolio on the home screen. Realizing this could be discouraging, as most of us are unlikely to beat the S&amp;P 500, I sought subtler solutions.</p>
<h4>Understanding behavior</h4>
<p>The main two stock comparison scenarios I discovered were:</p>
<ol>
<li><em>A person is currently viewing Stock A and wants to compare it with Stock B</em></li>
<li><em>A person populates an empty view to compare Stock A, Stock B, Stock C, etc.</em></li>
</ol>
<h4>Exploring ideas</h4>
<p>With these user scenarios in mind, I began testing ideas. Some ended up in the idea graveyard, while others showed potential.</p>
<p><img alt="" src="http://ift.tt/2rQcpdt">From left to right: landscape approach, pull-down overlay, dedicated compare.</p>
<p><strong>Landscape approach (didn’t work)—</strong>One might think of the landscape view as a natural approach. After all, the additional horizontal space allows people to see their stock curve with more granularity. Additionally, the physical gesture of tilting your phone would be fun and unique. However, I ultimately discovered that a vertical layout to be superior to a horizontal layout. It would be difficult to justify the use of a landscape view only for this compare tool when the rest of the app is vertically oriented.</p>
<p><strong>Pull-down overlay (didn’t work) — </strong>One friend suggested having this as an overlay that pulled down on top. I wasn’t too keen on that because it adds another perceived “layer” which may not be necessary.</p>
<p><strong>Dedicated compare (has potential to explore)— </strong>Another idea was having a dedicated compare screen in the app. This would adopt the idea of bringing stocks to compare, as opposed to bringing compare to stocks. A downside here is that it would mean breaking Robinhood’s color palette.</p>
<p><strong>Integrated compare (my solution) — </strong>Ultimately, I saw the compare functionality as a feature that exists inside the current viewing, purchasing, buying, and selling experience.</p>
<h4>Identifying the entry point</h4>
<p>Robinhood’s design team doesn’t leave a lot of room to tamper with the UI. So I ran into trouble looking for a logical place to add this feature.</p>
<p><img alt="" src="http://ift.tt/2r6wsr0"></p>
<p>To me, buying and selling feel more like “primary” actions, whereas following and unfollowing feel more like “secondary” actions. As an action, compare is between a primary and a secondary actions but is arguably much closer to primary. <strong>On realizing this, I decided to place compare on the same horizontal plane as buy and sell. But since this action seems less primary, I placed it off to the side.</strong></p>
<h4>Putting it together</h4>
<p><strong><em>Compare search—</em></strong>The next logical step in this process was to include search function to allow users to pick a stock for comparison purposes. This was an opportunity to leverage an existing feature.</p>
<p><strong><em>Compare stock selected state—</em></strong>Upon picking a stock to compare, the search window will collapse. The screen then reveals the original stock with the new stock overlaid on to the UI. This screen will also reassure the user that both the original stock and the compared stock are there. Additionally, there will be a way to clear out the compared stock and re-enter into compare search.</p>
<p><strong><em>Scrubbing—</em></strong>The behavior here is similar to the existing scrubbing functionality. The main difference is the two stocks will be represented (with percentages) at the top — instead of just one stock.</p>
<p><img alt="" src="http://ift.tt/2rQw25b"></p>
<h4>Prototyping</h4>
<p>To get a better sense of how the interactions <em>feel</em>, I often prototype my work. This exercise was the perfect opportunity to try Origami Studio, which had recently been recommended to me. I’ve used Framer in the past, so the transition to Origami was fairly smooth because many of the principles are similar. The Origami prototype gave me finely tuned control over the interactions.</p>
<p><img alt="" src="http://ift.tt/2r6GPuL"></p>
<h4>Testing it out</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FDmSU9TYlIOQ%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DDmSU9TYlIOQ&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FDmSU9TYlIOQ%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2rQm6IQ">http://ift.tt/2rQm6IQ</a></iframe></p>
<h4>Discoverability</h4>
<p>I was initially concerned that this feature would be difficult to find. But since this is more of a power-user feature, I believe that in-product education is sufficient enough. The following are a few of the methods I developed.</p>
<p><strong>Button bounce over—</strong>This was the first thing I thought of. The “button bounce” is regularly used to help indicate any sort of horizontal scrolling functionality. It’s also effective in adding a little life to the app.</p>
<p><img alt="" src="http://ift.tt/2r6kwWj"></p>
<p><strong>News cards—</strong>Robinhood uses personalized cards to promote upsells like Robinhood Gold. I believe new features, like compare, could exist in this area as well.</p>
<p><img alt="" src="http://ift.tt/2rQyYi5"></p>
<p><strong>Is it Gold? — </strong>This could help solve discoverability issues for the feature. People who take advantage of Robinhood Gold do so for access to advanced features and are often hyperaware of their existence. Perhaps bundling compare with Robinhood Gold could incentivize users to upgrade.</p>
<h4>A different approach</h4>
<p><strong>Compare to S&amp;P 500 toggle in settings—</strong>I thought it would be interesting to take a super-simplified approach to comparing. I also noticed one <a href="http://ift.tt/2r6nDNP">Reddit</a> user was interested in such a feature. So I quickly mocked up some screens.</p>
<p><img alt="" src="http://ift.tt/2rQRBTe"></p>
<h4>Conclusion</h4>
<p>I thoroughly enjoyed this exercise because it was quite challenging to add a feature to a near-flawless product. I gained experience prototyping in Origami. I’m far from a master prototyper, but I’m further ahead than where I started.</p>
<p>I encourage other designers or non-designers reading this to try a similar exercise. Pick a well-refined app, then try to add a value-providing feature without disrupting the app’s ecosystem. Feel free to comment below with your awesome solution.</p>
<p>Special thanks to <a href="http://ift.tt/2qfsnhV">Melvin Gruesbeck</a> for his help editing this article.</p>
<blockquote><p><strong>Will Yoshimura</strong></p></blockquote>
<blockquote><p><em>Designer<br /></em><a href="https://twitter.com/willy0sh">Twitter</a> | <a href="http://ift.tt/2rQdKAN">LinkedIn</a> | <a href="mailto:willyosh@gmail.com">Email</a></p></blockquote>
<p><img src="http://ift.tt/2r6DJXJ" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2rQvuMH">Compare: Adding a featherlight feature to Robinhood</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Compare: Adding a featherlight feature to Robinhood

Robinhood feature concept

Top Stories