As requested here on nostr this is a review of the onboarding.
The overall process is excellent, kudos.
It's great that if the app is closed during onboarding, the next time it starts again from the correct step.
I would also add a button on the footer at every step to cancel the procedure; this action should wipe all the saved data, with a confirmation dialog.
Login flow
The buttons are too close, adding a little space would improve accessibility and make the UI prettier.
The "Create new key" has low contrast, I would change the background to white or a color.
I would add somewhere a link/button to a resource that explains Nostr in depth.
I would be more descriptive with the texts: "Import your Nostr key" / "Insert your nostr private key, in nsec or hex format".
The user should be able to go back to the first screen (maybe in the next steps too).
If the user inserts a formally invalid key, the button label is wrongly set to "Creating.." and the spinner keeps running.
I would use a yellow/orange color for the error message, it is more visible.
It's very important in this context to explain the password use and point out that it is not related to the "nostr account". Good!
I would focus the input so the user could immediately type.
When the form is submitted, the button text changes to "Creating..", I would use "Securing your account...".
Here I would add (actually integrate, because you have something similar later) a really important step: try to fetch the account relays (NIP-95) and if none are found, optionally let the user insert one or more relays. This helps find the profile and improve the next steps.
If you don't find any metadata information, I would show a warning: "I'm unable to find any information about this nostr account, please double-check the npub before continuing.".
If a metadata event is found, I would change the title to "Account found!" and I would show the picture / infos (add the bio, ln address, etc) bigger.
Add #nostrdesign ;)
Here I would show first the user relays fetched previously, then some suggestions: followed relays (like now), and if this selection is empty, a preset of 2/3 well-known relays. It would be nice to let him add new relays too.
I would avoid "Skip using Lume's default relays" without letting the user know what they are.
The user should not be able to go on without selecting at least 1 relay.
The informative note about the relay is perfect, the hover on the link should be a "pointer" (hand).
New account flow
This is a really important step for the newcomers, we need to keep things really clear and secure.
I would update the title in "This is your new Nostr account" and move the descriptive text below the title; the text should explain why there are two keys (strings) and which one should be saved and kept secret (the nsec of course), while the public one should be saved for convenience but is restorable from the private one. The user has to understand that the keypair does not work like the username/password paradigm, here we have just one private key that rules the account.
It is ok to hide the nsec, but this can create some confusion because the npub is more visibile and the messages (title and button) talk about a "key" without point out which one.
I would show the private key first, hidden but showing the start "nsec" string, with a light yellow background; on the top right of the input put a "Copy key" link.
Below let's show the public key.
Then put the "Download the key" button, white background to improve readability; the user should be able to choose the location.
Then add a checkbox: [ ] "I confirm I have saved my private key in a secure place".
If the user downloaded the key the checkbox is auto-checked.
Finally, put a simple "Continue" button.
For the password step, see the Login flow.
I would title this "Personalize your Nostr profile".
At the bottom I would add descriptive text explaining that the profile, including name, can be updated at any time.
The name input should have the focus.
Below the + sign in the banner area add something descriptive, ex: "Add a banner image".
I would size up the profile image (that is more important than the banner one).
Warning: the upload is not working for me.
In the descriptive text I would add that you can search for any contact later.
Add yourself in the first position with the highlight label "Lume developer"; you deserve it, and users are interested in following the developers related to the tools they use. Then also show my account, hahaha.
For the tags step, see the Login flow.
For the relays step, see the Login flow.
General UI/UX suggestions:
The fonts should be a little bigger to improve readability.
The buttons should be disabled (gray) until the form is filled;
When a button is locked with a spinner it should not have a hover effect;
🧡 Are you working on an open-source project that needs some design help? Want to improve the UX of your nostr app?
💜 Post on nostr using #nostrdesign to summon help or reach out to [email protected]
🧡 https://opensats.org/blog/announcing-nostr-design
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent