Google's Finance app is in desperate need of attention. If you haven't checked in on it lately, it's still stuck with Gingerbread design. No seriously, go look. Tiny header bars, legacy menus, odd layouts, and assets that look tiny or pixelated (or both) on today's high resolution devices.

Just for fun, I decided to take a look at the app and see if I could give it a fresh coat of paint, inspired by material design. It's worth noting that, when the rest of Google's product icons were updated in its web launcher, Finance received a new icon too (the basis for the thumbnail of this post), so it's possible that Google really is working on a new design, but that's okay - I think exploring some ideas early is still worth while.


The concepts you'll see below will just be static mockups with some explanations. If I were to carry this to its full conclusion, motion design (a key ingredient in material design) would come later, once the basic tenets of the interface were stabilized.

That's one of the challenges about presenting any redesigns in a quick post like this one. As I plan on detailing in a later post, redesigning an app - or any product - especially as an outsider is a tough challenge. Inside the team that actually manages the product, there's knowledge of how it's used and specific nuances that can only be uncovered when one is "in the trenches" with the app, getting to know every corner of it from the inside out. These sorts of redesigns can open a can of worms all over the time and thought already spent creating the product.

Basically what I'm saying is that one should always take these sorts of redesigns for what they are.

That said, these kinds of concepts can be good conversation-starters. It's fun to do this sort of thing, and - when done thoughtfully - it can contribute to a broader conversation about the needs (old and new) of the product one is addressing.

Before we take a look at these concepts though, let's look at Finance as it exists today (viewed on the Nexus 6).

Screenshot_2014-11-12-23-08-45 Screenshot_2014-11-12-23-08-55 Screenshot_2014-11-12-23-09-20 Screenshot_2014-11-12-23-09-27 Screenshot_2014-11-12-23-09-32 Screenshot_2014-11-12-23-09-37 Screenshot_2014-11-12-23-09-10

Now, let's take a look at my proposals. First is the primary activity - the Markets screen. On this screen I've brought the typography and alignment into line with Google's guidelines, taking a few extra liberties to emphasize or deemphasize certain elements.

Eliminating the legacy menu leaves all its features homeless, so I distributed them in a way that made sense to me. Instead of a first-run dialog to choose an account when entering the app, I added a hamburger menu with Google's spec in mind, including the nifty new profile switching interface. Search has been moved up to the toolbar, and what were once tabs have been made entries in the side navigation, along with settings and help & feedback. Rather than including a discreet refresh button, I imagine the new swipe-to-refresh mechanism would be implemented, allowing for quick intuitive refreshes, though ideally the app would keep itself up to date behind the scenes.

Also note the up arrow across from "Market Summary." If the user didn't want to deal with the daily graph, the market summary could be collapsed. The graph's market colors (corresponding to the market list below it) have also been switched to their counterparts from the official material palettes.

finance_home-01 finance_home-02

Next is the individual market screen. This screen returns to tabs, allowing users the flexibility to see the market's activity across a range of time spans by swiping, rather than clicking links.

The same information that appears in the current finance app appears in a sheet that covers the bottom half of the page, with updated typography and continued use of color to emphasize what's important. Speaking of color, the individual market page - in this concept - would coordinate all relevant elements with the market's assigned color, seen on the main screen. In this case the red circle on the main page dictates the individual page's red highlights including the toolbar, graph, and "News" header.


Moving along, we have the "Portfolios" page. On this page, the first portfolio is highlighted and opened, while other portfolios remain collapsed. Which portfolio you're viewing determines the action of the FAB, which acts generally as a shortcut to the search bar, which will add stocks to your list. The current iteration of Google Finance shares one search bar that appears at the top of the screen for both searching and adding, and I think it makes sense to continue this paradigm. The FAB is more elegant than the current full-width "add ticker" button, and more visually appealing too.

The legacy menu for this screen had a "sort options" feature, which I've moved up to the toolbar.

Once the user hits a specific stock, we get a screen very similar to the individual market page. This would contain all the same types of information, laid out in much the same way. The X icon in the toolbar tells the user that we are inside another level of the app, on top of the previous screen, making navigation intuitive. Incidentally, this would be a good opportunity for a neat hamburger animation.

finance_home-04 finance_home-07 finance_home-05

Finally, we come to the Market News page. This is an interesting one, because it basically duplicates functionality you would get from using a dedicated category in Newsstand. That said, it's understandable that Finance users might want a quick, glance-able general news feed about the market, which is what this page is in the current app. My recommendation here (for now) would be to up-sell Newsstand with a dismissible tile, while providing a super-basic, stripped down news feed.

Of course, if Google wanted to pile another (albeit more specialized) source of news on top of Newsstand and News & Weather, more options could be added to this screen. But its only value right now is for non-specific market news offered without leaving the app. Portfolio and ticker-specific news is already offered elsewhere in the app (where it seems much more appropriate).


In the end, my proposals are just the initial stages of what a comprehensive redesign might look like. The shots above are the results of a fast-and-furious design session in which I sought only to bring a little order and sensibility to a dusty, neglected app. Whatever Google may have in store, we can only hope that it includes a comprehensive new design, and perhaps some more smart features to bring Google Finance up to the level it should be on. Hopefully we won't have long to wait before Google does update the app - assuming it plans to at all. As I said at the start of this post though, the new icon in Google's web launcher gives at least a little hope.