Prototype for offer book and create offer UX for Bisq 2.0 (Misq)

[chimp1984]

This is a Bisq Network project. Please familiarize yourself with the project management process.

Description

A click dummy prototype to demonstrate the UX for the offerbook and create offer screen for multiple trade protcols.
It should include an on-chain and one off-chain protocol (e.g.MultiSig based protocol and Reputation based protocol)

Rationale

We should find out early how we meet the UX challenges with the multi protocol design.

Criteria for delivery

A clickdummy is provided demonstating the UX of offerbook and create offer screen.

Measures of success

A clickdummy fulfilling the described requirements is delivered.

Risks

Clickdummy does not meet requirements.

Tasks

TBD

Estimates

TBD

Notes

The added complexity by multiple options should be turned into a positive aspect by using it as a way to educate users.
The ledger wallet desktop application has done a great UX job in that regards (very clear guidance with good explainations at each step, using the mental model of "apps" for features like loans, exchange, support for many diff. coins).

Beside that we intent to bring more social aspects into Misq, so that should be kep in mind as well and might be a useful tool to combat the challenges. But that aspect is not much developed yet.

Of course privacy and security are the highest priorities, but as both come with some trade-offs (costs for security, limitation to on-chain, convenience,...) we want to provide more flexibility.
E.g. for small amounts the high security of Bitcoin is not always needed. With fiat trades the bank details are exposed to the peer, so privacy is already weakened in that context.

That said we have to take care to not create the wrong impression that we move away from our core principles. We just need to bring things into the right context and show the trade-offs and allow users to choose their trade-offs.

Data model

I think it is useful for a UX designer to know the basic data model to see where are multiple options required.

• There are different contract types (asset exchange, loand, options,... Initially we only support asset exchange).
• Each different contract types will have its dedicated offerbook
• An offer has one or multiple protocol types (ATOMIC_CROSS_CHAIN_SWAP, LN_SWAP, MULTISIG, BSQ_BOND, REPUTATION,...). If there are multiple the taker will select the one used for the trade.
• A offer for asset exchange (SwapOffer) has 2 assets for the ask/bid side. It can have an optional market based price. If not defined the fix price is derived from the amounts of the 2 assets.
• An asset has the currency code, an amount and 0-n transfer type(s) (in case the asset is transferred out of band of the protocol)
• A transfer type is an enum (e.g. SEPA account,..). Based on that we can derive properties like duration,...
• Depending on the protocol type there can be optional fields (e.g. for a MultiSig protocol: % of security deposit)

Current POC data model is here (but no need for a UX designer to check that out):
https://github.com/chimp1984/misq/tree/master/finance/src/main/java/misq/finance

Offerbook

Here is an attempt to triage the UX requirements for the multiple protocol support in Bisq 2.0/Misq.

This is based on current Bisq UX, but if anyone has a better UX model in mind it is very welcome.

Offerbook

We do not use the BUY/SELL concept as with a trade between assets of the same class like EUR-USD there is no money/commodity distinction so buy/sell is not intuitive.
Rather we should use the ASK/BID (I want/I have) terminology.
Derived from that the offerbook will not have a buy/sell side but filter options to narrow down the displayed offers.
In the following I handle only exchange contracts, but we should keep in mind the plans for other contract types like loans, options,...

The offerbook is a table with the min. set of common fields and with an option for expanding the details.

Ask	Ask amount	Price	Bid	Bid amount	Protocol	{Button}	{Button}
EUR	5000	56235 BTC/EUR (1.2%)	BTC	0.0913	MultiSig	INFO	TAKE OFFER
EUR	3333	1.21 USD/EUR (2.2%)	USD	3555	BSQ Bond	INFO	TAKE OFFER
BTC	2	250 XMR/BTC (0%)	XMR	500	Atomic swap	INFO	TAKE OFFER

At click on info (or selecting the table row) the row expands to shows the details and optional contact button to open a privat chat with the maker.
Those details are specific to the protocol used in the offer.

Filter

We could offer 2 types of filter: One more technical with checkboxes, search strings,... and another one more dialog orientated for new users (e.g. What do you want {EUR, BTC,...} -> Which protocol -> ...
I have not though much about the details of the filter but the create offer scree might serve as model as there we are required to guide the user through the options and a similar challenge need to be met at the offer book filter.

The user can define in settings their preference for filtering (e.g. hide all reputaton based offers, only show BTC offers, allow contact,...).

Create offer

It guides the user through a minimal set of stages which will depend on the context (e.g. selected asset, protocol).

1. Select contract type

{Dropdown [Currency exchange, Loan, Option trade,...]} - as long we only have Currency exchange that step is omitted.
Different contracts will have different screens, for now we cover only currency exchange.

2. Select Assets:

ASK (I want): {Dropdown [BTC, XMR, EUR, USD,....]}
BID (I give): {Dropdown [BTC, XMR, EUR, USD,....]}

3. Set amount / price:

Once both assets are selected the screen shows 2 input text fields for amounts of both assets and in the middle the price (fix + percentage). This can be done similar as in current Bisq.

4. Select protocol

Table with protocols and properties:

Protocol	Security	Requirements	Fees	Min. Duration	Transfer
Atomic swap	Best	Funds in XMR Wallet	0.2%	1 block (10 min.)	on-chain <-> on-chain
Lightning Network based	High	Fund in LN Wallet	0.3%	Instant	Layer 2 <-> off-chain
MultiSig based	High	0.15% Collateral	0.3%	1 block (10 min.)	on-chain <-> off-chain
BSQ Bond based	Medium	BSQ bond	0.3%	Instant	off-chain <-> off-chain
Reputation based	Low	Reputation	0 %	Instant	off-chain <-> off-chain

On row selection (and row rollover) an info text is displayed explaining the protocol, requirements and risks.
Details in the table could be shown as icons instead of details as well. Intention is to show trade-offs of all protocols, e.g. security vs. convenience/costs.
Not available protocols for the selected assets are hidden. In case there is only one possible protocol the whole stage is skipped.

5. Protocol specific inputs

Cusom forms for protocol specific options if required, otherwise that stage is skipped.

Example for MultiSig based protocol:

• Set % of security deposit
• Fee options
• Shows required funds for wallet.

Connects to wallet and make sure the required funds for collateral is available.
The offer would become inactive in case the wallet does not have enough funds.

Example for Reputation based protocol:
Which form of reputation can I provide? {Dropdown [Social media, WoT,...]} or define custom in textfield. Multiple selections are possible as well.
Which form of reputation do I accept from peer? {Dropdown [Social media, WoT,...]} or define custom in textfield. Multiple selections are possible as well.

6. Protocol specific transfer/payment accounts

Similar to payment selection in current Bisq but instead we have the pre-condition of an existing account we allow the user here to define an offer and in case there is no account/wallet set up yet the user will be promted at that stage to do so. After setup they will return and will find their offer like before they left for wallet/account setup (or that setup is done in a popup and after closing it its filled in here).

Example for MultiSig based protocol:
If I sell BTC:
How do I send BTC? {Dropdown [Bitcoin core wallet, Electrum wallet, Ledger....]} - if no wallet set up yet the user can do it here. Only 1 wallet supported per offer as we need to check wallet balance.
How do I want to receive EUR? {Dropdown [My SEPA Account, My Revolut account,...]} - if no account set up yet the user can do it here. Multiple options allowed

If I buy BTC:
How do I receive BTC? {Dropdown [Bitcoin core wallet, Electrum wallet, Ledger....]} - if no wallet set up yet the user can do it here.
How do I send EUR? {Dropdown [My SEPA Account, My Revolut account,...]} - if no account set up yet the user can do it here. Multiple options allowed

Example for Reputation based protocol:
If I ask EUR and bid USD:
How do I send USD? {Dropdown [My ZELLE Account,....]} - if no account set up yet the user can do it here.
How do I receive EUR? {Dropdown [My SEPA Account, My Revolut account,...]} - if no account set up yet the user can do it here.

[chimp1984]

Just to make clear: The project is not about the actual design or an implementation (webapp, javaFx,...). The clickdummy can be Adobe XD project or some other wireframe tool...

[eyalron33]

That's a super tough challenge for a UX designer, even if they are already Bisq users since Misq is quite different.

Doe Bisq has UX designers that the community already knows and like their style of work (like it has developers with a well-known reputation?). If not, maybe it's a good opportunity to get some.

We could secure funds from the DAO (not sure how) or collect BTC from the community and create a competition for mockups. It will be voted by the community (possibly by holders of BSQ, like voting, but off-chain). First place could be adopted, though the first 3-5 places should get some award.

It's not an easy job to organize that. You need to advertise the existence of the competition, have a forum where designers could discuss their work as it progress (it's a hard challenge to do alone), organize securing the funds, votes, etc.

