MS6 – UI/UX Design

1. Value Proposition

The main value proposition of the application is to help university students reduce excessive screen time without requiring them to completely disconnect from their phones. Unlike traditional screen-time tools that primarily show users how much time they have spent on their devices or impose limits that can be easily bypassed, the proposed solution combines intentional access mechanisms, personalization, gamification, and alternative activities. Challenges before accessing distracting applications encourage users to stop and consciously decide whether they actually want to use the application, while goals, streaks, achievements, and the virtual pet provide motivation to maintain these behaviors over time.

The solution also addresses an important aspect of excessive phone use: what users do instead of using their phones. By providing personalized offline activity recommendations, the application can help users replace periods of boredom or unstructured time with meaningful alternatives. The potential integration with partner organizations can further increase the value of these recommendations by connecting users with real world activities that match their interests. In this way, the application does not simply tell users to "use their phone less," but provides them with motivation, intentionality, and practical alternatives to help them achieve that goal.

Feature / Approach	Native Screen Time (iOS / Android)	Opal	Forest	One Sec	BreakLoop
App limits / blocking	Yes, but limits can be dismissed with a single tap	Yes, with stricter blocking	No (focus timer only)	Adds a short friction delay before opening an app	Yes, but access requires completing a Challenge Gate instead of a dismissible prompt
Escalating friction on repeated bypass	No	No	No	Partial (breathing delay each time)	Yes. Escalating Friction increases challenge difficulty with repeated bypasses in a day
Motivation / gamification	No	Minimal (streaks)	Yes (grows virtual trees)	No	Yes. Virtual pet, points, streaks, and achievements tied to actual behavior change, not just app opens
Alternative offline activities	No	No	No	No	Yes. Personalized offline activity recommendations based on interests, time, and context
Addressing root triggers (boredom, unstructured time)	No	No	No	No	Yes. Recommendations are triggered specifically at moments of idle time, not just after a limit is hit
Focus sessions (Pomodoro / Do Not Disturb)	Partial (Focus Mode)	Yes	Yes	No	Yes. Focus Mode and Pomodoro sessions with Priority Contacts to avoid missing urgent messages
Awareness of automatic/habitual checking	Basic usage reports only	No	No	No	Yes. Intent Prompt and phone pick-up detection (accelerometer-based Check Counter)
Social / accountability features	No	No	No	No	Yes. Challenges with friends, social study accountability

---

2. UI/UX Design

2.1 Colour Palette

BreakLoop uses a warm, earthy, and muted color palette built around five core colors: Snow, Spicy Paprika, Golden Orange, Fern, and Dark Coffee. Together, these colors create a visual identity that is designed to feel cozy, calm, welcoming, and grounded, supporting the application's goal of encouraging users to slow down and take meaningful breaks from their phones.

Core Colors

Spicy Paprika — #C85A32

A lively, warm red-orange that naturally draws attention without feeling aggressive. Its spicy, earthy character gives the interface energy and personality, making it especially suitable for primary actions, important elements, and brand highlights.

Golden Orange — #E59F3D

A bright but warm orange that adds playfulness, optimism, and creative energy to the interface. It complements Spicy Paprika while providing a lighter alternative for secondary actions, highlights, and interactive elements.

Fern — #546A42

A muted, earthy green inspired by natural foliage. Its grounded and tranquil character introduces balance and calm to the warmer colors in the palette, making it particularly useful for elements associated with relaxation, progress, or positive states.

Dark Coffee — #3A2A22

A deep brown that provides strong contrast while preserving the warmth of the overall palette. Rather than using pure black, Dark Coffee creates a softer and more grounded visual hierarchy, making it suitable for typography, navigation, and other high-contrast elements.

Snow — #FFF8F6

A very subtle warm off-white with a slight blush undertone. It provides a soft, peaceful foundation for the interface without the starkness of pure white. As the main background color, it allows the warmer accent colors to stand out while maintaining the application's calm atmosphere.

Design Rationale

The palette was intentionally chosen to evoke coziness and tranquility, as one of our main challenges is to be a tool to help users disconnect rather than a new source of stimuli. Instead of relying on highly saturated colors or strong contrasts, this palette combines warm earth tones with a soft neutral background and a natural green. This is particularly important for the application's purpose because the interface is not intended to feel like a strict productivity tool that monitors or restricts the user. Preferably, BreakLoop should feel like a welcoming space that encourages users to pause, disconnect, and engage in calmer activities.

