Proposal: A Guided, Step-by-Step Onboarding Workflow for New Users

[vijay2909]

Hello @msbelaid ,

First of all, I want to say that I absolutely love the concept of this app. The idea of using challenges to break the cycle of distraction is brilliant, and I'm excited about its potential. Because I'm a fan of the project, I want to propose a significant improvement to the first-time user experience to make it more intuitive, professional, and welcoming.

The Problem with the Current Onboarding

Currently, a new user is presented with a single screen that contains everything: four permission requests, the app selection list, blocking frequency, and challenge difficulty. This, combined with a navigation bug, creates two main issues:

1. Cognitive Overload: For a first-time user, being asked to configure everything at once is overwhelming. It's not clear what the most important first step is, which can lead to confusion and abandonment.

2. Critical Navigation Bug: The back button behavior is broken. Pressing it can trap the user in a loop where the screen reloads itself. After granting permissions, it can also lead to an unexpected screen, indicating the navigation stack is not being managed correctly.

The Proposal: A New 5-Step Onboarding Workflow

I propose we replace the single setup screen with a guided, multi-step workflow. This will solve the navigation bugs and create a logical, user-friendly journey.

Here is the proposed flow:

Screen 1: Welcome & Value Proposition

Purpose: To greet the user and briefly explain what the app does.

• UI Components:

  • App Logo
  • Headline: Beat Procrastination & Stay Focused
  • Description: PlugBrain helps you reduce screen time on distracting apps by making you solve a quick challenge.
  • Button: Get Started

• Navigation: Pressing back exits the app. Get Started proceeds to the next screen.

---

Screen 2: Permissions Setup

Purpose: To request the necessary permissions in a clear, trustworthy way by explaining why each one is needed.

• UI Components:

  • Headline: Let's Get Set Up

  • Sub-headline: PlugBrain needs the following permissions to work correctly.

  • A List of Permissions: For each of the 4 permissions:

    • Icon: A relevant icon for the permission.
    • Permission Name: e.g., "Accessibility Service"
    • Explanation: A simple, one-sentence reason.
      • Accessibility: Required to detect and block other apps.
      • App Usage Access: Used to show you your usage stats.
      • Display Over Other Apps: Needed to show the challenge screen over a blocked app.
      • Battery Optimization: Ensures the blocker works reliably in the background.

  • Status Indicator (Optional but nice): A checkmark or toggle that updates once a permission is granted.

  • Button: Grant Permissions

• Navigation: The Grant Permissions button would trigger the system dialogs sequentially. Once all are granted, the user can proceed. Pressing back returns to the Welcome screen.

---

Screen 3: App Selection (The Core Action)

Purpose: To have the user immediately engage with the app's primary function.

• UI Components:

  • Headline: Choose Apps to Block
  • Sub-headline: Don't worry, you can change this list anytime. (This reduces user anxiety).
  • A scrollable list of installed apps with checkboxes.
  • Button: Next (should be disabled until at least one app is selected).

• Navigation: Pressing back returns to the Permissions screen And Pressing Next takes the user to Screen 4.

---

Screen 4: Configuration

Purpose: To let the user set the blocking parameters with sensible defaults.

• UI Components:

  • Headline: Set Your Challenge
  • Section 1: Blocking Frequency
    • Title: How often should we block?
    • Options: A set of selectable chips or radio buttons (e.g., Every 1 min, Every 5 min, Every 15 min). A default should be pre-selected.
  • Section 2: Challenge Difficulty
    • Title: How difficult should the challenge be?
    • Current "Minimal Difficulty" Slider
  • Button: Finish Setup

• Navigation: Pressing back returns to the App Selection screen And Pressing Finish Setup marks the onboarding as complete, saves all the settings, and navigates to the main app dashboard (Screen 5).

---

Screen 5: Main App Dashboard (The "Usage Stats" screen)

Purpose: The main, day-to-day interface of the app. The user lands here after setup is complete and every time they open the app from now on.

UI Components:

• This is your existing "Usage Stats" screen, but now it's populated with the apps the user just selected in Screen 3.
• It should feel active and useful from the moment the user lands on it.

Navigation: Pressing back Exits the app. User interacts with the app normally.

---

Benefits of This Approach

• Solves Critical Bugs: It fixes the back button loop and incorrect stack management.
• Eliminates Confusion: It guides the user one step at a time, making the setup process feel easy and logical.
• Builds Trust: By explaining permissions, we are more transparent with the user.
• Creates a Professional Impression: A polished onboarding experience makes the entire app feel more reliable and well-designed.

I am passionate about this project and believe this change would significantly improve user retention and satisfaction. I am happy to discuss this further and contribute to its implementation.

Thank you for your time and for creating such a great app! ❤️

[msbelaid]

Hello @vijay2909,

I really appreciate your contribution and the effort you’ve put into this project.
Onboarding is such a crucial part of any mobile app, it helps users quickly understand the value of the app. It would be great to include a smooth onboarding experience in the app as you suggested.

Honestly, I didn’t expect to see this much interest from the community.
The project actually started as a small personal app I built for my kid. I used it to reward him with a few minutes of playtime in his favorite game whenever he solved a math challenge. Eventually, he got bored and abandoned both the phone and the game!

Later, I shared the app with some friends and family and received positive feedback.

Open-sourcing it came as part of an educational initiative with a nonprofit organization, where I was teaching students about modern Android development practices like testing, CI/CD, and DI.
Not long after that, I began receiving great feedback and contributions from the open-source community, including yours, which have been especially valuable.

At this stage, I think it’s a good moment for us to take a step back and rethink both the app’s UX and its overall architecture to make it more solid and user-friendly going forward.

Once again, thank you for your thoughtful contributions and the positive impact you’ve brought to the project ❤️

That's a great idea.
.
As much as I love the babybus, I love this app.

[vijay2909]

Hi @msbelaid ,

I would like to take the lead on implementing this proposal. Could you please assign this issue to me?

Also, since it's October, I was hoping you might consider adding the hacktoberfest label to it as well. 😅

Thank you! I'm excited to start working on this.

@vijay2909 Thank you. It seems that I have to start translating again

[Zephyr-Pixilated]

I really like these ideas. Maybe even a button to opt out of the 5 step workflow process. I think UberEats app has a 5 step workflow process like this, and I opt out of it near the end to skip the instructions and just work through the app.