Summary
The Onboarding & Setup feature is the first experience a user has with the application. It serves two primary purposes: educating the user about the app’s philosophy (moving from mindless scrolling to meaningful time) and guiding them through the complex process of granting necessary Android permissions. The flow uses rich animations, interactive elements, and a step-by-step wizard to make the technical setup feel engaging and premium.How It Works
The onboarding process is a linear flow that transitions from storytelling to technical setup.Visual Storytelling
When the user first opens the app, they are greeted with a “Hero” screen featuring a dynamic pixel grid animation. As they swipe through the pages, the app uses visual metaphors—like an hourglass transforming into an insight bulb—to explain the value of reducing screen time. This phase is purely educational and aims to motivate the user.
The Permission Handshake
Once the user understands the “Why,” the app moves to the “How.” The app requires deep system integration to function (like tracking app usage or blocking apps). The screens present each permission (Usage Stats, Accessibility, Overlay, etc.) one by one. The interface checks the current status of each permission in real-time.
System Redirection
When a user clicks to grant a permission, the app pauses and redirects them directly to the specific Android System Settings page needed. This saves the user from hunting through their phone’s settings menus manually.
Verification & Completion
When the user returns to the app, the
ViewModel immediately re-checks the permissions. If granted, the interface updates with a green checkmark and allows the user to proceed. Once all steps are complete, the user performs a “Hold to Start” gesture—a long press interaction that triggers haptic feedback and confetti—marking the onboarding as complete in the local database.Data Stored
The feature persists simple flags to ensure the user doesn’t see the onboarding flow again after completing it.| Field | Type | Description |
|---|---|---|
| screenId | String | The unique name of the tutorial or screen (e.g., “onboarding_complete”) |
| hasSeen | Boolean | True if the user has finished the flow |
Key Components
Onboarding Screen
Displays the marketing-style introduction with complex animations like the “Pixel Grid” and “Typewriter” effects.
Setup ViewModel
Actively monitors the status of Android system permissions and updates the UI when the user returns from settings.
Tutorial Repository
Saves the user’s progress so they are not asked to complete setup multiple times.
Morphing Navigation
A unique UI component in the setup wizard that changes its shape (Circle → Flower → Square → Heart) as the user progresses through steps.