Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement new-user-onboarding and new UI design #47

Closed
4 tasks
chimp1984 opened this issue Jan 28, 2021 · 21 comments
Closed
4 tasks

Implement new-user-onboarding and new UI design #47

chimp1984 opened this issue Jan 28, 2021 · 21 comments
Labels
a:proposal bisq.wiki/Project_management#Proposal needs:triage bisq.wiki/Project_management#Triage

Comments

@chimp1984
Copy link

chimp1984 commented Jan 28, 2021

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

Description

@pedromvpg created a while back a great new design including new-user-onboarding:
https://xd.adobe.com/view/a83c2327-4730-4ec2-8938-e318b2749588-fd6f/ (not a finished version but should give a good impression)

For too long we did not manage to get that implemented. To boost that I contacted a few JavaFX experts to see if we can find a UI developer to get that done as well to have a long term committed dedicated UI expert in our team. I had a call now with a promising candidate and I would like to start an iterative process to get the work started. He is available from march on, so we should get our parts ready over the next weeks.

As the scope of the whole project is rather large and hard to estimate I cannot provide a meaningful estimation of costs.
It requires more discussion how we can manage and structure the work so that it meets the goal to get deliveries in an iterative process. My below suggestings are meant to get the ball rolling and any improvements are very welcome!

The UI developer is new to Bitcoin and the DAO model is a bit too new for him to feel comfortable with. To not make that a barrier I will offer to prefund his work so he will work as sub-contractor for myself and I will do the compensation requests for him (if anybody else want to play that role please get in touch). Mid/long term he should fade into the normal DAO contributor model. I also made clear that we are looking for a long term commitment and even if there might not be enough work for a fulltime UI developer that he stay committed for at least 10-20 hours so we can rely on a longterm UI/UX expert.

Rationale

New users get a bit lost with the concept of Bisq and the involved complexity. To make it easier for new users @pedromvpg created a new-user-onboarding design where users are guided throught the first steps.
The larger redesign improves the look and feel of the app and improves also the trade related areas, so it should lead to be better user experience for traders.
By applying a new design we intend also to rewrite the UI code base, as that got too much technical debt over time. Also with the API we have a secondary "client" and some code should be moved our from the desktop module to a new presentation module which can be shared by the API code base.

Criteria for delivery

We will approach an iterative delivery plan. Goal is to get short term deliveries (about 1 month) which can be rolled out. See below for more details.

Measures of success

Hard to measure as development of revenue has many factors including external ones (BTC bull market vs. bear market). We could make some survey to find out if users liked the changes.

Risks

There are several risks which should be limited by the iterative rollout plan. There is the risk of introducing new bugs and that the project gets stalled for whatever reason. Below I suggest some alternative paths in case the integration effort or code rewrite effort would be too high.

Tasks

  • Get onboarding design ready for implementation
  • Evaluate suggested iterative delivery plan
  • Figure out how many screen would require adoption with left navigation layout and how to solve the issues
  • Get estimations for first tasks from UI dev

Estimates

It is very hard to estimate but I think it wil be in the range of 30000 - 60000 USD. If we get to the higher limit we need to adjust our delivery plan (e.g. reduce scope of code re-write, disitribute some integration work to existing Bisq devs,...)

Delivery plan

To limit risks I suggest following delivery plan.

Optional research project: Performance test app to see if FXML should be used or not

From my experince FXML has some overhead specially for the XML parsing which leads to some noticable delay. If the UI dev has strong arguments for using FXML I would like to see a performance comparision using a test project where the same UI screens are implemented in FXML and in plain Java. If it turns out the performance difference is not critical we can use FXML otherwise not. There should be several views in a similar conext as used in Bisq (e.g. tabs) and some heavy content with different components to get some realistic simulation. I think parsing results are cached so difference might be visible only at first screen changes.
As stated this is optional if the UI dev prefers FXML to be sure to not suffer performance loss. If we decide against FXML I would prefer to get rid completely of FXML and not even use it for the base containers as it is used now.
As all the following work depends on that decision to use FXML or not we should do that in the very beginning.

Click dummy for new-user-onboarding

This is a JavaFx standalone application implementing the design and styling (light and dark mode) with all user interactivity using mock data (random data similar to real Bisq data). There is no domain knowledge about Bisq and the Bisq code base needed. One open challenge is how we deal with the payment method screens. There are a lot of payment methods. An area which will need a bit more discussion how to deal with it.

Integrate new-user-onboarding

Integrate the click dummy for new-user-onboarding into Bisq. Once integrated this will be released as the first user facing delivery.

Click dummy for new menu structure and layout

Like above an independent app implementing the design in dark mode style (light mode is not included in first version but should be considered for later). The content area can be filled with placeholders.

Integrate new menu structure and layout

