🧠 UX Redesign: Challenge Screen

[msbelaid]

Goal

Redesign the “Challenge” screen to make it more engaging and clear when users try to access distractive apps.

Purpose

This screen appears when a user opens a distractive app. The goal is to make them pause and reflect before continuing, using a short message and a simple math challenge.

Content

• Motivational / reflection message, examples:
  • Connect your brain before continuing.
  • Are you sure you want to open Instagram right now?
  • ...
• A Math challenge, (example: 23 + 45 = ? or 3 × ? = 12)
• Input field for the answer
• App icon or an illustrative image
• Actions
  • Check answer: unlock the app if correct
  • Exit: quit and return to home screen
    A discussion is open in Thoughts on the new feature- "Add quit button to leave challenge screen" #84 to determine which should be the primary call to action, "Exit" or "Check Answer"

Expectations

• Provide a UI mockup or Figma design
• Keep it minimal, modern, and user-friendly
• Implementing the screen in Jetpack Compose is preferred

[Rahul0714]

Hi! Can I work on this issue?

[msbelaid]

@Rahul0714, yes you can give it a try 👍

[travis-jeans]

(There seems to be a few different issues open mentioning the challenge screen... like #84, so sorry if this is in the slightly wrong place.)

Just wanted to add as a first time user I found the "get me out of here" button quite confusing, I clicked it a few times because I didn't realize it was the exit button, then wondered why it closed out of both PlugBrain and the app. I think the button emphasis is reversed of what it should be.

I think the submit button should have more emphasis, so be in a different position and larger button, using the button style the exit button is using previously, should either be smaller or a lower-emphasis button style (outline button instead of fill button) or both.

Here's a screenshot of how the challenge screen currently looks on my phone:

Here's a few different ways to potentially redo the page so it's less confusing.

Option 1

Two buttons, one for submit and quit is just underneath it.

Option 2

A simpler less verbose one has the quit turned into a X button. One caveat might be it's not immediately clear until you click it that it will close both PlugBrain and the App. But it is out of the way and in a position most people associate with a quit button.

Option 3

Extra option. Reduce the verbosity of the button and just call it Close all.

[msbelaid]

@travis-jeans great suggestions, I really appreciate your reasoning.
Hichem is currently working on redesigning the screen, and I’ll make sure to share your proposal with him.
There’s also an additional constraint: on smaller phones, when the keyboard opens it can hide the lower part of the screen, so all components need to be aligned toward the top

[HichemDahaoui]

Hello,

I honestly believe the primary button should be the exit button. I believe users will judge the app on its success of breaking their bad habits (being addicted to a certain or multiple apps).

Therefore we should make the exit button the main one, the "unlock app" after solving the challenge the secondary. My approach was the exact opposite, I made the unlock button harder to attract attention. and made it easier to leave the app.
I do agree however that we could improve wording and make the exit button less confusing as well.

I will share the Figma file with all of you today evening. Please do not hesitate to voice your opinions and leave comments on the app!

Thank you for your input.

Edit : I still have some things to clear out and work on before publishing the Figma link :/ so it's gonna be for tomorrow.

[msbelaid]

@HichemDahaoui
Take all the time you need to refine the design, no rush

[HichemDahaoui]

Hello again @travis-jeans,

I took your comment into consideration, I tried to make both my logic and yours work.
Basically landing on the challenge screen will have the unlock button greyed out as I said.

However to remove any confusions, I tried to make the unlock button extra obvious when the user decides to commit to an answer/unlocking the app instead of leaving.

Here is the Figma link as promised, please let me know what you all think.

Please keep in mind it's still a work in progress, nothing is final and some screens are still on the wireframing, skeleton phase.

[msbelaid]

@HichemDahaoui

Thanks for sharing the link. Here are a few remarks:

• It would be great to keep a consistent style across all screens, especially for the CTA buttons, sometimes they appear black, other times blue.
• Please specify which font you're using and include a brief explanation of why you chose it.
• Could you add the common UI components to the Components section (list items, text inputs, etc.)?
• The unlock button looks slightly 3D, while the others follow a flat design. Let’s aim for visual consistency.
• For the challenge screen, let’s avoid adding a Challenge completed label. We prefer using icons to convey information, as this helps us avoid additional translations.
• In my opinion, the unlock and quit buttons should not share the same color, same color suggests same action to users. Let me know what you think.
• In the current live version, the numbers animate when the challenge screen appears, do you think we should keep this?

[HichemDahaoui]

@msbelaid I would like to point out again to everyone that this is not completed work, I have just shared what I'm at so far!

Meaning its normal that some buttons are black and square, its just that I haven't worked on those screens yet, they're just wireframes.

• Will include an explanation on the font, do you want it here or on the Figma file ?

• Yes, I was planning to add more components as I go along.

• The unlock button is slightly 3D on purpose, I wanted it to stand out a bit more, but we can explore some other ways, I will include a few versions of that screen.

• Agreed, that's the reason I went for 3D to make it different, but I'll explore other options, I will keep updating the Figma as we go.

• Animate you mean when the challenge appears? It's fine to keep it's not really distracting or anything.

[travis-jeans]

@HichemDahaoui Some feedback about the colours and challenge UI. Also general discussion for everyone else.

Gradient

The gradient idea to reflect the difficulty is an interesting idea. One thing I would caution about is to check the text contrasts properly with the gradient for buttons, particularly the white text against the lighter blue.

There's an accessibility contrast checker in Figma which makes it easy to compare contrast for solid colours (not gradients though). A web-based resource to do the same is the webAIM colour contrast analyzer. Getting the text to contrast to AA minimum is a part of web accessibility standards across the world. To check the gradient you can just colour pick the lightest background colour to compare against the text colour (foreground colour).

Input Feedback

Another piece of feedback I have for the moment is I think there could be another indicator about whether the input is correct or incorrect beyond just using a coloured outline because colour blind users who can't distinguish red and green won't be able to tell the difference.

At the moment the app seems to be using a small toast style pop up for an incorrect answer, but it doesn't appear on screen long and is easy to miss, it's also toward the bottom of the screen.

Since @msbelaid has a preference for icons, is it possible to add a "cross" to indicate wrong and tick to mean correct right-maybe aligned in the input box next to the unlock so there's more visual feedback? See Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only and Use of Color if you want to read more about this.

The positive of using icons for correct and incorrect is that the input feedback is consistent and using icons for both correct and incorrect answers, and also it would mean removing the reliance on a temporary, disappearing toast alert.

When programming the app I would say, try to make sure the tick and cross icons have appropriate alt text or an aria-label like "correct" or "incorrect". I'm not sure what the Android-equivalent of aria-live="polite" is but I would suggest setting some equivalent on the icons so they are dynamically read out for those using screen-readers (about aria-live (MDN docs)).

Button emphasis

the unlock and quit buttons should not share the same color, same color suggests same action to users. Let me know what you think.

If you want the submit button to have less emphasis than the exit button, changing the button colour could be one way of doing it (like to a lighter shade). Since accessibility for gradients is a bit more work to figure out than solid colours, you would just have to make sure it's not too low contrast it drops below AA level. This would mean a higher emphasis button would be higher contrast (if you want to use colour or luminance). Using an "outline" based button where the background of the button is the app background colour is another way of making a lower emphasis button.

Animations

I don't have the latest version of Android (version 12 OS) but I have the animation settings turned off in Developer Mode since I have motion sensitivity. The animation for the numbers seems to appear anyway, I personally find it a bit distracting. Is it possible to have the app respect the user's Reduce Motion setting somehow so those users who don't want animations can have it disabled? In Android 13 this is apparently called Reduce Motion, in Android 12 it's under three different settings. In Developer Options > Drawing there's:

1. Window Animation Scale
2. Transition Animation Scale
3. Animator Duration Scale

Button labels

I think Leave App is a much clearer label for the exit button than what it was before so I'm happy with that change.