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:

Right: data input fields in new design
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:

Right: tags in new design
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:

Right: schedule in 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):

Right: pop-up notification in new design
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:

Right: date picker in new design

Right: time picker in new design
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:

Right: colored text has better legibility in new design
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:

Right: widget in new design
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)
Hi..
I feel if there is a web version of the app which in-turn sync with my mobile app, it would be easier to set/plan our routine in laptop and start using it on our mobile will be much easier.
Do you have any such option(s)?
Hi! For the moment we don’t have that option, but it’s a possibility we’d like to consider in the future, provided the app grows adequately 📈🙂
I also really want this feature. It’s hard switching my schedule quickly when things change on a mobile device.
Would it be possible to expose an API, at least?
Me pueden explicar para que sirve la opci9n programar soy premium
¡Hola! Podrás ver cómo funciona el programador en nuestra página de tutorial (concretamente, en la sección ‘Programa cambios de rutina’): https://timetune.help/ee/getting-started/
Si después de seguir el tutorial tienes alguna duda adicional, puedes contactar con nosotros en timetuneapp@gmail.com y la solventaremos 😊
I loved reading about the app’s news, and I also learned a little about the Material Design guidelines. If humanity is to perish with the Climate Crisis, please upload the app’s repository to github, which will soon be saved on a server in Antarctica so that future human generations or alien races have access to this wonderful app. See ya later