Clockwise

UI/UX Design, App Development / October 2021 - January 2023

UI/UX Design, App Development

October 2021 - January 2023

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.

Unfortunately, in late January 2023 I made the difficult decision to stop supporting the mobile app, and it is currently not available for download from app stores. Due to college, I didn't have the time needed to work on the app and ensure that it was the best experience for users. I thank everyone who has downloaded the app for supporting the project, and the project will remain up on GitHub for others to fork.

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: