Chrono

A modern, beautiful calendar/tasks management app
for professionals.

View demo v0.1.0DESKTOP ONLY
DesignDev

My Role

Personal Project

The Problem

Most productivity workflows suffer from a fundamental disconnect between task planning and time scheduling. Users capture tasks in one system but manage their calendar in another, creating cognitive overhead, duplicate entry, and poor visibility into how planned work fits within available time.

Team

  • Tommy Smith - Solo Designer, Solo Developer

Platforms

Desktop Web

Overview.

Chrono is a comprehensive productivity application that bridges the gap between task management and calendar scheduling, designed to solve the common friction between planning tasks and actually executing them.

As the sole product designer on this project, I tackled the challenge of creating a unified interface that seamlessly integrates both paradigms without compromising the strengths of either.

Loading video...

Personal Goals

1

Test my development skills whilst building a product that I can use daily

Part of the thought process behind building Chrono was to explore new ways to prototype my ideas, and gain a deeper understanding of the development process.

I wanted to not only test my product design skills, but also see the limits of what I was capable of building on my own.

2

Better management of my time and tasks

I wanted to create a tool that would help me manage my time and tasks more effectively, but also really test my UX understanding. Chrono has been a great way to do this, developing, testing and iterating on the product.

3

A beautifully crafted interface that does not compromise on functionality

As a designer, I think I have often fallen into the trap of creating interfaces that are too complex, or too minimal. Chrono has been a great way to test my understanding of both, and create a product that is both functional and beautiful.

Command Bar

The command-bar is an intuitive, contextually aware component that allows users to manage events and tasks with ease.

Task Creation

The command-bar can be used to create tasks either by navigating the 'Add new' menu, or by pressing 'SHIFT + T'

Loading video...

Event Creation

The command-bar can be used to create events either by navigating the 'Add new' menu, or by pressing 'SHIFT + E'

Loading video...

Custom Recurring Events/Tasks

The command-bar can be used to create custom recurring patterns for events and tasks using the 'Custom' recurrence option.

Loading video...

Multi-task Editing

If we shift and click tasks in the Sidebar we are able to batch edit tasks using the command-bar. We are able to change tag groups, change the priority of tasks, complete tasks and even delete multiple tasks at once.

Loading video...

Calendar Navigation

We can also use the command-bar to navigate to different dates in the calendar. Either with the 'Today' button and arrow keys/buttons, or by typing in a date using the 'Go to date' option.

Loading video...

Settings

Chrono was built to be customisable, we have a myriad of settings that allow you to change the look and feel of the app to your liking, with even more to come.

Profile

A pretty simple profile page, with some nice dropdowns for setting your birthday, notice the dynamic natural language date picker for setting your birthday 🎂.

Loading video...

Calendars

From the calendars page in settings the user is able to select a default colour for events in the calendar, as well as set a default duration for events with a custom made slider component.

Loading video...

Today's Tasks

The tasks page in the settings allows us to toggle on the 'Today's Tasks' feature, which will show us all the tasks that are due today in the sidebar, we also have a nice little micro-animation when we complete all the tasks for the day.

Loading video...

Task Management

The tasks page allows us to manage our tag groups, this includes, re-ordering them in the sidebar, changing their name, colour as well as deleting them. We are also able to filter through our tag groups and create new ones.

Loading video...

Dark Mode

As with any modern app, we have a dark mode option! Easily change your theme from the 'Appearance' page in settings. We are also able to set the system theme to automatically change the theme based on the system settings.

Loading video...

Conclusion

This was just a small selection of the features that Chrono has to offer. I urge you to check out the demo and see for yourself, this is an ongoing project and I will be adding more features and improving the product as I go. If you have any feedback or suggestions, please feel free to reach out to me!

Overview
10%
  • Overview
  • Personal Goals
  • Command Bar
  • Sidebar
  • Settings
  • Conclusion