A quick design teardown of the Coinbase home screen — and imagining what could come next.
Two weeks ago, cryptocurrencies like Bitcoin (BTC) and Ethereum (ETH) rocketed past their previous highs before tumbling back to earth a bit.
Edit: As of June 5, 2017, the total market cap of cryptocurrencies surpassed $100B for the first time ever. This new type of transactional currency is definitely picking up steam again.
Despite the volatility of these currencies, many people see an increasingly promising future for blockchain-based technologies — and that’s good news for cryptocurrency. If you’re still trying to grasp what this new type of money is all about, here’s a highly recommended, comprehensive piece on Medium that breaks it all down.
There are also many new companies like Coinbase who are making it easy to get into the market, even if you’re not an expert. There are stories of people who have made millions by buying in to Bitcoin very early on — but it’s worth noting that you should never play around with more than you can afford to lose in this highly volatile market.
Since making a small purchase of Bitcoin, I’ve been obsessively checking its price on the Coinbase app. As a designer, every time I open it I’m thinking about how I’d approach the challenge of getting people in on the exciting emergence of digital currency.
Coinbase’s Current App
Here’s a quick screen capture of the Coinbase app from not so long ago, just before Bitcoin prices exploded (and before Coinbase had support for Litecoin (LTC):
The best thing about the current setup is the way you can interact with the graph: by pressing and holding on it, a line appears and you can drag it back and forth to see the numbers associated with the chart at any given plot point.
But when I look at this screen at a very high level, it’s awash in blue and could be more exciting. I also find myself looking for the buy and sell buttons, which also seem to blend in with the other elements on the screen.
It’s easy to make a purchase, and I do find the user flow to be pretty straightforward; however, I wanted to see how I might be able to really elevate the information I’m looking for on the home screen, as well as how I can see how much my balance has changed in the section below.
Most of the wallets currently appear below the fold, and the information displayed shows the quantity of coins and the overall value of them, but not the change in price. This is by far the feature I wish Coinbase would include: I find myself punching in a calculator the amount of currency I have and doing some math based on my initial investment to manually calculate how much I’ve gained or lost at a given point.
To review, my goals were:
- Adjust the use of color to emphasize key information and action items on the page
- Emphasize actions like “buy” and “sell”
- Show how much each wallet has increased or decreased by over time
- Fit more information above the fold
Re-Imagining the Home Screen
Goal #1: Adjust the use of color to emphasize key information and action items on the page
I started by increasing the contrast between the background and the key elements on the screen. I kept the blue to stay consistent with Coinbase’s branding, but used it to really bring out the currency selected at the top, the graph, and the timeframe selected below.
Additionally, the darker background brought out the white text more, too. This was particularly important when I attempted to elevate the current price of the selected currency. On the existing version of the app, the current price is given equal weight to the change in price for the selected period of time. I moved that below as it seemed secondary when the current price is being used as the primary determining factor when the user is deciding to buy or sell currency. I also increased the size of the current price, as I believe that more than anything, that’s what people are looking for on this screen.
Goal #2: Emphasize actions like “buy” and “sell”
The next goal was to emphasize the buy and sell actions on the screen, and so I played around with a floating action button that toggles a menu of quick actions. I also included icons, along with a way for the user to send currency to a friend (which has the potential for a Venmo-like social component) and a help icon — if users had questions, I theorized this would likely be where they could emerge.
Goal # 3: Show how much each wallet has increased or decreased by over time and Goal #4: Fit more information above the fold
I For my last two design goals, I reorganized the information in the list of wallets at the bottom of the screen.
The new design on the graph at the top of the page took up less vertical space, too, and so more wallets now appeared above the fold. I also saved on space by adding the floating action button in the previous step.
By adding a column to the right side of each wallet, the user would now be able to see the net change in value of his or her wallet as it corresponds to the selected amount of time. This would allow the user to track his or her investment’s value more easily, without having to go to an external calculator.
Going Further
Even if you haven’t had a chance to cash in on cryptocurrency, it’s still very early in the evolution of this new kind of digital money. While most predictions suggest a long-term price gain for currency like Bitcoin, some in Silicon Valley even theorize a single unit could be worth $500,000 by 2030. I bought in on the suggestion: “buy some Bitcoin and forget about it.” If you’re looking to get in on the action, apps like Coinbase are a great way to get started.