Is your feature request related to a problem? Please describe.

We need to establish a consistent flow for participants when performing voting actions that must follow specific rules or conditions. In Decidim, this applies to three components: Budgets, Proposals, and, in the near future, the Elections component.

So far, we’ve experimented with various UI improvements to enhance usability for complex tasks, such as keeping CTAs and progress bars fixed. However, these changes are still not enough—too many UI elements can cause distraction or confusion about the action the participant is performing.

Describe the solution you'd like

One hypothesis we want to test is the introduction of a dedicated interface for rule-based voting, designed to minimize unnecessary UI elements and clearly communicate voting rules to participants.

To start, we need an entry point (via a button or link) to this new interface, which we’ll call “Focus Mode”, along with an option to exit back to the main interface.

Once inside Focus Mode, participants should only see the resources they need to vote on, the applicable voting rules (which should update dynamically), and any necessary navigation or filtering elements, depending on the component. No header, footer or other UI elements that can serve as a distraction.

This issue introduce Focus Mode only for Budgets, in the future we will add it to other components.

How it works?

• The list of projects won't show the add button.
• Once, I click on the “Start voting” CTA, then I’m prompted with the voting rules and I can proceed adding projects.
• Once a participant have completed the voting task, they can exit the focus mode.
• If a participant ant to exit the focus mode without completing the voting task, it will be rendered with a modal.

How is this combined with the ephemeral verification feature?

• If Ephemeral Verification is enabled for a budget component, it will work exactly the same as for non-ephemeral. You can see the Ephemeral Focus Mode flow
• The main difference with registered participants is that ephemeral participants would be forced to close their temporary session if they exit the focus mode. Registered participants will remain logged in if they exit the focus mode.

UI Changes

• In mobile, we are moving the progress bar down the screen.
• We are adding a new Start Voting CTA
• In mobile, introducing a back button on focus mode when accessing a project page.

Describe alternatives you've considered

The use of Ephemeral verification.

Mock-ups / Prototype

Desktop - Flow Ephemeral
Mobile - Flow Ephemeral
Desktop - Registered participant
Mobile - Registered participant

Additional context

How do other platform handle this voting processes?

Participatory budgeting
Which option do you prefer

Does this issue could impact on users private data?

No.

Acceptance criteria

Entering focus mode

• Given I’m a participant that wants to vote in a budget
  When I access the list of projects,
  Then I only see one CTA, the “Start Voting”
• Given I’m a registered participant
  When I click on the “Start Voting” CTA
  Then I enter into the Focus Mode layout
  And then, I’m promptered with the voting rules bottom sheet expanded.

Adding projects

• Given I’m in the Focus Mode layout
  When I close the bottom sheet
  Then I can start adding projects to the budget
• Given I’m in the Focus Mode layout
  When I access to a specific project page
  Then the sticky CTA allows me to add the project
  And then I can click on the back button to go back to the list.

Entering focus mode depending on permissions

• Given I’m a non-registered participant when ephemeral verification is enabled
  When I click on the “Start Voting” CTA
  Then I’m prompted with the verification form and I completed it
  Then I enter into the Focus Mode layout.
  […]
• Given I’m a registered participant when a verification is enabled
  When I click on the “Start Voting” CTA
  Then I’m prompted with the verification form and I completed it
  Then I enter into the Focus Mode layout.
  […]
• Given I’m a visitor
  When I click on the “Start Voting” CTA
  Then I’m prompted with the log-in modal
  […]

Exiting focus mode

• Given I’m in the Focus Mode
  When I have remaining votes and I try to exit
  Then I’m prompted with the remaining votes modal
• Given I’m an ephemeral participant in the Fous Mode
  When I have completed all my votes
  Then I’m prompted with “Before you leaving” modal