Clockwise

UI/UX Design, App Development / October 2021 - Ongoing

UI/UX Design, App Development

October 2021 - Ongoing

Clockwise is a Pomodoro timer designed to help you focus.

UI Design

Frame containing the focus view.
Frame containing a selected task in the focus view.
Frame showing a paused view.
Frame showing the break view.

I started with some low-fidelity sketches of the timer, and turned them into a high-fidelity prototype in Figma.

The typeface used is Anonymous Pro.

Frame #1 showing the UI fading when the timer is running.
Frame #2 showing the UI fading when the timer is running.

As part of adding a minimal amount of distraction to the user's workflow, the rest of the app fades out when the timer is running.

Mobile App Development

Minimal Interface banner
Timer customization banner

The mobile app was developed using React Native with Expo. Features of the app include a minimal interface, timer customization, dark mode, and automatic switching between focus and break modes.

Web App Development

Screenshot showcasing the web app.
Screenshot showcasing the web app.

The web app was developed using React Native Web, starting from the same codebase as the mobile app. Additionally, the web app supports keyboard shortcuts for every possible action, and displays background images retrieved from Unsplash.

Both the web and mobile apps were developed over a 3-month period, with a stream of new features and improvements added post-launch.

Like this project? Consider sharing it: