Safe-react: [Deployment Screen] Design

[lukasschor]

Story:
As a user deploying a new Safe I want to be better informed about the Safe deployment status so that I don't have to worry whether the deployment is going to be successful or not.

Improvement ideas:

• Don't show the screen above before deployment transaction has been identified. Rather show a screen saying something like "Please confirm the creation in your wallet" and the opportunity to "try again" in case for example Metamask had issues and didn't ask the user to sign the creation transaction (This should also address #111 )
• Show progress bar when deployment transaction has been identified
• More descriptive "finite" progress bar (can also be faked with an estimate)
• Give opportunity to follow progress on Etherscan
• More "entertaining" screen as it takes a while for the Safe deployment to finish and depending on network congestion like 1) An animated Safe visual or some education about the USPs of the Safe) 2) some apps use the pattern of just displaying (more or less random) activities that are done in the background and that switch every 5-10 seconds. This could for example be (Transaction submitted...``Validating transaction... -> Deploying smart contract... -> Generating your Safe... -> Setting up access policy... -> Waiting for confirmation on the blockchain...)

[pablofullana]

Couple of questions here:

1. We have developed and currently support POA's Bridge which has a nice progress display feature. Shall we plan on implementing something similar?
2. Extra: Keep track of progress and ship a 'resume' feature? (if possible)

[fernandomg]

This was discussed with @lukasschor: we'll keep the following approach:

More "entertaining" screen as it takes a while for the Safe deployment to finish and depending on network congestion like 1) An animated Safe visual or some education about the USPs of the Safe) 2) some apps use the pattern of just displaying (more or less random) activities that are done in the background and that switch every 5-10 seconds. This could for example be (Transaction submitted...``Validating transaction... -> Deploying smart contract... -> Generating your Safe... -> Setting up access policy... -> Waiting for confirmation on the blockchain...)

@alongoni, FYI

[alongoni]

Hi @lukasschor , we define 6 steps that give to the user more information about the Safe deployment status.

We use a variant of the 3 steps for creating a new Safe. Intentionally the 6 steps on the left don`t expand. This will improve the usability because all the steps are visible in all the proccess.

If you are agree whith the design, I'll continue all steps.

cc: @fernandomg

[lukasschor]

I like this approach a lot. Let's add to the first step also this grey bar, saying "Please confirm the Safe creation in your wallet". And have a Retry button below (center-aligned).

Error state

Let's call the "Abort" button "Cancel" and have both center-aligned to be more in line with other parts of the interface.

[alongoni]

@lukasschor, this are all steps:

cc @fernandomg

[fernandomg]

@alongoni, what about the last step. Shall we leave it for a few seconds and then redirect the user to the newly created Safe or add a button to navigate to it?

[alongoni]

@fernandomg. In my opinion I think that we shall leave it a few second. It's consitentent with the previous interaction pattern. Lukas, what do you think?

[lukasschor]

Yes I would leave for 3 seconds, I would also use the checkmark illustration we use here for the last step: https://zpl.io/bP84XDD

[alongoni]

Great!

[lukasschor]

Gather some feedback within the office. Some insights contradict opinions I had earlier, so sorry about that.

Could we use the same grey background as with the error message and say

• Step 2-5 "Please do not leave the page"
• Step 6 "Click below to get started"

Use a button for step 6 "Continue", no need to show a link to etherscan in this step

Rename Step 6 in the progress bar to "Success" and leave out the "Waiting for confirmation on blockchain" screen.

For steps 2-5 there should always be something moving on the screen. Either just using some dots "..." or have a loading spinner (e.g. in the progress bar on the left side). This would help the user understand that he does not need to take any action.

[lukasschor]

Also, would it be possible to provide feedback on another tool than Github issues? e.g. Invision, or maybe Figma has a design review feature? The friction would be much lower to give feedback and link comments directly to parts of the screen.

[alongoni]

@lukasschor Here is the design in Figma, you can give feedback there.
https://www.figma.com/proto/9Kscp4DhKRttHBHMocOBuy/Gnosis-Safe?node-id=13%3A768&scaling=min-zoom

[lukasschor]

Nice! In the first screen the card background is a bit off compared to the other ones, but no need to change it in figma as long as the dev implementing it won't implement it 1:1. :)

Looks very good!