Browser extension UX improvements & Rebranding

[tschubotz]

Please see epic for details

[posthnikova]

Improvements are up for review.

1) Removed the QR codes to download from the stores. We cannot show the pairing qr code right away since it has an expiry time encoded in it. I propose we show QR code partially: https://invis.io/RESNGFYPVJX#/370284115_Safe_Overview_-_Initial_State_. This is not the actual code, just an illustration. I also changed title above QR code from "Browser extension" to "Connect with app", I think calling QR code "Browser extension" is strange: https://invis.io/RESNGFYPVJX#/370284812_Safe_Overview_-_Scan_QR_Code_

I have some alternative versions of how QR code might look: https://invis.io/RESNGFYPVJX#/370284697_Safe_Overview_-_Initial_State_V2_, https://invis.io/RESNGFYPVJX#/370284709_Safe_Overview_-_Initial_State_V3_.

2) Hide "Extension setup succesfully!" message, added "Back" button to initial state when there are Safes that were created previously: https://invis.io/RESNGFYPVJX#/370284826_Safe_Overview_-_Initial_State_-Safes_Created_Previously-_ This affects background on QR code screen: https://invis.io/RESNGFYPVJX#/370285149_Scan_QR_Code_-Safes_Created_Previously-_

3) Removed QR code on the main screen, made it more obvious how to add a second Safe, removed Slow.trade banner: https://invis.io/RESNGFYPVJX#/370286636_Safe_Overview_ Dropdown with multiple Safes does not change: https://invis.io/RESNGFYPVJX#/370286651_Safe_Overview_-_Select_Safe_

4) When the extension is locked, a user has to (1) confirm a tx (2) unlock (3) confirm again. Step 3 is kicked out.

5) Trigger a reload of the page whenever the user whitelists/blacklists a page

6) Add a "back" button to the unlock screen: https://invis.io/RESNGFYPVJX#/370287698_Password_Unlock_W-Back_

[tschubotz]

Thanks for the designs, they look quite nice I think!

Removed the QR codes to download from the stores. We cannot show the pairing qr code right away since it has an expiry time encoded in it. I propose we show QR code partially.

I know I wrote this in the epic. But I think @rmeissner told me recently, we could already show the QR code since the "timeout" is long enough or we can actually set it to e.g. 10 or 15min which should be long enough, right @rmeissner? If not, then I like v1!

3) Removed QR code on the main screen, made it more obvious how to add a second Safe Definitely more obivous now :D I would call it "Add new Safe". I wonder if it's too obvious also. How about putting it in the side menu?

cc @germartinez Let us know your thoughts once you are back from vacation :)

[rmeissner]

I like the improved designs

for 1) I like v3, since the other version feel like I could scroll (maybe we could also use a blurred QR code and only show the real one later)

for the drop down in 3) I am not sure if I would add an overflow menu to a dropdown menu (it is like a menu in a menu)

For me it would make sense to somehow indicate that there are more options for a safe (rename/delete) .... could we maybe always show the 3 dots and when you hover the entry we show the 2 icons for the actions (currently we show nothing if you don't hover over an entry)?

Also is there a way to show a QR code for the Safe address?

P.S.: for the QR code timeout we should be able to set any time delay (even 1 day)

[lukasschor]

1) I also prefer V3 as it does not look scrollable. However, I would remove the coreners and make the entire QR code semi-transperent (and maybe increase the opacity slightly as to increase visibility.

Also is there a way to show a QR code for the Safe address?

I'm not sure if there is really a need for that. If a user actually needs the QR code, it's always accessible through the App.

[rmeissner]

I'm not sure if there is really a need for that. If a user actually needs the QR code, it's always accessible through the App.

Good point. I think the only case is when you recover your Safe (but for that you could probably go via etherscan)

[posthnikova]

we could already show the QR code since the "timeout" is long enough

for the QR code timeout we should be able to set any time delay (even 1 day)

@tschubotz @rmeissner Then I don't see the sense in additional step, let's show QR code right away: https://invis.io/RESNGFYPVJX#/370284115_Safe_Overview_-_Initial_State_. Initial state when Safes were created previously: https://invis.io/RESNGFYPVJX#/370284826_Safe_Overview_-_Initial_State_-Safes_Created_Previously-_

for the drop down in 3) I am not sure if I would add an overflow menu to a dropdown menu (it is like a menu in a menu)

