Prototype for offer book and create offer UX for Bisq 2.0 (Misq) about projects HOT 23 OPEN

@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.

from projects.

@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.

from projects.

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.

from projects.

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.

from projects.

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...

from projects.

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

from projects.

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...

from projects.

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.

from projects.

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.

from projects.

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.

from projects.

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.

from projects.

@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.

from projects.

@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

from projects.

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.

from projects.

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

from projects.

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?

from projects.

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).

from projects.

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....

from projects.

from projects.

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.

from projects.

@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.

from projects.

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

from projects.

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

from projects.