coracle/flotilla
1
6
Fork 23
Code Issues 42 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

Improve the sign-up experience with better guidance and validation #217

New Issue
Open
opened 2026-04-17 03:32:49 +00:00 by 0xNaman · 8 comments
0xNaman commented 2026-04-17 03:32:49 +00:00
Copy Link
Copy Source

Description

I went through the sign-up flow a few times (both email and key-based) and ran some informal usability tests with people who aren't familiar with nostr. A few things kept tripping people up.

1. No sense of where you are in the process

The sign-up has 3-4 screens depending on the path but there's no progress indicator. Few people asked "how much more is there?" especially during the email flow where you're waiting for a confirmation code. A simple step counter or progress bar would help a lot here.

2. Password requirement is a surprise

The 12-character minimum only shows up as a toast after you hit Continue. I think it should be visible next to the field from the start.

image.png

3. Email field missing type = email

Email field missing type="email". Browser won't catch typos like a missing @ or extra spaces before submitting.

4. Login errors are vague

"Sorry, we were unable to log you in". That could be wrong password, wrong email, or a network issue. Users can't tell what to fix.

image.png

5. Nostr concepts can be overwhelming for new users

The first screen itself mentions "cryptographic key pairs" right away. For people coming from Discord or Slack, that's a wall.
image.png

Who this affects

Casual users arriving through invite links who are the content creator and bitcoin project communities Flotilla is targeting. If sign-up feels confusing, they leave.

Suggested improvements

  • Step indicator ("Step 1 of 4") in the sign-up modals.
  • Show password requirements inline, not just on error
  • More specific error messages
  • Ease into nostr concepts gradually instead of upfront

Happy to wireframe these and work on a PR if interested @hodlbod

# Description I went through the sign-up flow a few times (both email and key-based) and ran some informal usability tests with people who aren't familiar with nostr. A few things kept tripping people up. ## 1. No sense of where you are in the process The sign-up has 3-4 screens depending on the path but there's no progress indicator. Few people asked "how much more is there?" especially during the email flow where you're waiting for a confirmation code. A simple step counter or progress bar would help a lot here. ## 2. Password requirement is a surprise The 12-character minimum only shows up as a toast after you hit Continue. I think it should be visible next to the field from the start. <img width="460" alt="image.png" src="attachments/d718763c-92e3-4eb4-bbdf-17cfb3f148ff"> ## 3. Email field missing `type = email` Email field missing type="email". Browser won't catch typos like a missing @ or extra spaces before submitting. ## 4. Login errors are vague "Sorry, we were unable to log you in". That could be wrong password, wrong email, or a network issue. Users can't tell what to fix. <img width="385" alt="image.png" src="attachments/327a56e6-105c-4122-9f8a-a552be859d4c"> ## 5. Nostr concepts can be overwhelming for new users The first screen itself mentions "cryptographic key pairs" right away. For people coming from Discord or Slack, that's a wall. <img width="576" alt="image.png" src="attachments/7b151591-8e12-4e21-83fb-e463641e6f7f"> # Who this affects Casual users arriving through invite links who are the content creator and bitcoin project communities Flotilla is targeting. If sign-up feels confusing, they leave. # Suggested improvements - Step indicator ("Step 1 of 4") in the sign-up modals. - Show password requirements inline, not just on error - More specific error messages - Ease into nostr concepts gradually instead of upfront Happy to wireframe these and work on a PR if interested @hodlbod
image.png
102 KiB
image.png
24 KiB
image.png
18 KiB
0xNaman added the usability label 2026-04-17 03:33:10 +00:00
0xNaman self-assigned this 2026-04-17 03:33:23 +00:00
hodlbod commented 2026-04-17 15:21:39 +00:00
Owner
Copy Link
Copy Source

Thanks, I've added issues for 1-4, for item number 5 would you be willing to mock up a change in this issue?

Thanks, I've added issues for 1-4, for item number 5 would you be willing to mock up a change in this issue?
👍 1
hodlbod added the design label 2026-04-17 15:21:54 +00:00
0xNaman commented 2026-04-17 15:40:04 +00:00
Author
Copy Link
Copy Source

Yes I am already working on this @hodlbod 👍

Yes I am already working on this @hodlbod 👍
0xNaman commented 2026-04-18 07:05:15 +00:00
Author
Copy Link
Copy Source

Hi @hodlbod, Swapped the heading to "Join Flotilla" and added a separate "What are key pairs?" screen for when that concept actually comes up. Does this feel right?

Hi @hodlbod, Swapped the heading to "Join Flotilla" and added a separate "What are key pairs?" screen for when that concept actually comes up. Does this feel right?
Signup Flot.png
30 KiB
Sign up flot 2.png
45 KiB
Signup Flot.png Sign up flot 2.png
hodlbod commented 2026-04-18 13:22:53 +00:00
Owner
Copy Link
Copy Source

I think that subtitle should probably not mention keypairs or the protocol at all

I think that subtitle should probably not mention keypairs or the protocol at all
0xNaman commented 2026-04-19 05:52:50 +00:00
Author
Copy Link
Copy Source

Does this copy make sense @hodlbod ? Does not mention keypairs or protocol while also preserving the meaning.

Does this copy make sense @hodlbod ? Does not mention keypairs or protocol while also preserving the meaning.
Room flot 4.png
25 KiB
Room flot 4.png
hodlbod commented 2026-04-20 16:32:16 +00:00
Owner
Copy Link
Copy Source

Let's go with "Censorship resistant digital spaces for communities."

Let's go with "Censorship resistant digital spaces for communities."
0xNaman commented 2026-04-21 03:05:19 +00:00
Author
Copy Link
Copy Source

Thanks that does reflect flotilla better. Going with that line, here's what I'd propose for the modal copy:

Flotilla signup.png

Keeps the tagline as the hero and reframes the subline around the sign-up action. Happy to open a PR with this change if you're good with the wording.

Thanks that does reflect flotilla better. Going with that line, here's what I'd propose for the modal copy: ![Flotilla signup.png](/attachments/fd70351b-714f-4817-9467-95f735379842) Keeps the tagline as the hero and reframes the subline around the sign-up action. Happy to open a PR with this change if you're good with the wording.
Flotilla signup.png
28 KiB
hodlbod commented 2026-04-21 13:10:44 +00:00
Owner
Copy Link
Copy Source

Yep, looks good

Yep, looks good
👍 1
hodlbod added dev and removed designusability labels 2026-04-21 13:10:50 +00:00
0xNaman removed their assignment 2026-04-23 01:06:13 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label dev
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#217
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?