[FEATURE]: Improve UX flow for email-token signature process (clear guidance + step-by-step flow)

[yharroch]

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

The current email-token signing workflow is not intuitive for external signers.

When a signer clicks the signing link, they are prompted to enter their email address again to receive a verification code, but:

• There is no clear explanation of why this is required.
• The user does not understand what is happening.
• The process feels circular and confusing.
• There is no visual indication of progress (step 1 / step 2 / step 3).
• This creates friction and confusion, especially for non-technical users.

Describe the solution you'd like

1️⃣ Add a progress indicator
Example:

• Step 1 of 3 – Email verification
• Step 2 of 3 – Code validation
• Step 3 of 3 – Signature
  This would drastically improve user confidence.

2️⃣ Add explanatory text
Users currently do not understand:

• Why email is requested again
• Why a code is required
• Whether this is normal or an error
  Adding contextual explanation would reduce support requests.

3️⃣ Avoid reopening modal loops
After code validation, the interface should transition clearly to the final signature state without reopening the verification modal.

---

Expected behavior (Suggested UX improvement)

Proposed explicit step-by-step flow:

Step 1 – Identity verification

• Display clear message:

To sign this document, we must verify your identity.
Enter your email address to receive a verification code.

• Button : Send verification code”

Step 2 – Code validation

• Display clear message:

A verification code has been sent to: example@email.com
Please enter the 6-digit code below.

• Button : “Validate code”

Step 3 – Signature confirmation

• Display clear message:

Your identity has been verified.
You can now sign the document.

• Button : “Sign document”

Describe alternatives you've considered

No response

Additional context

No response

[vitormattos]

Hi @yharroch!

As a proof of concept, I've implemented the UX improvements you suggested. Here's how it looks now:

Screencast_20260219_162844.webm

The flow now shows:

• Clear progress indicator (Step 1 of 3, Step 2 of 3, Step 3 of 3)
• Explanatory text at each step
• Better button labels

Does this resolve the issue?

PS: LibreSign is open-source and relies on community support. If you find this useful, please consider sponsoring the project! 💚

[yharroch]

Yes, this is much better — thanks for developing this new feature.
It will be clear for new users 🙂

This step-by-step flow with detailed explanations is really good.

Could you just add this information:
“Enter the same email address that received the signature request.”

For example:

To verify your identity, enter the same email address where you received the signature request.
We will send a verification code to this address.

For the second step, I would suggest something more concise and simpler, such as:

“Check your email and enter the 6-digit verification code.”

What do you think?

On my side, this is the last milestone I'm waiting for before sending this kind of signature to customers :)

[vitormattos]

@yharroch could you look the latest changes at #6983 ?

[vitormattos]

We decided to prioritize this because it really improves the UX, especially for new users. Will come into the next release.

Thanks a lot for the detailed feedback and for helping us make LibreSign better.