What’s New In TimeTune 3.0

Originally, we didn’t want to name this version as 3.0 🙀

The initial idea was to adapt only a few visual components (like text fields) to the latest Material Design guidelines and publish a minor update.

But we soon realized that it wasn’t possible to adapt those components without redesigning other adjacent components and the screens that contained them.

So one thing led to another and… we ended up making a full redesign of the interface 😅

However, we didn’t make the redesign just for the sake of it. The goal has been to improve usability, legibility and functionality in all possible places.

In this article we’ll take a look at the major changes in TimeTune 3.0, but you’ll find a lot of minor tweaks and improvements throughout the app.

DATA INPUT

One of the most significant changes in the new design is the different aspect of data input screens:

As we commented before, everything started with text fields. After reading Google’s research about usability in text fields, it was clear that we needed to adapt to their latest recommendations.

Then we started to progressively adapt the rest of data input fields to give a harmonious look to each screen. In that regard, Google’s Material Components library has been an essential tool for us.

TAGS

On the new design, we used Material Design chips to visualize tags:

The new tags represent much better the concept of ‘tag’ and they appear in the same way tags appear in other apps (that is, with the colored background encompassing icon and name).

Using chips to represent tags provides a few additional benefits. To better explain those benefits, we need to compare how tags appeared in the schedule section in the old design vs the new design:

By looking at the screenshots, we find that the new design provides some advantages in the following areas:

• Coherence: in the old design, tag icons and tag names seemed to be two independent entities; in the new design it’s clear that they belong to a single one (the ‘tag’).
• Visibility: in the new design, tags stand out much better and we can identify them faster than before, as the eye now sees a single continuous entity instead of two separate ones (icon and name).
• Functionality: the new design shows secondary tags as they deserve (with icon, color and name); secondary tags were a heavily underused feature in TimeTune.

ROUNDED CORNERS

As you can see from the screenshots throughout this article, we applied rounded corners to most elements in the app (input fields, dialog windows, boxes in general…).

It’s a well-known fact in User Interface design that rounded corners are easier on the eyes and use less cognitive resources. And they make screens look pretty too 😍

Again, Google’s Material Components library and their guidelines about shape have been essential to implement this.

POP-UP NOTIFICATIONS

The new pop-ups show secondary tags as they should (with color, icon and name):

Apart from that, we took the opportunity to implement a new functionality that didn’t exist before: comments from activities and blocks will now appear in pop-ups.

DATE/TIME PICKERS

Date and time pickers in the old design still followed the old ‘Holo’ visual design (the outdated design you could see in Android devices before Material Design guidelines came to light).

The new pickers (courtesy of the MaterialDateTimePicker library) are definitely nicer and friendlier:

DARK THEMES

One big problem in the old design was text legibility in dark themes. Any text tinted with the accent color (red in the free version) had poor contrast and was difficult to read.

The problem was we were using a shadow of color too strong. After implementing Google’s Material Design guidelines about dark themes, text is much more legible:

BLOCKS

‘Blocks’ are basically what we used to know as ‘Events’, with two essential differences:

• You can add tags to blocks.
• Titles in blocks are optional.

Now that blocks can have tags, they will participate in the statistics of the day (the ‘Day summary’ sub-menu option in the ‘Schedule’ section). And that’s a big step forward towards our mission.

We could have kept the name ‘Events’ for this feature, but as we explained in our previous article, we wanted to make it clear that -for the purposes of the app- we are dealing with blocks of time, not calendar events.

For the same reason, we made block titles optional. You can just add a block of time with the ‘Work’ tag for example, without needing to write a name for the block.

For more details about blocks, you can check our previous post.

👉 An important note:

You’ll find that we added a default ‘Block’ tag to your blocks and that your previous event colors and icons are missing.

Unfortunately, there was no way to preserve your old event colors and icons in a simple way.

We are really sorry about that 😥🙏

Icons and colors for blocks are now achieved through tags. You can change the default ‘Block’ tag for the tag (or tags) that most properly represent the purpose of the block.

RECURRENCE DATES

Before TimeTune 3.0, we calculated recurrence dates for events (now blocks) with our own custom (and long) algorithm.

Implementing a recurrence date algorithm is no easy feat, so instead of reinventing the wheel we decided to use one of the best recurrence libraries that exist for Android: lib-recur.

This change allowed us to group the recurrence options into their own screen too:

‘FILTER’ IS NOW ‘SEARCH’

In the old design, the ‘Filter’ sub-menu option in ‘Tags’ and ‘Events’ allowed us to search the items that contained a specific string of characters.

But ‘Filter’ was a word that caused a considerable amount of confusion for some users, as it may have a different purpose in other apps.

‘Search’ is the right word for this option.

Additionally, and taking into account that now blocks can have tags, the ‘Search’ option for blocks will allow you to search by tag or by block name:

WIDGET

We adapted the widget to the new design as well:

The new widget corrects some mistakes from the old design:

• The most important data for each row -and the data that should appear first on the left- is the time of the activity, not its icon.
• Tags are a single entity and the visualization must reflect that; it made no sense to separate the icon of a tag from its name in the old design.
• For each row, secondary tags must appear with the same level of visual importance as primary tags.

THE ROAD TO TIMETUNE 4

For those of you who follow our blog regularly, we must tell you that this version of TimeTune doesn’t contain all the changes we had in mind when we talked about TimeTune 3 in a previous post.

There are still many improvements we need to implement in the app (you can find some of them at the end of this article). But the new visual design deserved its own major release number.

So as soon as this version goes live, we’ll start working on other important improvements that will lead us to TimeTune 4.

IMPORTANT

We know that a full visual redesign is a big change and may shock some users. When we’re used to something, change may disorient us for a while, even when it’s for the better.

If there’s something you don’t like from the new design or you experience any kind of problem on the new version, please be so kind to let us know so we can improve the app.

You can leave a comment here or you can contact us at:

• timetuneapp@gmail.com
• https://twitter.com/timetuneapp
• https://www.facebook.com/timetuneapp
• https://www.reddit.com/r/TimeTune

Thanks a lot! 🧡

(Top illustration by Freepik)