In live extension there are buttons on hover instead of three dots, screens in Sketch weren't up to date. It should look like this: https://invis.io/RESNGFYPVJX#/370810079_Safe_Overview_-_Select_Safe_-hover-_

Also is there a way to show a QR code for the Safe address?

There could be two use cases, when you want to receive funds and when you want to recover Safe. For receiving you could access QR code in the app. For recovery you might want to scan QR code but you could copy the address easily in the extension. I removed QR code to avoid confusion between multiple QR codes in the extension.

[tschubotz]

There could be two use cases, when you want to receive funds and when you want to recover Safe. For receiving you could access QR code in the app. For recovery you might want to scan QR code but you could copy the address easily in the extension. I removed QR code to avoid confusion between multiple QR codes in the extension.

I agree with this. I don't see a reason to show the Safe address QR code in the extension.

Then I don't see the sense in additional step, let's show QR code right away: https://invis.io/RESNGFYPVJX#/370284115_Safe_Overview_-_Initial_State_.

Yes! :)

[posthnikova]

New version is up for review: https://invis.io/RESNGFYPVJX. What's been done:

• New logo & colors. Font changed to Averta

• New name: Gnosis Safe Authenticator

• Unified button style

• Some small text changes: I propose to change "Save configuration" to "Save settings" because "configuration" is too complex: https://invis.io/RESNGFYPVJX#/374771618_Lock_Timeout_. "Connect to new Safe" changed to "Connect to a new Safe": https://invis.io/RESNGFYPVJX#/370286636_Safe_Overview_

[germartinez]

@tschubotz @rmeissner Then I don't see the sense in additional step, let's show QR code right away: https://invis.io/RESNGFYPVJX#/370284115_Safe_Overview_-_Initial_State_. Initial state when Safes were created previously: https://invis.io/RESNGFYPVJX#/370284826_Safe_Overview_-_Initial_State_-Safes_Created_Previously-_

I'm not sure if the qr-code for the pairing will fit in that space. This qr-code is bigger than the rest as it contains more data.

[germartinez]

@posthnikova Should "Connect to new Safe" be removed from the dropdown now that is on the main screen?

[tschubotz]

I'm not sure if the qr-code for the pairing will fit in that space. This qr-code is bigger than the rest as it contains more data.

You mean on this screen? https://projects.invisionapp.com/share/RESNGFYPVJX#/screens/370284115 Could we increase the size if that's the case @posthnikova ?

[germartinez]

You mean on this screen? https://projects.invisionapp.com/share/RESNGFYPVJX#/screens/370284115 Could we increase the size if that's the case @posthnikova ?

Yes

[posthnikova]

@germartinez @tschubotz New version needs review: https://invis.io/RESNGFYPVJX. What's been done:

1) Made QR code bigger: https://invis.io/RESNGFYPVJX#/370284115_Safe_Overview_-_Initial_State_. For that I truncated top section and put the steps on card. The cards now are matching our mobile app style.

2) Removed "Connect to a new Safe" from dropdown: https://invis.io/RESNGFYPVJX#/370286651_Safe_Overview_-_Select_Safe_

3) Small text changes: "Manage site whitelist", "connect TO THE internet", "THE password", "Resend"

[lukasschor]

lgtm 👍

[tschubotz]

Same, looks good to me!

[germartinez]

Sounds good to me too!

[posthnikova]

Screens are on zeplin: https://zpl.io/2j8O764