STAPP — A Productivity App

STAPP — A Productivity App

Concept redesign of a productivity app that helps people manage phone usage, stay focused, and take control of their time. Working on UI/UX and brand design, the original all-or-nothing app blocker became a flexible focus timer with selectable apps, an optional Strict mode, and milestone badges that make discipline feel rewarding.

Brand

STAPP

Industry

Tech, Productivity App

Category

UI & UX Design

,

Brand & Marketing Design

Objective

Design an app that assists in managing phone usage, enhancing focus, and improving time management.

Challenge

I previously designed an app for this during my college years ↗, complete with a user flowchart and wireframes. However, certain screens are unfinished and outdated. One challenge is creating screens that effectively showcase the app’s functions and essentially complete a presentable concept that adheres to the objective.

My Solution

Design a mobile app named STAPP to redirect individuals from gadget distractions that impede focus and time management. It achieves this by restricting the use of certain apps for a designated period.


Optional account creation

No need to sign up in order to use it.

  1. Choosing Get Started will lead to the creation of a disabling passcode for the timer.

  2. An account is only needed to record achievements earned over time.

  3. Earn achievement badges by reaching various milestones.

  4. Modify account information by accessing it through the avatar icon located in the Achievements and Settings screens.


Quick access

Get started as soon as you leave the onboarding screen. No tutorial is needed.

  1. Toggle the timer status in one click. Either set a timer or disable it.

  2. Important sections can be accessible in one screen: Settings, Menu, and Use an app.


Normal Mode

A functional default mode.

  1. In Normal mode, the timer can be stopped by toggling the home screen switch off and entering the set passcode.

  2. Normal mode is the default selection in setting a timer. Strict mode is also an available option.

  3. Plan upcoming sessions by scheduling the timer repeat. You can select which day and time it is active.

  4. Selected apps that are accessible when the timer is active. Keep essential apps available in case of emergency or references. Unselected apps will not be accessible during an active timer session.

  5. Toggle scheduled timers from the main menu according to needs.

  6. View the next scheduled timer on the home screen.


Strict Mode

Normal mode in serious business.

  1. Strict mode takes away the option to disable the timer.

  2. Selected apps are still accessible when the timer is active in Strict mode. Similar to Normal mode, unselected apps will not be accessible during an active timer session.

  3. Scheduled timer repeat is unavailable in this mode to prevent accidental activation and it can’t be disabled if forgotten.

  4. Distinguish Strict mode with its deeper, darker colors in comparison to Normal mode’s lighter hues.

Changes From The Original Concept

1. Changing Limitations

📝 Original

STAPP aims to block all app usage, rendering the device entirely unusable during emergencies. Additionally, the phone cannot be utilized for other functions. The original intention was to wean off children from completely using a smartphone.

✅ Re-imagined

STAPP now enables users to select specific apps for use during an active timer, even in Strict mode, expanding its utility for users of all ages seeking productivity improvement. This redesigned feature can attract a new potential group of target users.


2. Strict Mode

📝 Original

Strict mode was a state where a timer is presently running, and a pop-up emerges if the user taps the screen while the timer is active.


✅ Re-imagined

Strict mode is now one of the available mode options, and in this mode, users are unable to disable the timer until it completes.


3. Inactive Timer State

📝 Original

The initial inactive states include either configuring a timer schedule or substituting the home screen with a list of upcoming scheduled timers.


✅ Re-imagined

During inactive states, the on/off switch is displayed along with an indicator of any upcoming scheduled timer sessions. The menu provides access to a list of scheduled timer sessions.


4. Setting A Disabling Passcode

📝 Original

To create or change a disabling passcode, the user needs to navigate to the app’s settings.


✅ Re-imagined

Creating a disabling passcode is the second step from the onboarding screen and can be changed by accessing the app’s settings.


5. Achievements

📝 Original

The point system lacked clarity, and earned achievements unlocked Easter eggs like folk stories. Tying down points into a single account was also undefined.


✅ Re-imagined

The point system showcases focused hours with badges at each milestone, and users can save their points by creating an account.


Copyright © 2026 Cee Villarruz. All Rights Reserved

Copyright © 2026 Cee Villarruz. All Rights Reserved

Copyright © 2026 Cee Villarruz. All Rights Reserved