Integrate the new menu structure and layout into Bisq. Reuse or create a new persistable navigation framework.
Apply all content into the new content container. This will likely require some adjustment as the available width will be smaller with the new design as the menu is on the left side. In case that some views cannot be adjusted without degrading usability too much we need to consider to implement those views with the new design as well. This package is a bit hard to estimate and delivery time will depend on the complexity and effort to get an acceptable solution without getting too far with implemting the new designs of the other content views.
Once an acceptable solution is implemented it gets rolled out in a release.

Click dummy for create-offer and take-offer views

Same as above, independent design-only implementation. We should get a bit deeper here into user interaction and add the validation model as well. Currently we use a dynamic validation where on focus out the validation gets triggered. This has some issues as it is not always obvious to the user that focus out will re-evaluate validation state. Also there are quite some complexity in those views which lead to some weird behaviour/bugs. A more simple model would be to triggger validation only when clicking the action button. Has to be discussed and evaluated which validation concept we will use.

Integrate create-offer and take-offer views

Integrate create-offer and take-offer views into Bisq. This will be one of the more challenging tasks as that area carries most of the more complex domain logic. It also requires to move much of the validation, formatting, calculation code to a new presentation module so it is available for re-use for API or potential other new applications (e.g. mobile?).

Continue with all other views

If a click dummy is needed for the remaining views can be decided later. Goal is to get one view completed and then move to the next one. At each release we include what is ready to get shipped. We should start with the views which the traders use most (wallet, portfolio, market,...). As the DAO is a kind of sub-application we can leave that to the end. Maybe the new design will find also a different solution to not include the DAO as main menue item but as something different (no concrete idea yet, but I think it is not perfect as it is now).

Misc

There are some other areas like loading screen, windows/popups, notifications,... which need to be considered as well.

With that iterative deployment plan we can limit the risks in case the project gets stalled for whatever reason to have at least part of our goal delivered. Alternatively if it turns out the effort for integration and/or effort for rewrite is too high we could limit the tasks for the UI dev to implementing the click dummies only and an existing Bisq dev who is already familiar with the code base can work on the integration. Code rewrite can be considered optional in that scenario as well (though it is a clear goal).

Team

As the new UI dev is new to Bitcoin and to Bisq (as well as trading domain) we need some domain experts to guide the project.
It would be great if @pedromvpg and @ripcurlx can be a main lead for getting the UX right.
If @pazza83 would be available as trade domain expert would be great as well.
I can be available for dev related support and dev onboarding.

@chimp1984 chimp1984 added a:proposal bisq.wiki/Project_management#Proposal needs:triage bisq.wiki/Project_management#Triage labels Jan 28, 2021
@pedromvpg
Copy link
Member

Thanks for the great breakdown @chimp1984!
Let's do it!

@ripcurlx
Copy link

ripcurlx commented Feb 3, 2021

@chimp1984 I'm happy to help out on the conceptual side. I don't have enough resources at hand for actual development, but I can try to assist the UI dev if questions are popping up.

@pazza83
Copy link

pazza83 commented Feb 4, 2021

Linking this in here as it would be good to include as part of the UI redesign Add featured payment methods fields

@pazza83
Copy link

pazza83 commented Feb 4, 2021

I wonder if any elements from https://mempool.space/ could be included in the new UI design.

I always find myself using this frequently when trading on Bisq. Mainly to look at the following:

  • Block activity
  • No of Unconfirmed TXs
  • High priority fees estimator

It would be good if on the Bisq client it would show users:

  • Time since last block confirmed
  • Average sat/vB of last block confirmed
  • Average sat/vB of next block
  • High priority fees estimator
  • Maker fee estimator
  • Taker fee estimator
  • No of Unconfirmed TXs in mempool

The above could be included in a Mempool monitor section. Some info could even be included in the header or footer on relevant pages (especially make / take offer page)

@pazza83
Copy link

pazza83 commented Feb 4, 2021

Currently 75% of trade fees are paid with BTC.

The goal is to get closer to 75% of trade fees paid with BSQ.

Maybe the new GUI could be developed to promote / onboard users to using BSQ for trade fees.

See comment: bisq-network/proposals#305 (comment)

@pazza83
Copy link

pazza83 commented Feb 6, 2021

It would also be good if the new UI made it easier for new users to purchase BSQ, ties in with comment above.

See Improve BSQ account creation & purchase process #5046

@pedromvpg
Copy link
Member

Hey! Do we have a developer secured. @chimp1984 should we push for a call?
He never ended-up reaching out.

@chimp1984
Copy link
Author

@pedromvpg He will be available from march on, he said is still quite busy with his previous project.

@ripcurlx
Copy link

Hey! Do we have a developer secured. @chimp1984 should we push for a call?
He never ended-up reaching out.

I think what we can/should do until then is to have a complete click-prototype of the new on-boarding which we have tested already with some real users. WDYT?

