Rewards Onboarding UI
Closed this issue · 5 comments
Description
Add Brave Rewards to the onboarding experience for iOS.
Product spec: https://docs.google.com/document/d/15ouI4hsKOduE3IrB-RkvPaPww_iqnc6MLmvSqoCu6Os/edit#
Designs
iPhone
The Shields screen now has a "Continue" button that takes the user to the next screen in onboarding.
The "Agree" button is disabled until the user checks the Terms checkbox.
Tapping on the link to Terms displays our terms page in webview.
The "Agree" button is enabled once the checkbox is checked.
After the user taps "Agree", trigger ads onboarding with a count down timer.
Gradient values:
start #4F30AB
middle #FF1893
end #FA7250
Show our custom notification (product spec: https://docs.google.com/document/d/1l_jXRt5o_RKBFiv3y3RHivrt5xGxSpzua-0OjTPc5I4/edit?ts=5d5d7079)
If the user taps the notification, show https://brave.com/my-first-ad/
If the user ignores the notification, show a start browsing screen.
iPad
iPad designs are identical to iPhone, but displayed as a card on top of a gradient background.
Dark Mode
Animated transitions between screens
When the white panel changes heights between screens, the height change and content should be animated for a smooth transition, for example (this is on Android; in iOS we would maintain the rounded corners of the white panel):
higher res video versions:
general transition.zip
Animation breakdown: the content in the white panel fades out: start Opacity: 1, end Opacity: 1, duration 0.2s. The white bg resizes starting at T=0.1s to the appropriate height for the next screen, duration 0.3s. The illustration and new text content fades in starting at T=0.3s: start Opacity: 0, end Opacity: 1, duration: 0.4s.
User Flows
New user, In ad region
Show search engine selection, Brave Shields explanation, Brave Rewards opt-in with Terms of Service, and ad onboarding.
New user, Out of ad region
Show search engine selection, Brave Shields explanation, and Brave Rewards opt-in with Terms of Service.
For this user segment, the text on the Brave Rewards should not mention ads:
Support your favorite websites and creators based on your attention.
Existing user, Brave Rewards OFF
Show Brave Rewards opt-in with Terms of Service, and ad onboarding.
Existing user, Brave Rewards ON
Show ads opt-in with ad onboarding.
Assets
Lottie assets:
- Rewards: https://assets10.lottiefiles.com/packages/lf20_uX7EQp.json
Preview: https://lottiefiles.com/share/uX7EQp - Ad notification: https://assets5.lottiefiles.com/packages/lf20_CawP3d.json
Preview: https://lottiefiles.com/share/CawP3d
Abstract link for more CSS and plain text: https://share.goabstract.com/382f3231-c578-468e-8be6-fca295b7fd79?sha=65d9fd8a0b273c12a47465c32e75c865c914954b
Blocked as we should wait for phase 1 in iOS 13 build otherwise, there could be possible rebasing. If we run low on tickets or another developer is available then this work could be started
Blocked requiring phase 2 designs
Spec: User Onboarding iOS - Phase 2 on GDrive
@karenkliu can link the final designs to this ticket.
@kylehickinson @Brandon-T design specs and Lottie files added!
Blocked as need to discuss flow if ads are not available in a specific region