Review onboarding drafts

[jasperjansz]

Hey all,

Looking for feedback and ideas on the latest onboarding designs.

There are two onboarding flows: one for if you go through an app and one for if you download it directly. For either I added the option to put the secret key step back in there like we discussed. There are also some different options for showing the onboarding panel in the small view, which previously took up a lot of space.

Another idea is showing the account value and making the active account less prominent. The idea behind is that most use will likely be speculation, users won't have a name to start, and that the active account is less important than the value of said account.

Context for giving feedback: We're trying to get users to value (apps) ASAP, but not so fast that they won't have what they need to be successful. Are these designs the most effective way of accomplishing that?

The big hole to me seems to be getting STX. I'll draft a best-case scenario of what onboarding looks like if we have a way for users to get STX quickly with no KYC requirements.

[kyranjamie]

Good work Jasper.

I like the onboarding grid most in the extension pop up too, it's a nice overview. Though could the actions still be in the same page? Where, rather than going to a new page, it just scrolls you down to the part of the page where these actions are. Scrolling is so much easier than a series of navigational mouse clicks. And atm some actions take so many clicks.

More warnings ⚠️

I have concerns with the "save your key later" approach. It enables people to so easily receive cryptocurrency before they've saved their key. That's a dangerous thing to allow that, in the worse case, could result in people losing money forever 💸

I'd be a lot more comfortable if we did more in the way of warnings. Absolutely massive, ugly warnings.

What if there were grades of warnings? Warning level 1. oh please won't you save your key... Warning level 3, no ƒurther actions possible until you save your key. If you copy your address/view receive modal it increments warning level. If you have funds, level 3.

Set password screen

I find this screen quite jarring. What am I entering a password for? Is it important? Should I use my regular shit password? Should I use my password manager?

We should avoid ever landing a user on a screen this bare, with this little instruction, especially as the result of the initial CTA action of Create a stacks account.

Further, if we're allowing people to skip the save key step, it's now more crucial that the password is entered correctly, as this is a barrier between the user and their key. Confirm password step with progressive reveal?

Back up Secret Key screen

I'd like more guidance here. How do I safely save this secret key? Isn't it too easy to just click I've saved it the big blue CTA action?

Writing this down on paper is a legit safe way of backing up the key. Yet, centred aligned words in paragraph format is way harder than numbered table of words. Can we have another view for this case?

[pgray-hiro]

One method of ensuring that the user has backed up their private key I have seen implemented in other crypto wallets is to have the next screen be a quiz on 3-4 randomly selected words within the private key. So the user might click I've saved it, then be presented with a screen that asks "What's the 7th word in the key?", and "What's the 4th word in the key". It's an annoying but effective nag in my opinion.

Just my $0.02. Overall I love the onboarding designs.

[agraebe]

the xverse wallet does something similar. they check the order of the words

[fbwoolf]

I think Kyran had some really good feedback. I think understanding public/private keys in crypto is hard for a lot of people. I wonder if we could do a fun explainer video that can popup from the page?

I agree on the Set a password screen ...it is a bit hard to understand why all of these steps are required (and realizing that if the ext is uninstalled/reinstalled a new password has to be set again).

I like the direction of switching to the $ amount at the top of the popup. I am wondering if there should be some indication that there is a dropdown there or the ability to copy the address?

[markmhendrickson]

This introductory screen upon install is great for direct installs but I wonder whether it'll be a bit jarring for app-based installs since the user presumably wants to go straight back to using the app vs. exploring the world of Stacks:

Can we customize this screen for app-based installs so it's more like "Let's get you started to use [APP NAME]!"?

