I am building a crypto portfolio manager and I have the following goals with respect to my UX

  1. Messenger Themed colors as it will run as a webview inside Messenger
  2. I want to display gains or loses, the coin, its price, the amount of coins the user has (holdings) and the value of the user's holdings. I am not sure what would be the best way to display this UX on a messenger webview and made 7 screens. The dark blue area on all the screens is for actually adding the visual chart. Screens 1 & 3 are my efforts to highlight gains and losses with different colors.
  3. Which color from screens 1-3 represent the right UX for the user to perceive gains and losses and are compatible with the Messenger blue scheme at the same time.
  4. Screens 4-7 are my efforts to showcase coins, price, quantity (holdings) and value in addition to gains. Should I go for maximum number of columns here or should I go for dual rows?
  5. Any opinion on which screen has the right UX here is highly appreciated.

Screen 1

I tried adding green and red colors here to indicate gains and losses but it doesn't match with the messenger blue theme in my opinion. enter image description here

Screen 2

As an alternative, I added light gray and dark gray colors to represent gains and losses but it doesn't give a consistent UX. I assume bright colors are linked with user psychology to evaluate gains and losses enter image description here Screen 3

I switched green with the Messenger blue theme and I am not sure if this is against conventional behavior where user associates green with gains enter image description here Screen 4

I kept Price as a separate column to show price of each coin but I dont display holdings or price x quantity enter image description here Screen 5

I tried displaying all pieces of information in 5 columns but this is where it gets a little tricky. Are there too many columns in this table with respect to mobile UX? enter image description here Screen 6

In an attempt to reduce the number of columns, I came up with the idea of dual rows and show cased only holdings or price x quantity held by the user currently enter image description here Screen 7

Based on a suggestion, I tried showcasing price and holdings in dual rows enter image description here

Thank you for your time reading this question

1 Answer 1


The attempt to match the gain/loss to an overall "blue" color scheme is going to be confusing and harder for the user to quickly glance to see which holdings are going well vs. losing money. 99.999% of web sites, etc. use green and red for this, and even with a "+" or "-" if the text is not green or red, the users will be frustrated. So trying to match a color scheme by forcing a negative amount to be some shade of blue is just not a good idea.

You should also right-align numeric columns with fixed formatting (same number of decimal places) so it is easier to visually see relative amounts -- for example, Screen 5, the Holdings it is not obvious the user has a lot of XRP, even though it appears to be sorted by that column.

  • thank you for your response! I will go with green and red in that case as it seems even grey would be a bad idea, what do you think about the second part? does it need multiple columns or multiple rows in your opinion
    – PirateApp
    Nov 15, 2017 at 10:26
  • 1
    Multiple rows for a particular Coin is harder to see what data applies to which row; unless you have a visible grid, similar to Excel grid. Nov 16, 2017 at 20:43
  • thank you so much for the response! i will redo the layouts and hopefully that goes well
    – PirateApp
    Nov 17, 2017 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.