The warm Paprika, Orange, and Snow combination creates familiarity and comfort, while Fern introduces a natural and calming element, and Dark Coffee helps maintaining readability and structure without breaking the warm aesthetic. The use of different tints and shades throughout the interface further allows the design to establish visual hierarchy while preserving the feeling of comfort, calmness, and approachability; this is also intended to help provide sufficient contrast between interface elements without relying exclusively on color to communicate information, which ensures that important actions, states, and content remain distinguishable for users with different visual needs. Overall, this colour palette helps BreakLoop to build a unique identity of welcomeness that outstands for its rich but calm nature.

2.2 Fonts

For BreakLoop, two fonts were selected to balance the app's playful, pixel-art identity with everyday readability.

Primary font: Space Mono.

Used for titles, headers, and key numerical indicators, Space Mono was chosen for its blocky, monospaced letterforms, which emphasizes the pixel-art aesthetic established throughout the rest of the visual design. This reinforces the "game-like" narrative of the app, supporting the virtual pet, streaks, and achievement systems. Also, it helps immerse the user in that experience without distracting from the app's core purpose, that is helping students reduce and be more intentional about their screen time.

• Bold: Is used for screen titles and section headers (e.g., "Home", "Focus Mode", "Stats").
• Regular/Medium : Is used for high-visibility numerical data the app wants to emphasize, such as the streak counter, the Pomodoro timer, and point totals, reinforcing their "game HUD" feel.

Secondary font: Plus Jakarta Sans.

For body text and secondary information, Plus Jakarta Sans was selected for its clean, geometric shapes. It is easier on the eyes over longer reading sessions than a monospaced font would be, while its clear, well-defined letterforms still align with the minimal, structured feel established by the primary typeface. This makes it well suited for conveying secondary content without breaking away from the brand's visual language.

• Medium: Is used for subheadings, button labels, and card titles (e.g., friend names in the social screen, activity names in offline recommendations).
• Regular: Is used for body copy, descriptions, and supporting text, such as challenge instructions, stat breakdowns, and settings labels.

2.3 Icons and Images

1. App Icon and Logo

App Icon:

App Logo:

BreakLoop's app icon and logo follow a pixel-art visual style inspired by cozy and nostalgic video games. The use of pixelated shapes, warm colors, and simple forms creates a friendly and approachable identity that matches the overall purpose of the application. Instead of presenting screen-time management as something restrictive or punitive, the visual identity aims to make the experience feel positive, playful, and inviting.

The logo and app icon share the same visual language and color palette used throughout the application. Warm brown, orange, cream, and green tones reinforce the cozy atmosphere and create a connection with the Hearth and the virtual environment. The pixel-art treatment also helps differentiate BreakLoop from traditional productivity or screen-time management applications, giving it a more recognizable and memorable identity.

The app icon is designed to remain recognizable even at a small size by focusing on a simple central symbol and avoiding unnecessary details. This allows the icon to work both as the application's launcher icon and as part of the overall brand identity.

2. Virtual Mascots

The virtual pets use the same cozy pixel-art style as the rest of the application to maintain visual consistency. Their appearance is intentionally friendly and expressive, helping create a more personal experience and making the application feel less like a conventional productivity tool. The pats act as visual companions throughout the user's focus journey rather than simply functioning as decorative elements.

The state of the pet can also represent the user's progress and interaction with BreakLoop. As users complete focus sessions, maintain streaks, and develop healthier phone use habits, the pet can change and grow alongside their progress. This provides users with a visual representation of their achievements that is easier to understand at a glance than numbers alone.

The pets also support the social component of the application. Users can have a visual representation of their progress when interacting with friends, allowing achievements and development to become part of the social experience. In this way, the pet connects several parts of BreakLoop: focus, progression, personalization, and social motivation.

3. Navigation Icons

Navigation Icon Design

Selected and Inactive States

BreakLoop uses a set of simplified pixel-art icons for its main navigation. The icons were designed around recognizable visual metaphors so users can quickly understand the purpose of each section. The navigation contains five main areas: Hearth, Focus, Stats, Offline, and Friends, each representing an important part of the BreakLoop experience.

• HEARTH — represented by a simple fire icon. This section acts as the user's personal space, where they can interact with their virtual environment and see elements related to their progress.
• FOCUS — represented by an hourglass. This is the main area for starting and managing focus sessions.
• STATS — represented by a bar chart. This section allows users to review their screen-time information, streaks, and overall progress.
• OFFLINE — represented by a tree. This section provides alternative activities that users can do away from their phones, supporting the main goal of BreakLoop.
• FRIENDS — represented by a group of people. This section supports social interaction, challenges, and accountability between users.

