lightning-browser-extension
lightning-browser-extension copied to clipboard
getAlby
Design Onboarding flow
Design Issue: Onboarding flow
Redesign the onboarding flow for the extension. We received feedback that the UI design can be more on brand, and that users should have more guidance on getting their firsts SATS to their wallets.
Working file
We've analysed the onboarding flow with @AnastasiaVolk and created this flowchart that showed the current flow.
Based on this flow, now we've identified issues with the password for the wallet and passcode for the extension, as well as the issue that at the end of this flow user is asked to test the flow without the balance on the wallet.
We've now reworked the flow and introduced the wireframes that would give the user to the point where he can acquire Bitcoin to his wallet.
The next steps are to design the flow with existing components and test it.
You can find the wireframes here
Onboarding UX Review
- In the chrome extension first point of contact can be improved...
- image can be improved. should include a name, our logo and words: Bitcoin Lightning and Payments
- Text should end at the first full stop. Without doubling on the Bitcoin Lightning text
- Chrome extension cover images
- Alby shouldn't have distorted outlines and should include our logo and words: Bitcoin Lightning and Payments for the web.
- Second, if not the first image should communicate that you can log in with a list of other bitcoin wallets.
- Fast payments
- Logins
- Allowances
- Payment tracking also can be improved visually
- Registration first screen. When the user is at the point where he hits "install" in the chrome store, he either already knows the benefits or is looking forward to seeing the interface. So this is a redundant page that gives no value to the user at this step.
- Your Alby Lightning wallet page
User feedback:
- For the returning user, it is unclear whether this is a login page or a registration page. The assumption is that users will create a new account when going forward.
- For new lightning users the Lightning address that looks like an email is confusing.
- Asking users to send sats to try the extension is a bad UX. The flow for the user ends in him failing to try the extension. This screen should be replaced with a welcome message on the chrome extension web view.
Designs for the new onboarding flow:
As our users are facing difficulties in understanding and following the registration flow I propose the following updates using the current design system for fast and easy implementation.
-
Divide the registration into two actions with 2 success screens. 1. Set up a password for the chrome extension 2. Add alby or not alby wallets.
-
Take users to the Chrome extension web view with a welcome banner.
All the designs with all the cases (forgetting login details, connecting other wallets and more you can find in the Figma file.
I have made UI designs that I think looks cool and can be further developed into our brand identity.
Some feedback to the latest comment:
- the graphics in the screens are cool but somehow different. Using variations of the bee as suggested in the comment before is more consistent to what we currently have
- why do we explain the user why the password is needed (screen 2) after he creates the password (screen 1)?
- how does this flow address the problem that users often set long passwords that make the usage of the extension cumbersome?
- We talk about passcode and password.
- the last screen shows the lightning address, but there is no way to create a lightning address before.
Here's a link to alby onboarding experience map based on crypto/bitcoin user novice: Figma
A lot of the same problems as identified before
