Published on <a href="https://blog.prototypr.io/i-decided-to-challenge-myself-by-redesigning-blockfolio-c5d0633abe20?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Glen Baku <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8OMIgMNId4RsEQ_hQdctFQ.png">The Redesign
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ah5LJOx4_ulbMGsbOFEHsg.png">Current Blockfolio design
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.
<h3>The Redesign</h3>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qj3plk6yRCk2mP-fTTEyBA.png">The basic design system, with the nested Sketch symbols (components).
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).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LwtTZq9Gm4ezJNpqI7E4cw.png">The tap bar
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YVl56RCKVf87VHaTb5-TbA.png">The Home Screen
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.
<a href="https://medium.com/@lloyd/sketch-symbols-best-practices-now-that-nested-overrides-are-a-thing-9b651d3fe1a4">Sketch symbols best practices (now that nested overrides are a thing)</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1vTZ2bX325Bkx33dSWb6Cg.png">The nested row symbol. Everything can be quickly overrided.
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).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*E7Fe_zLusgyB_yaf5hhoiw.png">The Portfolio Page
<h4>The Coin Page</h4>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4wczoRV0NUnDgcRlsoT4oA.png">The segmented navigation.
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2mfW5xyV5c2ONgOEZoexQw.png">Details and Holdings page
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.
<h4>Moving forward to animation</h4>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*GYlRxfMHM0u68N4rEI2XrA.gif">Transitions of the pages of the app, made on Origami Studio
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NkpXaybglnQ-D4PiYxjFgA.png">The animation patches on Origami
<h3>Conclusions</h3>
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 <a href="https://dribbble.com/shots/3672715-Cryptocurrency-Tracker">simple design of a crypto tracking app</a>, 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 <a href="https://www.dropbox.com/s/vxurehpuqq3up53/blockfolio_artboard.sketch?dl=0">here</a>.
That was it, thank you so much for reading!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c5d0633abe20" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/i-decided-to-challenge-myself-by-redesigning-blockfolio-c5d0633abe20">I decided to challenge myself by redesigning Blockfolio</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

I decided to challenge myself by redesigning Blockfolio

Top Stories