I’ve been investing a lot of my attention to the cryptocurrency scene lately, and one of the apps that has helped me do this is Blockfolio. I’ve been experimenting with this app for quite some time now, doing imaginary investments to see how it would ‘feel’ to invest in crypto, checking the prices of coins and reading news about it.
Blockfolio has some great functionalities, but it lacks design. I actually hate to use apps that don’t have good design. I did an exception to this one, but after some time I really wanted to do something about it. I decided to challenge myself by redesigning it visually and also redesigning the experience. Also, I finally decided to give a shot at creating interactions and animations, so in the end you’ll also see my first try at making kick-ass transitions.
I’m not related to any way to Blockfolio except for being an user, this is just a project I made to challenge myself and mostly for fun.
The Redesign
For the visual aspect of the application, I decided to use the existing color palette and also I decided to use the San Francisco typeface (the default iOS Typeface). I’m a big fan of the black/white palette, even though in the original design it’s really inconsistent. This is a thing I tried to fix in my redesign.
I use Sketch for design, and of course I make a lot of use of the Symbols feature. As soon as I started, I set up the basic design system with the components I would need to create this design.
One of the major problems with the blockfolio interface is the navigation structure. You have everything crammed up top, to the navigation bar — from the ‘portfolio graph’ button to the ‘news’ and ‘Add Transaction’ button.
I decided to replace it with a simple, straight forward, iOS tap bar. The tap bar doesn’t feature labels for the icons, as I presume users can get familiar quickly with the icons (Portfolio, Alerts, News and Settings).
On the home screen (the list of coins), I decided to merge the navigation bar with the ‘portfolio value’ and ‘change’ headings. This creates a more minimal and decluttered interface and also gives more contrast (and visibility) to the headings.
For the table of coins, I designed a minimal header (eliminating the dark gray header of the original design), to put more focus to the list of coins below. As for the list of coins, using nested symbols, I created a really flexible ‘coin row’ symbol, with toggleable alert icon, ‘price change’ color and icon and also logo ratio. This makes prototyping extra fast. Below is a really valuable resource for Sketch nested symbols.
Moving to the ‘Portfolio’ page, the main focus is of course the graph. I redesigned it completely so it could fit the design style of the entire app, to increase consistency. I also changed the design of the timeframe selector (and used the same in the coin page which you’ll see below).
The Coin Page
I feel like this is one of the most important pages of the app, if not the most important, and I put some special focus to it. The first change I made was turning the hideous sub-navigation of the original design to the default iOS segmented control component, customized with the app’s color palette.
Moving below, I repositioned the Exchange selector to the navigation bar, and below I reused the timeframe selector component. Then I centered and put more focus to the coin price.
A difficult process was the redesign of the graph (even though it’s still similar). The changes were made to make it consistent to the ‘Portfolio’ graph.
As for the values on the bottom, I reused the layout of the original design but tweaked the sizes to make it more consistent.
Changing tabs above, the last screen that I designed is the holdings page. Again, I put the important values directly in the navigation bar, and below it I created the transaction card. I used symbols for this again, making design extra fast. I decided to use a carded layout instead of the simple list because the cards put more focus and importance to the individual transaction. Same could be done for the coins list, even though I went for a simple list there.
Moving forward to animation
I know I am late to the party, but this is the first time I have actually animated one of my design. Even though this one got only the page transitions animated, I’m still really proud that I managed to create this.
I used Origami Studio, as I found it a lot more intuitive and easy to use, at least for what I needed. Even though it got really crowded with all the patches, it was still usable and easy to use.
Conclusions
With what I did I actually managed to push myself creatively by redesigning an application I use a lot. Back in July I did a simple design of a crypto tracking app, and with this redesign I managed to put push myself more onto the design aspect of the cryptocurrency scene.
I also managed to animate and create transitions for the first time, and this definitely won’t be the last time. I designed only four pages I deemed important, but I think I will push myself even more to redesign even more pages of this application.
To conclude, I would like to share with you the Sketch source files, because I think some of you would love to use those as reference. You can download them here.
That was it, thank you so much for reading!
