btcpayserver / organization

Open-organization, meetings, calendars, project management
https://btcpayserver.org
17 stars 3 forks source link

Designers Call #5 #29

Closed pavlenex closed 3 years ago

pavlenex commented 3 years ago
Date: 2021-03-25
Time: 5:00pm
Timezone: UTC
Duration: 1h
UTCTime: 2021-03-25 17:00 UTC

Agenda

  1. Quick look at the v.1.0.8.0 and related tasks @pavlenex
  2. Bootstrap V5 Migration progress, what it means for BTCPay Server Design and look at v4.6 bump. @dennisreimann @dstrukt
  3. Lightning Setup PR progress @dennisreimann
  4. Looking at discussions related. to UI/UX @dstrukt and what we can do in the next release
  5. API Icon progress @dstrukt
  6. [Dedicated past supporters page ](supporters page · Issue #12 · btcpayserver/foundation.btc…)
  7. TBD, feel free to comment below for topics that we can add to the agenda

Check your timezone

https://everytimezone.com/s/93fa3dd8

Join the call

LINK FOR CALL https://meet.jit.si/btcpayserverdesignmeeting

Calendar invite

Subscribe to the BTCPay Server calendar. More info here.

dstrukt commented 3 years ago

To add to the list (if possible):

https://github.com/btcpayserver/btcpayserver/pull/2378 -- Server settings icon

dstrukt commented 3 years ago

Further notes

Noted (if time)

Zaxounette commented 3 years ago

Designer's Call N°5 Notes. Attendees: Christoph, @dennisreimann, @dstrukt, @johnsBeharry, @pavlenex, @Zaxounette


Next release will not include any design changes, as security issues have been reported and a release fixing them is scheduled for next week (29 March to 4 April). Once the security release is out, focus will be on 1.0.8 and the design changes, either as a 3 week interval with all changes, or including a minor release with small low hanging-fruit design changes that can be shipped before the bulk 1.0.8 release.

Such a release will include the Bootstrap 5 migration and Web Authentication support (Yubikey, etc ...) as major features, for example. See roadmap for more informations.

Please note that the Web Authentification feature is currently under testing. If you wish to help, feel free to join our Mattermost chat and reach out in the Testers channel.


Bootstrap 5 migration:

BTCPay server uses a custom modified Bootstrap since 4.0 and the BTCPay themes feature. We are currently in the process of migrating to Bootstrap 5. This will add better caching on current and future themes (native or plugin added) and increase overall customizability of files related to themes, components, UI elements, etc... like buttons or alerts.

General process of customizing files is done and adding said customized files into the V5 integration is ongoing. Color testing & dark mode still being ironed out.

Automation of future version migrations is also being worked on.


Related improvements concern the overall design workflow. An objective is to use Figma for mock-ups and concepts, turn these into code in the Design repository, and finally export these Designs in the main repository. Automation of this workflow is also being worked on.

We are currently looking for feedback on the Figma mock-ups and concepts revolving around the Lightning Network setup updates. If you want to help, feel free to comment directly in the Figma, or to reach out in the UI/UX channel of out Mattermost.

A current objective of the Figma workflow is to unify pages, mock-ups and components.

Where our workflow can improve: Generally on the Figma, from a designer's standpoint on a first look: Confusing on where to start, but well labelled. Separate different front-end pages into different Figma sub-pages could be a first step into making onboarding easier and clear for future designers wishing to contribute.


Improving LN setup page: The current Lightning Wallet setup flow will be retired shortly and replaced by a new clean UI. Previously, a enormous warning left our less technical users guessing what they have to do. This will be revamped, decreasing confusion and giving even the least tech-savvy users the ability to enable a Lightning Network wallet in their BTCPay Server instance in a sleek 2-click process.


Front-end headers VS bread-crumbs: Is discussed the impacts of headers in the front-end UI vs a bread-crumb method of navigation. Labelling a store or wallet a user is in instead of bread-crumbs seems better for the current state of BTCPay Server. This improves clarity, without adding too much informations on the current screen. Bread-crumbs would also not be needed in certain areas like profiles and server settings for example.


Empty States, aka Steering the user in the right direction: Consensus is positive on these developments. The objective is to clear out all the informations when they aren't useful or if a pre-requisite is not met. This information is replaced with the empty state, prompting the user with a CTA towards a specific pre-requisite to what he is viewing. This improves clarity in user flow. Example: You need a store to create a wallet. Empty state prompts become clear.

Back-end flow should be to check if pre-requisite is present, if not, present empty state view. Guiding users where they need to be and push them to setup what they need to before being able to experience BTCPay Server fully.


It is noted that all the above are only preparations for what is to come in BTCPay Server. Namely a fancy dashboard and a new UI around the plugin system. Everyone is hyped, especially @pavlenex .

dennisreimann commented 3 years ago

Thanks @Zaxounette, your note taking foo is very strong! 💪

pavlenex commented 3 years ago

@Zaxounette you're a hero! Awesome notes!