2. Onboarding

[Cobra-Bitcoin]

The goal of the onboarding process is to either get the user set up with a new wallet, or to help the user restore an existing wallet. The onboarding should feel like going through a step-by-step process, animations may be useful here to transition between different stages of the onboarding.

1. Language selection screen
Currently the behavior of the wallet is such that when the user first opens the application, the default language is the same as the one set in their operating system, however this isn't ideal as many non-English speaking Bitcoiners are quite comfortable interacting with a wallet in English.

The first screen that should display when onboarding a user is the language selection screen, this will be a screen with a list of available languages for the user to select from, the current default language of the user's operating system will be already selected, but the user is free to choose another language.

2. Create/restore wallet screen
Once the user has picked their language, we need to know what action they want to take, if they want to create a new wallet or restore an existing wallet. So this will be a simple screen in the onboarding process that allows a user to pick what action they want to take.

3. Create
The user wants to create a new wallet, great. This screen just needs to display some sort of notice to the user that they need to write down their seed phrase, along with a "Generate" button that when pressed will bring up the seed words. How this is done is up to the designer, but as long as it's simple and intuitive to use, it'll be fine.

4. Restore
The user wants to restore their old wallet, they have to enter their 12 word seed phrase, so this screen needs to display 12 textfields and a button.

Screenshots of the current onboarding screens:

Landing screen

Create (1)

Create (2)

Restore

[natiwa]

@Cobra-Bitcoin How many languages it will be?

[Cobra-Bitcoin]

@natiwa At least 8 languages at launch, but we'll probably add more in the future.

[natiwa]

@Cobra-Bitcoin Do we have any additional step after generating a seed phrase? Confirming a seed phrase (eg "Write down word #3 below." or creating a password for future access?

[Cobra-Bitcoin]

@natiwa Hey, nope, there's no other additional step after generating.

[natiwa]

Hi @Cobra-Bitcoin I have prepared the wireframes (and clickable prototype of them which gives you a real feeling of the flow) of the onboarding process. You can see them here

Please keep in mind that this is just a high fidelity wireframe and all the colors and details will be added afterwards. Let me know your thoughts.

[Cobra-Bitcoin]

@natiwa Looks awesome! I'm really happy with it. I especially like that you added the checkbox for "I have saved my seed". The numbered seed words are also a good UX feature.

That animation in-between the generating process is very nicely done. With the language selection screen, keep in mind that when we launch we won't have a lot of languages (like only 8), so it might look a bit empty at first, but it's not a big deal, we'll keep adding languages and fill it out so it looks as filled as it does in the wireframes with 20+ languages. If it looks too weird, during implementation we can just switch to using a dropdown, and then use the language selection screen when we have a lot more languages, so not a huge problem :)

But overall, it looks excellent and is just what I had in mind. 👍

[natiwa]

I'm glad you like it. I changed the design so now it only has 8 languages and in my opinion, it's still looking good :) Let me know your thoughts.

[Cobra-Bitcoin]

@natiwa Yep, just checked it does look good even with 8 languages. Looks like I was wrong about it looking empty. Nice stuff.

[natiwa]

Hi @Cobra-Bitcoin I have prepared the design based on the wireframes. Let me know your comments.

[Cobra-Bitcoin]

@natiwa Hey, it won't let me see the design, says login is required.

[natiwa]

Let me check it. All-day I have some problems with Figma.

[natiwa]

Now should be ok. I'm also working on the new loader for you. I will update the design tomorrow when I finish it.

[Cobra-Bitcoin]

@natiwa Just looked through all the designs, and very happy with everythiny! Really awesome work, and all the new icons look nice. I have a few changes I'd recommend, but after that, I think we can proceed with implementation:

• There is an "X" icon on the window of the application, we also need a "-" icon for minimize.
• I feel the gray color used for the borders is too light, maybe we can experiment with a darker border color that doesn't stand out so much

Looking forward to seeing the new loader, I'm assuming it would be in SVG format?

[natiwa]

I have improved borders color and added _ to the top bar.

I was going to prepare a loader in a gif. Should I do it in a different way?

[Cobra-Bitcoin]

@natiwa GIF is fine, but SVG would be preferred if that's possible and conveniant for you.

[natiwa]

We can do it as SVG, just our developer has to do it in CSS.

Our developer who would be working on that has a small holiday next week. He will start coding from 28th Sep.

[Cobra-Bitcoin]

@natiwa No problem.