The selected navigation item is given greater visual detail and emphasis, while inactive icons remain simpler. For example, when the user is in the Focus section, the hourglass becomes more detailed while the remaining icons maintain a simpler appearance. This creates a clear visual hierarchy and allows users to immediately recognize which section they are currently viewing.

4. Consistency and Accessibility

All icons and illustrations in BreakLoop follow a shared pixel-art visual language, using similar levels of detail, shapes, outlines, and colors. This consistency helps the different elements feel like part of the same world and reinforces the application's cozy and playful tone. More detailed illustrations are primarily reserved for important motivational elements, such as the virtual mascots and the Hearth, while navigation icons remain simpler to avoid visual overload.

Accessibility and recognizability were also considered when designing the icon system. The icons use familiar visual metaphors and are accompanied by text labels, so users do not have to rely exclusively on interpreting an image. Additionally, the selected navigation state is communicated through more than color alone: the selected icon becomes more visually detailed and prominent. This helps users identify their current location within the application and makes the navigation system easier to understand for a wider range of users.

The limited color palette also contributes to a consistent visual hierarchy. Dark brown tones are primarily used for outlines and contrast, while warm orange and cream tones provide emphasis and highlight interactive or important elements. Finally, green accents are used mainly for progress. This creates a recognizable visual system that can be maintained across the different screens of BreakLoop.

2.4 UI Prototype

The app is organized through a persistent bottom navigation bar with five main sections—Hearth, Focus, Stats, Offline, and Friends—allowing students to quickly access the core features. The Hearth screen acts as the main dashboard, while Focus provides a dedicated flow for setting and completing focus sessions, Stats visualizes progress and screen-time habits, Offline recommends alternative activities, and Friends introduces social accountability through shared challenges. Across the interface, clear visual hierarchy, consistent buttons and cards, large touch targets, and differentiated active/inactive icons support recognizability, accessibility, and low cognitive load, while the detailed pixel-art elements reinforce the app's motivating game-like experience.

UI Prototype Link

2.5 Navigational Patterns

We have decided to incorporate a number of navigation patterns that should both encourage navigation and improve readability. BreakLoop uses a combination of bottom tab navigation, hierarchical navigation, modal flows, and immersive full-screen flows. We selected these patterns to make the main features easily accessible, but also prioritized clarity and helping the user navigate our menus.

Bottom Tab Navigation is used as the primary navigation pattern. The five main sections are Hearth, Focus, Stats, Offline, and Friends. These sections correspond to the application's main functionalities and are what we believe should be easily accessible, these are: maintaining motivation through the virtual environment, starting focus sessions, monitoring progress, finding alternative offline activities and participating in challenges.

Hierarchical Navigation is used within individual sections when users need to access more detailed information. For example, users can navigate from Hearth to their virtual pet, achievements, or streak details. This aims to keep our app clean and readable, keeping only the most relevant component visible and accessible.

Modal Flows are used for short interactions with the user, usually small menus or brief pop-ups. The Challenge functionality is a great example; when users attempt to access a distracting application, they are presented with a challenge before continuing. This creates intentional friction, hopefully discouraging users from opening restricted apps, without requiring users to navigate away from their current context.

Full-Screen Focus Flows are used during active focus sessions. Once a session starts, secondary navigation is minimized so users can concentrate on their task without being encouraged to explore other features of the application. At the end of the session, users return to a summary screen where they can see their progress and rewards. These patterns should help the user detach themselves from their phone during the study session.

These patterns prioritize quick access and encouraging intentional interactions, which are particularly important for university students who may interact with BreakLoop briefly throughout the day. The navigation also reinforces the application's main goal of helping users make more intentional decisions about their phone use rather than simply restricting access.

Navigation Visuals

The following diagram shows a chart showing the possible trees of interactions our app has. To access any of these main sections a user would need to follow the flow through the diagram, navigating through component until arriving at their desired section. For example, if a user wants to access the current setup for their study sessions they need to: open BreakLoop, navigate to focus, navigate to setup. This diagram shows the main navigation and sections through which a user will be able to use our app.

Another important part of navigation is what happens when a user opens a restricted app when in focus mode. Whenever a user opens a restricted app during focus mode, they need to complete a challenge in order to gain access to the restricted app they were trying to open. This should give users enough time to re-evaluate if they really need to use their phone while studying. The following diagram models this interaction and navigation, with different outcomes when a user has indeed completed the challenge.