I agree with the above feedback around how we could add context for why the user is setting a password (and how isn't recoverable, is just used for local security, etc), especially since we'll introduce a Secret Key later:

I expect this will be a bit jarring for new users to both the app and Stacks in general, since the tone feels weighted towards those already in the know:

Perhaps tweaking the CTAs here from nouns (e.g. "Hiro Wallet") to imperatives (e.g. "Install or connect Hiro Wallet") could help. As could tweaking the header: "Connect to Swapr with Stacks wallet" instead of "Connect your wallet", which implies the user already has one.

In general, we don't specify here that these are Stacks wallets, which seems necessary especially if a user has encountered (crypto) wallets elsewhere already. Obviously real-estate is tight here, but at least a "What's a Stacks wallet?" could help.

Generally I think we ought to hit the user over the head about their Secret Key backup at the point in which they deposit STX (and otherwise keep it out of critical e.g. onboarding flows). E.g. we could request browser notifications permission and send them one upon first STX receipt ("20 STX have been deposited. ⚠️ Secure your account so you don't lose them!"). And we could plaster this message on the "Receipt" modal whenever the user views it before completing the backup flow.

I'd love to explore further how we could use all this real estate upon initialization:

It seems like a great opportunity to display the "next" steps in more of a full-screen way instead of just aligning them to the right.

To push this concept further, could the tabs (balance and activity) get merged informationally with the "next steps"?

It seems like "Fund your account" could be integrated into "Balances" somehow. We could add an "Apps" tab that pulls an ecosystem API for showing apps you have or haven't authenticated yet (showing the former upfront with an indication of that). And "Find your name" could integrate into a new "Usernames" tab? Since they're essentially like NFTs. Update: Perhaps not possible since we can't have multiple usernames per address.

The one that doesn't really fit naturally is the "Save your account" section, but that could perhaps jump out even better as a top banner or something that screams a bit more until you've completed it.

I also love the new global app nav with your currently selected account (with username and address preview as switcher) as well as the new home screen total value header.

This is looking great generally!

[jasperjansz]

An even more integrated onboarding like you mentioned could be a good approach — will mock that one up too so we can compare. Thanks!

[markmhendrickson]

cc @dantrevino @friedger @yknl @radicleart @HariniRajan @wilsonbright @philipdesmedt @psq @whoabuddy @pradel @paradigma-cl @MarvinJanssen @hstove @jeffdomke @owenstrevor

We'd love to get your first impressions of these new designs for the Stacks Wallet as well!

(and please cc any other active app developers I'm missing here and could be interested 🙏)

[owenstrevor]

I really like the Metamask onboarding flow, especially the interactive video explaining what to do with secret keys.

[timstackblock]

I think the overall design is great, its clean and easy to navigate. There were 2 points that stood out to me that I felt strongly about.

1. WITH OPTIONAL SECRET KEY STEP

I understand the need to make onboarding as quick as possible to get people into the wallet and to show as little screens as possible. But skipping the secret key screen and showing it later might cause some confusion. It reminds me of the influx in support tickets from people using the legacy wallet stating they never received their secret key. As long as we can avoid that confusion we should be ok. Since the screen is for security purposes and is fairly common in most wallets I don't think people will be bothered by it.

2)SHOWING VALUE INSTEAD ACCOUNT DETAILS

I like the new design if I had the choice I would default to showing the first 4 or 5 digits of the address and last 4 or 5 digits of the address when displaying the address consistently through out the wallet. I personally recognize most of my addresses by the last 4 or 5 digits. It makes it easier to switch between accounts when I use metamask. Also when testing its how I reference my accounts so it would be great to see it displayed by default.

[paradigma-cl]

Thanks for the good work!
Here are some comments:
For General on boarding and App Onboarding, setting a password should be clarified that it is used to protect the 24 phrase key and all the accounts that are managed under the Wallet in the device.
The optional Secret key step looks useful. When showing the 24 words phrase, maybe mention that the key is the one gives you access to the funds of your account.
Onboarding Panel Steps. I was thinking that we should try to avoid making the wallet too full of functionality and complex. The challenge is to be able to integrate dynamically many initiatives that probably will be popping up.
Liked the authenticator choice.
For showing values instead of account details, it is useful, but probably, still the name for each account will be useful to have it clear, as they serve to manage what you want to do with each one. It will serve as a personal way to identify the purpose for an account. So as the 24 words phrase represents a set of accounts with different Stacks addresses, then each one of them could have an specific purpose (income or spenditure). In relation to home use, Groceries, Education, Property, Transport, utilities, etc. The same for a business.

[Eshwari007]

Liking the new flow where switching option to the $ amount at the top of the popup,it helps users to see both side of the world(token and its value in$)
Agree with @markmhx input on As could tweaking the header: "Connect to Swapr with Stacks wallet" instead of "Connect your wallet", which implies the user already has one.
Can we have a screen mockup if the user already has an existing wallet connected to Swapr or etc?

[jasperjansz]

A big thanks to all of you for your feedback. This is where we're taking the onboarding over the next couple of releases:
https://www.figma.com/file/VupGh90FJtT0dcBj2Sh7bb/%F0%9F%93%8FSpec?node-id=3%3A8

• UX improvements for creating account
• For new users, the home screen will include steps that help them get started with Stacks
• The option to skip backing up your Secret Key during onboarding, with a reminder to do it if you've skipped
• A new 'Fund' page that explains why and how to get STX as part of those steps (we might replace this with the ability to purchase STX right from the wallet)
• We'll also be including illustrations throughout that help explain key concepts and of course look great

We won't be including things like the authenticator choice or seeing fiat values — we'll do that in subsequent releases. We're also researching the option of purchasing STX right from the wallet, which should streamline onboarding further.