I'm not sure if it's easier to create a mockup or to organize a competition for mockups, but the advantage would be that you get more UX designers interested in Bisq.

[chimp1984]

Yes, @pedromvpg is our designer who made the currently used design. I asked him already but he is overloaded with other work atm ;-(.

I think to make a competition is too much overhead and I personally do not have good experience with the results from such attempts.
Also as stated its not required to be a designer for that task, it is about the usability. Sure most designers bring more experience with that but I assume there are Bisq contributors who have deliver good results here as well. Good understanding of Bisq and the crypto exchange domain is more important at that stage.

@pedromvpg suggested we should ask at https://bitcoin.design/ (on their slack cannel), but I did not had time to do that, if anyone want to take that sub-task would be great.

[viperperidot]

I have some experience with options trading so when we get to that part of the project I could contribute on non-code related parts of implementing that. There are a couple different ways people trade options so we will want to work out how we actually want this to function in Bisq. The UX for options usually follows a specific format called an 'Option Chain' so we could base ours off that, but depending on how we actually implement the trading there may be traditional fields that we dont need. I think there will be an entire project for implementing options in the future that I can comment on but I thought i'd throw my initial 2 sats in. I think it is very cool that we are looking at implementing decentralized loans and options trading into Bisq. I think that will attract many more users, I am aware of decentralized loans currently but have not found any decentralized options trading so that would be landmark in the bitcoin space and set us apart even more.

[eyalron33]

Also as stated its not required to be a designer for that task, it is about the usability.

But I wrote about "UX designers"...

I actually had a good experience with competitions, but sure, as you wish:-)

I'll publish the proposal in https://bitcoin.design/ Slack, gladly.

[chimp1984]

@viperperidot Ah good to hear that you are experienced in that field! I think for now we would not have the bandwidth to do anything in that direction, challenging enough to get the basics done. But the overall design has to consider those other financial products, so that why I mentioned it.

@eyalron33
Thanks for publishing on bitcoin.design Slack!
Feel free to engage in looking for that role however you think it might be useful, just mentioned my personal experience and I would not be able to spend time on that at current state.

We have to be clear that we do NOT look for a new designer. @pedromvpg is an execellent wold class designer and we are super happy to have him. Also for branding I think it is better to stick with current CI/style. I hope that @pedromvpg is available at the point when we are ready to implement design.

What we need now is someone who is very good with user experience. No design skills needed for that. Can be a wire frame click dummy or anything. Not sure whats the best term for that role: UX expert, poduct designer? Definitely not UI designer.

[flybylow]

Hi, I'm a UX designer with experience in building wireframes and clickable prototypes. I'm looking for a project in the crypto space to get some experience in the industry. I know a bit about trading but need more details on certain aspects. Would be good if i can partner with someone with deeper technical knowledge. We can work on the concept together. I'll turn into a prototype (and maybe do some usertesting to validate our ideas). Let me know if you are interested.

[cd2357]

@warddem great. Unless others have other ideas, here's what I would suggest:

Have a look at the current Bisq UI to get an idea of the main concepts. Alternatively check out the short intro clips here.

Simplest first step for you would be to create one simple page, like the Orderbook (see details in description above). If possible, also add some filtering to the orders.

Based on that, it would be easy to give you feedback.

[flybylow]

@cd2357 Sounds like a plan. I'll go through the Bisq flow and rework 1 element.

Let's start with a static wireframe (to map the functionality). I'll get back to you next week.

[eyalron33]

@warddem just in case you are new to Bisq, take a look also at how the compensations process works with Bisq DAO:-)

https://docs.bisq.network/compensation.html

[flybylow]

hey @eyalron33 Here a quick wireframe for the collapsable rows;
https://www.figma.com/proto/aiU372Mvo496HbZWe9GcLS/Bisq?page-id=37%3A0&node-id=37%3A340&viewport=784%2C-1161%2C0.29217809438705444&scaling=contain

Offer / from labels + setup wizard:
https://www.figma.com/proto/aiU372Mvo496HbZWe9GcLS/Bisq?page-id=51%3A194&node-id=51%3A312&viewport=521%2C345%2C0.3520146608352661&scaling=contain
"More filters" opens a panel with advanced filter options.

