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.

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).

The Portfolio Page

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.

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.

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.

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.

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.