The Onboarding Acts
Last week during onboarding explorations, Cam and I broke down the onboarding flow into a narrative with 3 “acts.”
3 ACTS: Import → Customize → Reward
Import: Bringing your wallet into the browser (with seed phrase, private key, or wallet connect) or creating your own
Customize: Building your wallet and browser preferences
Reward: Getting a membership NFT while learning the mechanics of the browser
This week, I designed and prototyped a high-fidelity version of the Import and Customize part of the onboarding.
Import and Customize V1
Demo
Our main goal during import and customization is to make the wallet come alive. We want the micro animations and spatial movements to feel purposeful and cohesive toward this goal. We also split the page into two sides: the left is for user input, and the right is for visualization.
Import:
When importing your wallet, we automatically detect if you’re entering a seed phrase or a private key. For seed phrases, we animate the entry of a seed phrase using a mitosis-inspired animation that splits the capsule every time user enters space. And for the private key, we will grow the capsule until you’re ready to confirm
Customize (Build-Your-Wallet):
- You can add a nickname for your wallet
- You can customize the view for your coins and NFTs based on what type of web3 user you are
- You can add dApp shortcuts (auto-populated based on apps you’ve transacted in using your wallet before)
These steps create a series of stacking modules that make up the Wallet Widget. Once you see the wallet in the browser, you know exactly how the modules were pieced together, with an option to change them at any time.
Goal for Next Week: Reward and Implementation
After a user builds their wallet, we want to help them do their first basic transactions that our browser is uniquely capable of serving. For example, we can give the user a wrapped version of Uniswap and do a quick swap. This way, we can show which popups will show up, where transaction progress will be, and where the coins will land afterward. The same can be done with a free membership NFT: drag it into your wallet to claim the NFT.
Next week, I will explore this reward flow and then implement the whole onboarding flow in Swift using Cam’s code template that he’s working on this week.
Goals for Next Four Weeks: Polish polish polish
My goal is drive polish and narrative across the product now that we have the technical components built out. Through user testing in the future, we can measure the effectiveness of the design/narrative and tweak accordingly.
Bonus
Also, I missed coding a little bit, so I worked on another fun swiftui prototype: swipe on your trackpad to reveal a sidebar