Wireframe for MySTOX

A Mobile Stock Market Portfolio Visualization App

(Originally written on September 16, 2013)

mySTOX is a stock portfolio app that I designed while sitting in the keynote of an Apple Worldwide Developer Conference (WWDC). I was talking with a friend about the possibility of Apple allowing widgets within the springboard (aka Home screen) of iOS 6, and I started sketching what I would like to have as a stock widget. Widgets never did get launched, for iOS 6 (or iOS 7), but I liked the sketch that I made so much that I built and released it as an app.

The main idea was to have an app that tracked my personal income — I didn’t want to see how well Apple was doing for Tim Cook — I wanted to see how well it did in relation to my position.

Instead of showing a full chart of how a stock performed over time, I wanted to see a one page summary showing my entire portfolio. Similar to sparklines (graphs that are drawn in a very small space), I wanted to represent each stock’s performance over the entire timespan that I owned shares in that stock.

There was a fixed line for the price of the stock when it was purchased (the stock price would then fluctuate above and below that line over time, which is represented by the position of the long gray bar). The top of the gray bar represents where the highest price of the stock (over the time it’s been owned by you), and the bottom of the bar is positioned at the lowest price (percentage-wise). The green line represents where the stock price is as of today’s date.

The purpose of this somewhat complex chart is that, once someone understands and can read it at a glance, it would be very easy to see the results of your portfolio (and how you are doing compared to the entire time you’ve owned each stock). It can either validate your trust and investment, or show you where you’ve completely misjudged the market. Without knowing anything about the names of the stocks or their values, you could still — at a glance — tell which stock is doing well, and which is performing poorly.

I then designed the above one screen wireframe, to show how this would work in an app interface. There were two tabs so the entire portfolio could be sorted from profitable to unprofitable, or vice-versa. Swiping gestures would be used to delete a single stock (swiping down) or scrolling through the portfolio. There was also placement for an ad (for an ad-supported version) as well as a scrolling ticker similar to stock ticker — except the pricing and percentages were going to be calculated based on your current position (not the overall market).