User Flow in UniSwap “SWAP”
I decided on mapping out the user flow of this feature of uniswap.org because I know it very well.
On Uniswap, the user lands on the homepage first. In order to access the web app the user will go to “Use Uniswap”, which redirects him to the “Swap” page by default because it is the most commonly used feature so it needs to be easily accessible, within only a few seconds. This page is simple and alongside the nav has the main feature centred to be the only thing the user sees.
Before the user can make any transactions they need to connect an Ethereum wallet. So before that has happened there will be a “connect wallet” button, which would be the next thing the user clicks.
A slider will open that shows different wallet types for the user to chose, or the possibility to exit the slider. After the user has selected a wallet, for example “Wallet connect” the user sees all the available wallets supported by wallet connect and selects their wallet. I used Metamask for this flow.
After selecting Metamask, Uniswap will refresh automatically and change the “Connect Wallet” button to “Swap”. Uniswap will recognise which assets are in the users wallet, so the next step for the user is to select which asset they want to swap and how much. Finally the user clicks on “Swap” to initiate the transaction.
