New Trezor Design

[brunobar79]

@cjeria made this awesome work. Opening this issue to continue the discussion:

https://consensys.invisionapp.com/share/ZVMZNI09CFM#/309042600_hardware_Connect

Internal feedback from @danfinlay and @bdresser:

• "Connect to Trezor" button is below the fold - We might want to have another button before the tutorial starts
• "Hardware support is here" ? Should that "auto-expire"? (might look old after a couple of months)
• Is it necessary to show the account selector assets? (People will try to click it)
• Connect Tab - Should we name it something else? (Bobby suggested Hardware, but Connect feels more flexible for future integrations)
• Small banner "Hardware connected" - Define interaction (auto disappear after a few secs?) - Font size too small

[cjeria]

@brunobar79
Pulling out the instructions into a modal would help with these two pieces of feedback.

"Connect CTA" is below the fold - We might want to have another Connect before the tutorial starts
"Hardware support is here" ? Should that "auto-expire"? (might look old after a couple of months)

In that modal, we can add a checkbox "Don't show again".

Is it necessary to show the account selector assets? (People will try to click it)

It should be clear this is purely instructional since the user has not made any actions to indicate they are seeing real accounts. However, to be 100% sure there's no mistake that those accounts are not real accounts, I've changed the accounts asset to look less "real".

Connect Tab - Should we name it something else? (Bobby suggested Hardware, but Connect feels more flexible for future integrations)

I'm happy with Connect, it compliments the other verbs and if a user is curious, they can check out the tab to learn more.

Small banner "Hardware connected" - Define interaction (auto disappear after a few secs?) - Font size too small

The banner font can be increased to 12px for better legibility and top and bottom padding should be added. I think the banner should be present at all times until you physically disconnect the device.

That being said, here are three options for approaching the explainer steps https://consensys.invisionapp.com/share/ZVMZNI09CFM#/309272695_trezor_Connect_

[brunobar79]

@cjeria The modal might be a good idea, and thanks for bringing new options to the table!
I don't have a strong preference for any of the 3 steps so I defer to you guys.

• Regarding the account selector asset, I think what you just did is a very elegant solution 🥂
• Connect VS something else, connect has the majority of votes, so we'll go with that
• About the small banner, the suggested design changes make sense to me. My only concern is that we're not able to detect when the device is really "connected". You can still view and switch accounts after disconnecting the device, so it would be weird to say "Hardware wallet connected" while it's not.

CC: @bdresser @danfinlay

[cjeria]

About the banner, the suggested design changes make sense to me. My only concern is that we're not able to detect when the device is really "connected". You can still view and switch accounts after disconnecting the device, so it would be weird to say "Hardware wallet connected" while it's not.

Ok, I made the assumption that we were able to detect the device while it's physically connected. If not possible, then let's have it go away after a few seconds.

I just updated option 1 in the prototype - Let's go with that one! @brunobar79

[bdresser]

this is merged, closing!