# Design approach Ricochet:

**GOAL:
We want to transform the current UI into a more userfriendly dashboard.**

Here is how we plan to handle each tab/view, and move them to 1 clear dashboard view:

- **Wallet**: In current UI, the wallet-view holds your balances, including the functionality to deposit or withdraw. In the new UI, this information will be presented in 1 component on the right-hand side (section B. on sketch). The items in list will have the categories: "in wallet", "in ricochet" and "currency" in that order, as seen in the sketch. The deposit- and withdraw-buttons will expand a space between the buttons and the list, where the neccesarry information for a deposit or withdraw will be seen such as inputfield, dropdown for currency etc.
- **Market**: This information doesn't need to be accessed so directly as the user-specific information, so we want to move it down in visual priority, and thus also on the page. Section F. on the sketch will be the place to show the market-information.
- **Payments**: We can easily move the payments-functionality to the place where one starts a new position (= in section A., the button on the right saying "+ new"). When clicking this "+ new"-button, the user will see 2 dropdowns (see next sketch): one to indicate the start-currency, and one to indicate where it is going: this latter dropdown will also show the option to just state an address. That way, one can make a payment to that address.
- **Launchpad**: We envisioned the launchpad-information to be transfered more into a "advertising" format, informing the user of what benefits this launchpad holds (acces to token-gated channels, etc.). Section D. is dedicated to this ad. The ad should hold 1 big button with a CTA "learn more", leading to separate page entirely dedicated to the benefits, in- and outs and overall details of launchpad (with a functionality to start that position directly on that dedicated page).
- **Active streams**: Since this is the main function of the app, we want to give it the most prominent place in the new UI: top of the page, left-hand side (section A. in the sketch). We'll use the word 'position' instead of stream, and we will show in this component: a "+ new"-button, to start a new position, and a list/table with the user's existing positions.
- The items on the list will have following categories:
- "from > to": indicated by the currencies symbols
- "position": showing the actual position f.i. 100 RIC/month, 5ETH over 20days, ...
- "ends": showing when the position will end, in case of fixed position it will be shown in human-readable txt, f.i. "in two weeks", and it will show a !-triangle when it is almost about to end (as seen in 3rd example in the sketch)
- "position result": showing the balance of the currency the user is streaming into
- "profit": showing what yield is gained w this position, hightlighted in a flashy colour (or "N/A" if not applicable)
- each item has a '+ button' to expand that item and show the remaining info: stop-btn, balance of stream-currency, etc.
- The "+ new"-button will expand a space between the button and the list (see next sketch), where the user will see all that is neccessary to start a new postion:
- 2 dropdowns: one to indicate the start/stream-currency, and one to indicate where it is going
- a graph, showing how the 'receiving' currency is doing
- an input-field for the amount
- a dropdown to indicate the timing-details: each month, over x amount of days, ...
- 2 buttons: to start the position or to cancel
- **Activity**: Once connect, that button the user used to connect his wallet (C. on the sketch), will lead him to his account page, a separate page dedicated to all his account-related data, among which his activity.
- **Refer**: To push this feature a little more, we're giving it his own section/component (E. on the sketch), directly below the balances-section. The refer-section will holds some information about the benefits of referring, and also an input-field for his referral.