[Epic] Safe Creation Redesign

[usame-algan]

Overview

Improving the drop-off rate during safe creation by implementing the new design

Tasks

• Build a stepper component to manage the form screens [Safe Creation] Form stepper #931
• Build a component for the info widget [Safe Creation] Info widget #927
• Build a component for the overview widget [Safe Creation] Overview widget #928
• Build a component for the status screens [Safe Creation] Status screen #932
• Implement redesign for the status screens [Safe Creation] Implement redesign for status screens #994
• Implement redesign Network + Name step [Create Safe] Implement redesign Network + Name step #961
• Implement redesign Owner step [Create Safe] Implement redesign Owner step #962
• Implement redesign Review step [Create Safe] Implement redesign Review step #963
• Implement redesign Connect Wallet step [Safe Creation] Connect wallet step #1003
• Layout [Safe Creation] Layout #995
• Implement Overview/Info Widget display logic [Safe Creation] Implement Info / Overview widget(s) #996
• Handle wallet connection [Safe Creation] Handle wallet connection #1080
• A/B testing: [Safe Creation] A/B test the new design #968

How to test

• Open the new route /new-safe/create
• Click through the steps and compare to the Figma designs
• Check that the requirements of each subtask is met

Links

Problem statement: safe-global/safe-pm#82
Notion: https://www.notion.so/gnosis-safe/Safe-Creation-7ec069306e8c4101bffd7c17299eec53
Figma: https://www.figma.com/file/ptTs6lDBeUuLNySroJ5PiF/Web-Master-File?node-id=51%3A5661
Analytics: https://analytics.google.com/analytics/web/#/analysis/p308247657/edit/h41dtVeqQ0icP3o_O_Cx-g

[francovenica]

Question.
The previous iteration of safe creation would put as the first owner the currently connected wallet, and if you changed wallet it would replace that first row with it. Was that feature dropped?

[francovenica]

Question/suggestion : In the review step (step 4) the addresses don't have the copy to clipboard/blockexplorer icons. They are not in the design, but we put it everywhere in the app, we should probably put them here too

[francovenica]

Question:
In the designs it seems to be a way to complete cancel the safe creation, but in any of the step, not even step one, there is a "Cancel". Was decided to not put a way to exit the safe creation?
Currently, the only way for the user to get out is using the logo on the top left (which is not even that good, since that if the user has a "last used safe" it will take him there first)

[usame-algan]

The previous iteration of safe creation would put as the first owner the currently connected wallet, and if you changed wallet it would replace that first row with it. Was that feature dropped?

Yes, we decided to change it because it would allow creating a safe for a different wallet than the connected one e.g. a user wants to create a safe with one owner that is not his wallet. So initially the connected wallet is set as an owner only once now and can be changed.

In the review step (step 4) the addresses don't have the copy to clipboard/blockexplorer icons. They are not in the design, but we put it everywhere in the app, we should probably put them here too

Makes sense! I will add links there as well. Edit: This should now be merged here and can be tested

[francovenica]

I've been checking the GTM with the old and new safe creation. The only noticeable difference is that from the "owner" step to the next there are 2 metadatas (Owners and policies).
This image is from current prod web-core. These 2 metadata are not being tracked in the new safe creation flow

Also we are not tracking anything regarding the new tips in the right side of the safe creation (if the user clicks them or not). I think we should since the idea is to know if the users are paying attention to them or not.

[francovenica]

Tested here since it was the last build shared with me
The Switching between the worked but it might take several clears of the LS to see it.
Tried the old flow several times and it worked fine

The safe creation epic looks good to me