search

bitcoin-dot-org / Bitcoin-Wallet

A simple, well designed and easy to use desktop Bitcoin wallet. The best wallet for new users to begin interacting with the Bitcoin network.
https://bitcoin.org
MIT License
52 stars 38 forks source link

2. Onboarding #4

Open Cobra-Bitcoin opened 4 years ago

Cobra-Bitcoin commented 4 years ago

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 getting_started

Create (1) generate_1

Create (2) generate_2

Restore restore

natiwa commented 4 years ago

@Cobra-Bitcoin How many languages it will be?

Cobra-Bitcoin commented 4 years ago

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

natiwa commented 4 years ago

@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 commented 4 years ago

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

natiwa commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

natiwa commented 4 years ago

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

Cobra-Bitcoin commented 4 years ago

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

natiwa commented 4 years ago

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

natiwa commented 4 years ago

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 commented 4 years ago

@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:

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

natiwa commented 4 years ago

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 commented 4 years ago

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

natiwa commented 4 years ago

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 commented 4 years ago

@natiwa No problem.