Design ideas

[bonomat]

Below are some ideas, not all of them have to be actioned now or exactly how to proposed.

[bonomat]

Pre-start

Add splash screen / loading screen

[bonomat]

Them color

Change orange to something softer. Maybe blue?

[bonomat]

Dashboard

Balance

• Play around with the balances. Stacking Lightning on top Bitcoin balance can be nicer.
• The Bitcoin logo next to the on-chain balance can be confusing: Is it the denominator or just indicating if it is on-chain or off-chain.

Separators

Look a bit harsh. Maybe we can make them a bit subtle.

Cfd Trading and Sports Betting buttons

• Remove shadows and add a thin border color inline with theme color

Create Wallet Backup and Deposit Bitcoin

• Have no shadows. Either add or remove shadows from App buttons above.
• Left line of alerts could need some color, maybe orange?
• Make soft corners
• Vertically and horizontally align the icon on the left
• Justify the text

[da-kami]

The Bitcoin logo next to the on-chain balance can be confusing: Is it the denominator or just indicating if it is on-chain or off-chain.

Change into chain icon.

[da-kami]

Separator: Align with theme color, thinner

[bonomat]

Backup Seed

• Change the wording, it was a c&p from a different wallet
• Fix lengths of visible and hidden seed. It's jumping when clicking on show/hide seed

[bonomat]

Receive Bitcoin

• Make it possible to see the whole address
• Copy Address should close the Receive Bitcoin screen. Maybe rename it to close?
• Add a 10101 logo into the QR code

[bonomat]

Dashboard after receiving (pending transaction)

• Bitcoin Received should be online. Maybe change the text?
• Every information should be on the same level, i.e. the tx history is on the lowest level and the CFD Trading on the highest which even has a shadow.
• Add a date, when this transaction was confirmed

Potentially get inspired by Zeus:

[da-kami]

• add time indicator (second row)
• Ellipse (overflow) on Text in the middle
• Reduce padding (in list as well as outer)

Service tiles:

• Remove shade, outline with theme color (? - see how that looks)

[bonomat]

Open Channel

• The user is flooded with information.
• The screen could use some icons (e.g. behind the balances)
• Make the p2p endpoint less important but show the most important information more prominent, i.e. the amount you want to lock up.
• Node name: this can be omitted.
• Is there a reason why this screen is not consistent with the other screen, i.e. have the balance at the top?
• Idea: change the text to something like: We only support a single channel with 10101. More advanced usecases will come later.
• Add icons to explain what is happening, e.g. something like this:
  
• Opening a channel should redirect to a success page showing some information, e.g. a tx link to mempool and text saying: You successfully initiated the channel creation. You will be able to use it once the funding transaction is confirmed
• In the failure case we should display an error

[da-kami]

Is there a reason why this screen is not consistent with the other screen, i.e. have the balance at the top?

Yes. It is a child screen showing details of an action. So far we did not display the balance on child/detail screens but only on the outer screens. We can change that though, it's not a hard rule.

Idea: change the text to something like: We only support a single channel with 10101. More advanced usecases will come later.

We can add that, but I think it depends on what we want to showcase: What is possible vs. what is currently implemented. If we showcase what will be possible here then we don't need changes, if it is important to show that there is a current limitation (that we might not be able to overcome easily) we can adapt the text :)

[da-kami]

Add icons to explain what is happening, e.g. something like this:

I have a hard time imagining how you would achieve this for this screen. Do you mean something like steps with icons that show what will happen? Or one icon (at the top) that indicates the channel open?

[da-kami]

• align the design with what was designed in the wireframe, but:

  • remove node name,

• channel amount has to be most present

• if time: Add icon and redice text; icon on top, text under, then the channel amount

[bonomat]

Icons

Use Bitcoin Icons, ie for Satoshi Icon

https://bitcoinicons.com/

[holzeis]

Buttons

Our buttons are quite small - I think it would improve the look and feel significantly if we design a bigger / nicer button.

[da-kami]

I think this problem becomes more noticeable on bigger screens; on the iPhone SE I never felt the buttons were overly small. Eventually we might want to invest some time into learning how to build better responsive / adaptive apps.

I was wondering it it would be a good idea to stick to FABs and use the more universally, i.e. also in our child screens (e.g. confirmation button). But I'm not sure that would help.