Have a look at the interactions and content pls and let me know what can be refined.

[eyalron33]

@warddem thanks! I wrote you in Slack to talk about it in more detail.

[eyalron33]

Following advice from @chimp1984, I spoke with @warddem. I would try to work with him on this from the Bisq side. We could change the original proposal to make it "official".

First, see Ward's wireframe for his current ideas here. In this wireframe you can

• click on an offer to open its details,
• click on "more filters" to opens advanced search options,
• click on setup offer" to start a wizard for making offers.

(we will change the text there to fit Bisq terminology later on:))

Discussion

There are three parts to the prototype:

• Offerbook
• Making an offer
• Taking an offer

How about making designing these the first 3 small milestones for the proposals?

"Make an offer" is the easiest part (there are plenty of known good UX options for wizards). "Take an offer" might be difficult if it includes some "negotiation" between the traders.

But "Offerbook" is probably the most challenging. It needs to show much more information than a regular exchange, while still be easy to use. So let's start with "Offerbook" as a first milestone.

Offerbook: one column vs. two column

A classical exchange offerbook has two columns. On one side you have people selling their Ethereum for Monero (let's say), while on the other side - people selling their Monero for Ethereum. This lets users see the "market state".

However, two columns offerbook has two problems. One, it leaves less space in the screen for more data about each trade. Two, it's unclear how to call each column (since Bisq 2.0 won't have Bitcoin as the base currency). I personally don't feel that neither buy/sell or ask/bid is clear here, but don't have an alternative to offer.

@warddem introduced a one-column offerbook in his wireframe. You choose if you want to sell your Ethereum for Monero or vice versa - and get an offerbook for this option.

It's super clear and there is more space for extra details, but it may look more like a bulletin board than an exchange.

However, Bisq is not a place where people make quick trades, so it may be the best option to go for.

protocols names vs protocols properties

Since one highlight of Bisq 2.0 is in support of multiple trading protocols, we should probably show them by default in the offer book.

However, should we use protocol names? I feel that the names would really be clear only for power users. Maybe it's best to show next to each offer not the protocol name, but some property of it? Like cheap (reputation-based protocol), fast (atomic swap), secure (current trading protocol), etc.? Then we can show a name & description when people hover on this.

This is not a proposal design, but a question: do we want protocol names in the offer screen or icons/properties (cheap, fast, secure..)?

Defaults: casual users vs. power users

The multi-protocols options is great for power users, but possibly confusing for "casual users".

Do we assume that Bisq wants plenty of casual users? In this case, we need a default option, otherwise, they may leave by getting confused from all the trading protocols.

More questions:

• Do we want to show all the trading protocols options by default, or only for power users (once they enable it with some button)?
• Do we assign to each pair a default protocol?

General design

@warddem stick with the current Bisq design. Do we want that? Or do we prefer a clickable demo that doesn't sit within the current design of Bisq?

[chimp1984]

Thanks!

...negotiation

I would ignore that for now. Lets focus on the main use case.

...it may look more like a bulletin board than an exchange

I think its the common model for P2P exchanges (LocalBitcoin,...). Binance has added P2P exchange as well, which looks also like LBTC...

...protocol names

Yes I agree that the names will not mean much to new users. But over time they can become more a known term like atimic swaps are already. To show to the user the benefits/costs can be a good way to educate about it and to let user decided what fits best their context. There could be also be "recommendations" based on amount (e.g. for a 30 usd trade u dont need highest security of atomic swaps, but for a 50k trade you never should use a reputation based protocol).

casual users vs. power users
Pedro has made a great design for onboarding as well as simple UX for quick trades: https://xd.adobe.com/view/a83c2327-4730-4ec2-8938-e318b2749588-fd6f/

I would say that default choices should be always the most secure one available for the assets. E.g. Multisig based for fiat and atomic swaps for altcoins if supported. Reputation based should be kept for those who are willing to take more risks and understand the context.

Btw. Steven is working on a LN based protocol, so that will be also a main focus once its there and the user supports LN.

Do we want to show all the trading protocols options by default, or only for power users (once they enable it with some button)?

I think something like that can work to let the user ealry decide to go for "full control" or the "quick default options" route:

Do we assign to each pair a default protocol?

I guess we will need that and some protocols are only available for certain assets:
Here a list:

