UX Changes after first feedback round

[Dominik1999]

Make the Raiden Wizard easy to use

• General: include more documentation, in order for a “unexperienced” user to understand what he/she is doing and what the steps are - possibly a tracker re. the steps. , i.e. explain them initially and then show via a tracker the current step

This is the initial explanation on the first page

• General: Show explanation when you scroll over a button, what that button does. Try to reduce as much text shown as possible. We want a very clean design.
• General: get data for FIAT balances, whenever balances are involved (user sees $ or EUR) - not possible, prices are not available for free via API

We need a redesign of the wizard pages - we need only 6 pages (for a first time user)

First Page: See explanatory picture and accept disclaimer

• Replace header "Goerli Wizard" to "Raiden Wizard"
• Add the disclaimer with links to all services and their disclaimer but hidden. So we want to see only a checkbox and some text [use placeholder text @manuelwedler ]. The correct disclaimer should be shown after clicking a link in a separate pop-up [use placeholder text @manuelwedler ]
• Remove dropdown "mainnet / goerli" - we only want mainnet for now
• Show less text and tell the user that it takes 5 steps but not which

---

Second Page: Connecting to the Ethereum Blockchain

• Less text - write only "Provide your Infura ID"
• An (i) icon should after Infura should link to an official page of Infura explaining it.
• Rename headline to "Connect to the Ethereum Blockchain"

---

Third Page: Send ETH to your newly created wallet

We need to redesign that page - goal of the page is to have a wallet with the min required amount of ETH. This wallet is recoverable with a passphrase. If the user wants to know how, she get's the information

• Add simple button to connect to Metamask and send ETH to newly created address
• When min amount of ETH is detected in wallet, user will be redirected to fourth page
• Add text, something like: "We generated a wallet for you"
• When hovering over "wallet" a box should show a tooltip described in UX Changes after second feedback round #130:
• Private key should not be visible / copyable, see Prompt user to download the account keyfile #134

---

Fourth Page: Swap ETH to RDN

We need to redesign and merge those 3 pages - Goal of the new page is to swap ETH to the min required amount of RDN.

• Re-design the whole page - delete existing content :)
• User can choose which DEX to be used. Add icons for DEXes UniSwap and Kyber
• If DEX is chosen, view is expanded. Users sees 3 Buttons (10 RDN, 20 RDN, 50 RDN)
• The user sees price for swap and all conditions inside the buttons, see Improve CostEstimationHandler #133
• Click on continue button executes swap

---

Fifth Page: Swap ETH to DAI

We need to redesign and merge those 3 pages - Goal of the new page is to swap ETH to the min required amount of DAI.

• Re-design the whole page - delete existing content :)
• User can choose which DEX to be used. Add icons for DEXes UniSwap and Kyber
• If DEX is chosen, view is expanded. Users sees 3 Buttons (2 DAI, 5 DAI, 10 DAI)
• The user sees price for swap and all conditions inside the buttons, see Improve CostEstimationHandler #133
• Click on continue button executes swap

---

Sixth Page: Start Raiden

• The user should be shown discretely her current balance
• We need only one button "Launch Raiden" - the user should be somehow informed how long that will take

---

• also see Bag of observations when testing jomuel/raiden-wizard/mainnet #109

• Legal: Propose one legal disclaimer that entails everything and get approval from Jim (Maybe we can use the new bbtech lawyer here?)

[Dominik1999]

Still missing: How is the user flow, if Wizard was used before?

[konradkonrad]

Suggestion: while waiting for on-chain transactions, we could display an iframe with the transaction view on etherscan (https://etherscan.io/<txhash>).
That way the user gets good feedback on the status of the transaction and we don't rely only on our status handling.

[konradkonrad]

Please also give #123 some consideration!

[konradkonrad]

There is also this suggestion: #117 (comment)

[Dominik1999]

all done