Closed anthonypkeane closed 3 years ago
Please search for the spec called "Mobile Onboarding (Retention Focused)" and implement per those details.
The new onboarding experience is broken up into smaller parts that are spread out over the course of a user lifecycle.
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
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%);
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.
Users are forcefully introduced to Brave Rewards on Day 4 - they see BR opt-in and Brave Ads onboarding on app open.
Deliver push notifications per spec.
All motion graphics will be done using Lottie files.
// Loop indefinitely app:lottie_loop="false"
Figma for CSS, sizing, layout, spacing: https://www.figma.com/file/atoL4LN2kd8ILnPGwohUoV/Mobile-onboarding-v2?node-id=0%3A1
https://github.com/brave/brave-ios/issues/2528
Closing, there will be new ticket for onboarding soon. Design here is out of date.
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.
// 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.jsonFigma 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