• 2of2 MS with delayed payout (Bisq model): possible with all Fiat assets when one side is BTC or other supported chain like Liquid BTC, LTC, ZCash,... For altcoins the atomic swap is the preferred option if available.
• Atomic cross chain swap (DLC based): XMR <-> any BTC like coin
• Atomic cross chain swaps (HTLC based): Planned supported assets BTC, ETH (including ERC20 tokens), LBTC, ZCASH, GRIN,...
• LN based protocol: BTC on LN to Fiat if user has LN wallet (will be shipped with Bisq but user need to be ok to fund their LN wallet)
• Reputation based: Anything to Anything, no blockchain required. Not much defined yet... but only suitable for smaller amounts and comes with higher risks and discounts on privacy.

One way to help user select it to ask them what they have: new user without any BTC can only use the reputation based protocol. If one has LN the LN based protocol is better then the MS based for fiat.

Btw: I started to work on an UI prototype app using the design from Pedro (https://xd.adobe.com/view/a83c2327-4730-4ec2-8938-e318b2749588-fd6f/) as template....

Here are some screenshots from Binance: When you click on an offer you get to the users page where other offers of them are listed as well. I could not get further as I am not a verified user. But I guess its similar to LBTC. I think we could take over of those concepts, specially to see other offers of same trader (if they have that enabled to share offers - as be default each offer has its own identity even from same maker).

[eyalron33]

After further discussion with @warddem we will do as the first milestone for this proposal the following:

• Create a clickable "Offerbook".

The cost that we'll ask from the DAO:

• 500 USD @warddem
• 200 USD to me (Neiman)

The design would base on the one here. Based on what's written, we'll do a one-column Offerbook (so all offers in the offer book buy and sell the same asset).

To verify its usability we will include four trading pairs:

• BTC <-> USD,
• XMR <-> BTC,
• EUR <-> ETH,
• XMR <-> ETH,

and the following protocols:

• 2of2 MS with delayed payout (Bisq model): Slow, expensive, secure,
• Atomic cross-chain swap (DLC based): Fast, secure, expensive,
• Atomic cross-chain swaps (HTLC based): Fast, secure, expensive,
• LN based protocol: Fast, secure, cheap, BUT not always available,
• Reputation-based: Fast, cheap, insecure.

Two questions still remain:

• which extra detail exists when someone "clicks" on a trade? In his current wireframe @warddem put just "contact seller" (=chat).
• Are there any other exchanges that support multiple pairs with multiple options to look at (besides Binance that was mentioned here). Just for inspiration.

[chimp1984]

Thanks for the offer.

which extra detail exists ...

I will post a bit later a reply. Need some time to think about what should be in.

Are there any other exchanges that support multiple pairs with multiple options to look at (besides Binance that was mentioned here). Just for inspiration.

Not aware of any. I guess Bisq is entering a new space with that.

I just made a few screenshots from ledger live app. It has great UX and might help as inspiration. Will post it here below....

[chimp1984]

[flybylow]

Hi.
Here a link to the new prototype:
https://www.figma.com/proto/aiU372Mvo496HbZWe9GcLS/Bisq?page-id=191%3A2798&node-id=191%3A2799&viewport=1733%2C464%2C0.46835973858833313&scaling=contain

It combines functionality for beginning users as well as advanced users in 1 interface.

Goals:

• Limited options and simple labels for new users
• More filter options for advanced users (open filter bar via "more filters)
• "Info icons" so users can learn unknown functions (ex filterbar > protocols > click info icon)
• Primary info is shown in table form
• Secundary info shown when row is clicked open (chat, all protocols ...)

Loosely based on the dark mode prototype I've found here. Please do not focus on the visual side too much, the prototype is mainly a conversation starter and a check on interactions / copy...

Warning: the prototype is based on the wonderfull info I got from @eyalron33 and my UX experience only. It would be a very good idea to usertest it at a certain point to verify our work with real users.

Looking forward for the feedback.

[flybylow]

@eyalron33 just informed me that you liked the prototype and need some time before the next milestone. Let me know if i can help in the future, it was nice working together on this.

[chimp1984]

Sorry for not replying, I asked him to give you feedback as he was alreayd closer in touch.
Yes I think we need to work out more the requirements and that will take 1-2 weeks I guess...

[flybylow]

No worries, let me know if can help once the requirements are done.

[flybylow]

Sorry for the delay, It have BSQ now so made the contribution request.

[flybylow]

Hi @chimp1984 , is the prototype idea used in production?