← Back to all work

Perry Angelora

Circuit App

Revolutionizing Time Management for Creatives

An iOS app to empower creative minds by bettering focus and eliminating burnout.

Making Time To Make Time

Circuit App is designed to address the unique time management challenges faced by creative professionals. It offers users a way to deal with the contradictory issues of distraction mitigation and preventing burnout from overworking. By structuring time into focused work periods and restful breaks, Circuit App aims to enhance productivity and creativity, while reducing stress and mental exhaustion.

Tools:

  • Figma

  • Photoshop

Role: Concept, Design

Links:

How Did We Get Here?

Creative professionals (and the larger public in general) are often grappling with contrasting challenges: the lure of distractions, including social media and meetings, and a tendency to work for extended periods without breaks, leading to mental fatigue. Maintaining a balance is a crucial aspect in avoiding burnout and general well-being.

The Gravity That Captures Us All

Time management exerts enormous gravity in the life of a creative. It has a significant impact on the productivity and stress levels of creatives, and is a constant source of tension. At some point creatives have struggled with balancing project deadlines, learning new technologies, and managing the distractions of working in a tightly-woven digital environment. The need for a solution that helps navigate these challenges efficiently is evident.

The Proposition

Easy Selection, Easy Modification

Eliminate visual clutter to facilitate quick program selections and straightforward modifications. Prioritize legibility and accessibility of essential information for quick scanning.

Custom Circuit Creation

Creating a bespoke program (Circuit) is simple: pick a title, define the active/rest durations and the repetition count—that’s it. A total duration (active + rest, multiplied by repeats) is shown at the base of the input area, providing users with the total time commitment.

Semantically colored circles identify the current activity status (Each circle represents one minute).

Active Period

Active Period — In Progress

Rest Period

Rest Period — In Progress

Period Complete

Intuitive Feedback

With a matrix of circles we are able to visually represent time as discrete visual elements. In one glance the user is able to see roughly how far along they are in the current timer/period. This matrix configuration also allows the user to have a timing scheme for up to 8 hours, which is the current limit of Apple's Live Activities for iOS.

Initial

Initial screen for a basic Pomodoro timer, consisting of 4 - 25 minute active and 5 - 1 minute rest periods.

In Progress…

While in progress, the current minute is animated and bottom text tells the user how much time until the next period.

Completed

Once completed, the user is offered the option to reset the timer, or finish and view their progress.

Design Considerations

  • Intuitive User Interface: As a productivity app, it should offer easy interaction at a glance, requiring minimal mental effort from users with fleeting focus.
  • Smart Presets: Options are provided pre-configured for easy, out-of-the-box operation.

 

  • Progress Tracking: To help track work patterns and progress, the system will give the user access to a record of their progress.
  • Native API: Utilize Apple iOS 16+ LiveActivities to offer users live feedback, minimizing the need to pick up and open their devices.
Circuit Picker Screen

Access to usage history

Easily view current Circuit's specs and tap to edit them

Access to preset and custom Circuits

Quickly add a custom Circuit

Completed Session Recap Screen

Post recent activity to social media

Completed Session Detail Screen

View by date range

Show daily activity

Access to usage history

Easily view current Circuit's specs and tap to edit them

Access to preset and custom Circuits

Quickly add a custom Circuit

Post recent activity to social media

View by date range

Show daily activity

Typefaces

Aa

Barlow SemiBold

A big fjord vexes a quick waltzing nymph

Aa

Barlow Regular

A big fjord vexes a quick waltzing nymph

Colors

  • Warm Black #2D2C2C

  • Text Light #6F766F

  • Warm White #FBF8F3

  • Rest Blue #32ADE6

  • Go Green #34C759

  • Error Red #FF3B30

  • Warn Orange #FF9500

Potential App Structure

The app is divided into 3 screens and 1 large-detent sheet. User data can be stored within the device's persistent storage which would allow transferring or offloading of data to different devices. This app should also make use of Apple’s Live Activities for iOS. This would allow the user to view progress from their iPhone lock-screen without explicitly opening the Circuit app.

Matrix Design Alternatives

Alternate Matrix One

In this iteration the rest periods are grouped together. Doing so presents the user with an alternative sectional representation, which augments the description via semantic color. From a development point of view, this may be a slightly more complex route to take as we're essentially treating time in 2 different ways: by minimal instance (minute dots) and by section (rest lines).

Alternate Matrix Two

In this iteration the active and rest periods are treated the same. This allows us to treat all measurements of time the same. By bridging the dots we create cohesive areas that are easy to visually discern by color or density. Another issue for users is that this format may read too closely to text-placeholder graphics.