iOS onboarding - v2

[anthonypkeane]

Description

Please search for the spec called "Mobile Onboarding (Retention Focused)" and implement per those details.

Design

The new onboarding experience is broken up into smaller parts that are spread out over the course of a user lifecycle.

Day 1 - Limited feature tour

Users are introduced to privacy messaging and Brave Stats.

Prototype: https://www.figma.com/proto/atoL4LN2kd8ILnPGwohUoV/Mobile-onboarding-v2?node-id=466%3A1864&viewport=-13%2C386%2C0.8776507377624512&scaling=min-zoom

On the last screen, after the user taps "Turn on privacy stats", the dummy data in Brave Stats blurs into focus and increments down: prototype TBA

Day 1-30: Just-in-time Onboarding

Users are introduced to search engine alternatives (and setting a default) the first time they search.

Users are introduced to Brave Shields the first time it blocks something. Introductory popover only shows once.

The popover has a gradient background. background: linear-gradient(316.3deg, #BF14A2 0%, #F73A1C 98.59%);

The popover slides in as soon as the page is finished loading y-10, 0.3s with opacity:

Prototype: https://www.figma.com/proto/atoL4LN2kd8ILnPGwohUoV/Mobile-onboarding-v2?node-id=466%3A50&viewport=598%2C37%2C0.45462357997894287&scaling=min-zoom

Users can discover the Brave Rewards feature by tapping on the BR icon or seeing a sponsored image on the new tab page.

Day 4

Users are forcefully introduced to Brave Rewards on Day 4 - they see BR opt-in and Brave Ads onboarding on app open.

Push notifications

Deliver push notifications per spec.

Assets

All motion graphics will be done using Lottie files.

• Each stat number and the stats icon is highlighted with a pulsing circle expanding outwards and fading. Play these animations only once; you can do this with: // Loop indefinitely app:lottie_loop="false" ads blocked preview: https://lottiefiles.com/share/GCzfOG https://assets10.lottiefiles.com/packages/lf20_GCzfOG.json data saved preview: https://lottiefiles.com/share/iUrj8U https://assets10.lottiefiles.com/packages/lf20_iUrj8U.json time saved preview: https://lottiefiles.com/share/7U0Nil https://assets6.lottiefiles.com/packages/lf20_7U0Nil.json
• Privacy protection preview: https://lottiefiles.com/share/7tYphH https://assets8.lottiefiles.com/packages/lf20_7tYphH.json
• Save data and battery preview: https://lottiefiles.com/share/QVdrmA https://assets2.lottiefiles.com/packages/lf20_QVdrmA.json
• Websites load faster preview: https://lottiefiles.com/share/wclijk https://assets5.lottiefiles.com/packages/lf20_wclijk.json

Figma for CSS, sizing, layout, spacing: https://www.figma.com/file/atoL4LN2kd8ILnPGwohUoV/Mobile-onboarding-v2?node-id=0%3A1

Related Issues

https://github.com/brave/brave-ios/issues/2528

[iccub]

Closing, there will be new ticket for onboarding soon. Design here is out of date.