Brave-browser: Update onboarding flow (brave://welcome)

Created on 25 Sep 2020 · 3Comments · Source: brave/brave-browser

Description

Original description:

We've talked about adjusting the order of the onboarding for Desktop- possibly updating how search looks and where it's placed (currently 4th screen). I believe it was proposed to be the 2nd screen and we may show icons for the options

Once we have a mock up, we can start work to adjust this flow 😄

Per @kjozwiak 's feedback, this is the user-facing issue related to https://github.com/brave/security/issues/216.

Design

The welcome experience must incorporate a new slide that presents the antifraud referral confirmation checkbox to the user:

P3A needed for both checkboxes.

To integrate this slide, improved ordering and visuals should be made to the welcome experience:

Replace 1st "Let's Go" slide with the import slide
Search engine slide is 2nd
Incorporate search engine icons into SE dropdown
Brave Shields is 3rd
Antifraud referral confirmation checkbox is 4th
Brave Rewards is 5th and last
Update search engine slide graphic
Update Brave Rewards slide graphic with Lottie file

Assets

Figma: https://www.figma.com/file/MFHpcXJMg2RUQpUJMAZZ4R/?node-id=1159%3A24270

Brave Rewards slide Lottie file:
preview: https://lottiefiles.com/share/6RkxWM
json file: https://assets3.lottiefiles.com/packages/lf20_6RkxWM.json
implementation info: http://airbnb.io/lottie/#/web

ODesktop closestale designeeds-mock-up onboarding prioritP3

Source

bsclifton

Most helpful comment

We'll need a user facing issue that refers to https://github.com/brave/security/issues/216 so it doesn't get lost when QA starts running through verifications. Unless we're planning on moving the work that's being done in https://github.com/brave/security/issues/216 into https://github.com/brave/brave-browser when ready, we should make sure we have a public issue that points to the above so it doesn't get missed by QA.