Improvements to App UX-UI flow (post-MVP)

[olympe-silve]

Description of Deliverables(s)

• [ ] INFO : request validity period
• [ ] FLOW : cancellation of a request before it's filled
• [x] FLOW : multiple concurrent requests
• [x] FLOW : if tab is closed mid-request, how to access confirmation of a successful transfer?

Feel free to add your suggestions @istankovic @palango @manuelwedler @fredo @taleldayekh Please specify if the improvement is a simple addition of information ( INFO ) or a multiple-steps UX journey for when a specific situation occurs ( FLOW )

[istankovic]

Thanks @olympe-silve for creating this! I'm wondering whether it would be better to have specific work items as separate github issues instead of list here. If they were separate, that would allow other issues (e.g. from the tech side) to link to them and make dependencies more obvious. For grouping issues one can always create an epic.

[olympe-silve]

@czepluch Here is the issue where all the UI/UX improvements are collected, so that we don't have so many various issues floating around. I'm gonna comment on the issues that you just created so they link back here.

[olympe-silve]

Small UI adjustments to consider :

• [ ] Header and footer to hug the main frame tighter
• [ ] Header with Beamer logo lower
• [ ] form : Corners of the drop-down menus to keep the same radius value on unroll
• [ ] form: inner shadows of form fields a bit blurrier
• [ ] form : "address" be get left align like the rest
• [ ] form : Token logo to the left of its name
• [ ] form : network logo to the left of its name
• [ ] form: dropdown arrow to be centered
• [ ] form: remove blue outline on hover for token amount and address

[olympe-silve]

"please keep me in the loop about which new features will be implemented for mainnet launch + in general post mainnet launch for additional features, so I can include this in the content strategy.

Reference use-case connext Most important features to include: showing address (+copy function) support redirection Link to socials + beamer website wallet disconnect function (planned already) navigation - nice to have"

[DBecane]

@olympe-silve and @GabrielBuragev as requested, here are the small changes to be done on the dApp side related to the miro: Beamer website V2

App: Clickable Beamer logo in the middle to change transfer direction in a click: A->B, B->A App: -> Logo + Footer -> clickable link redirecting to Beamer website App: Recurring user complaints about background color + color of the app fields. Suggestion: Light/dark modes to have more contrast. Or shade around app fields to add more depth and contrast between background and app fields.

This has a lower prio than the website changes.

[istankovic]

When it comes to colors, or really, the entire UI/UX, I recommend the Web Content Accessibility Guidelines. If we want to make our site and the app accessible to the largest possible group of people, the standard does a pretty good job of explaining what to do and what to avoid.

[olympe-silve]

When it comes to colors, or really, the entire UI/UX, I recommend the Web Content Accessibility Guidelines. If we want to make our site and the app accessible to the largest possible group of people, the standard does a pretty good job of explaining what to do and what to avoid.

I fully endorse the use of the WCAG, however, it is not true that the entire UI/UX needs to be reviewed to comply with them. Users want more contrast, then we give them more contrast, but it doesn't make the app hard to use for people with disabilities and it is really low prio. Aesthetic preferences and accessibility are two different things.

[GabrielBuragev]

@olympe-silve Can we create an epic out of this issue and create sub issues so we can prioritize and work on them? I will need you to summarize all the remaining improvements that need to be done in order to close this issue. I will transform it to an epic and create sub-issues once you provide me with the list. Thanks!