@chimp1984
Copy link
Author

Hey! Do we have a developer secured. @chimp1984 should we push for a call?
He never ended-up reaching out.

I think what we can/should do until then is to have a complete click-prototype of the new on-boarding which we have tested already with some real users. WDYT?

Yes, would be good that we are completed once he is ready so he can start implementing it. He has no Bitcoin experience so we cannot expect much domain related UX input from his side.

@Conza88
Copy link

Conza88 commented Feb 12, 2021

Fantastic work. I added comments to Adobe presentation fyi. One summary:

"General comment: this walkthrough for onboarding is epic. And major improvement for anyone new.

I wonder though, the old hands, active users - way to give the option of 'advanced'? Where it just cuts through all the steps and as it currently is, they can quickly fill out the offers etc. on one page?

Because TBH, I would not be pleased on having to go through 5 steps etc. when I already know it all, and can just do it all on one page. But maybe thats just me?"

@ripcurlx
Copy link

Fantastic work. I added comments to Adobe presentation fyi. One summary:

"General comment: this walkthrough for onboarding is epic. And major improvement for anyone new.

I wonder though, the old hands, active users - way to give the option of 'advanced'? Where it just cuts through all the steps and as it currently is, they can quickly fill out the offers etc. on one page?

Because TBH, I would not be pleased on having to go through 5 steps etc. when I already know it all, and can just do it all on one page. But maybe thats just me?"

As far as I remember the prototype had a skip button on each screen.

@chimp1984
Copy link
Author

To not make that a barrier I will offer to prefund his work so he will work as sub-contractor for myself and I will do the compensation requests for him (if anybody else want to play that role please get in touch)

As I am in the process to fade out of Bisq I cannot take that role anymore. I hope someone else or a group of others could step in. It will also require some technical lead for the project.

@pazza83
Copy link

pazza83 commented Feb 19, 2021

@Mycelial1 I saw your now deleted comment about how to create more interest in BSQ generally. I liked your design ideas. Maybe you could drop them in this thread if you feel it is appropriate?

@pazza83
Copy link

pazza83 commented Feb 19, 2021

To not make that a barrier I will offer to prefund his work so he will work as sub-contractor for myself and I will do the compensation requests for him (if anybody else want to play that role please get in touch)

As I am in the process to fade out of Bisq I cannot take that role anymore. I hope someone else or a group of others could step in. It will also require some technical lead for the project.

Happy to get involved in any discussions about how this could be achieved. Having contributors paid directly in BSQ is the preferable option but it might be good to consider alternatives if / when this is not possible.

I think there are a few different way the DAO could be used to fund project / contributions etc apart from BSQ. Don't think that this thread is the best place for it though. Happy to put together some ideas for discussion about the positives and negatives of such as system if anyone thinks it would be worth while?

@Conza88
Copy link

Conza88 commented Feb 20, 2021

Fantastic work. I added comments to Adobe presentation fyi. One summary:
"General comment: this walkthrough for onboarding is epic. And major improvement for anyone new.
I wonder though, the old hands, active users - way to give the option of 'advanced'? Where it just cuts through all the steps and as it currently is, they can quickly fill out the offers etc. on one page?
Because TBH, I would not be pleased on having to go through 5 steps etc. when I already know it all, and can just do it all on one page. But maybe thats just me?"

As far as I remember the prototype had a skip button on each screen.

Is that a skip it all entirely, and it goes straight back to current advanced interface?

An option to never show again would be ace imo.

@BtcContributor
Copy link

Any update from the UI dev?
Is there someone that have his contact apart from @chimp1984 who will be leaving soon?

@Conza88
Copy link

Conza88 commented Mar 15, 2021

Great question. Sooner the better this kicks off.

@ripcurlx
Copy link

Any update from the UI dev?
Is there someone that have his contact apart from @chimp1984 who will be leaving soon?

The contact is the one thing. But we would need following roles to be filled before it makes sense to contact the UI dev:

  • Donor who put's down the BTC required in a multi-sig, similar to what we had for the SegWit project (UI dev is new to crypto and even accepting and holding BTC is already the first challenge)
  • An existing dev contributor who can coach the new UI dev
  • Someone who leads the project also from a UX perspective.

I think the first thing that should and could be finalized is the UI click prototype together with @pedromvpg.
After that I think we should think about which API endpoints would be necessary for the UI dev to implement this tasks and add them to the interface.

Starting from that a new senior JavaFX dev could build the onboarding more independent from the current UI code style, which would enable the dev to be more efficient from the start.

@ripcurlx
Copy link

And it would help to slowly build up and test the API.

@chimp1984
Copy link
Author

Superseeded by #49

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a:proposal bisq.wiki/Project_management#Proposal needs:triage bisq.wiki/Project_management#Triage
Projects
None yet
Development

No branches or pull requests

6 participants