Updating the design of a productivity timer app

With a new name and design comes version 1.4 of FocusTide (formerly AnotherPomodoro). In this post I'll take a look at how I tried to make the app's design more compact.

FocusTide is a modern and flexible Pomodoro timer application I've been working on for some time now. It has timers that keep ticking after reaching the limit (people don't usually do something in exactly 25 minutes, this keeps track of that), a to-do list for each section, multiple timer styles, lots of settings and overall a design that tries to go out of the user's way.

I've been wanting to get rid of the clunky design of the top schedule view, the big control bar and the weird placement of the to-do list's button -- all of which were especially troublesome on mobile, -- but had no idea how. They all worked okay-ish on the desktop (as there's plenty of screen space there) but each of these components had their own share of design problems.

But before I get to the problems, here are some of the big changes coming in version 1.4, in a compact form:

• AnotherPomodoro is now FocusTide. This rebranding is to avoid potential trademark-related clashes with the pomodoro word, which cannot be so freely used.
• There is no separate home page now, just the timer view, accessible in the place of the home page (simply at https://focustide.app). If you had the /timer page previously bookmarked, don't worry, it will still work (and redirect to /).
• The user interface got a big overhaul. New font, a more consistent and rounded design for all components, a compact top app bar, new timer controls and more harmonized colors.
• The onboarding view now lets you set some of the settings for first use. Previously, it was just a bunch of small "reminders" of what the app can do, but now it is a complete setup process. Much more useful. It also has a progress bar so you know how much is left.
• Time inputs are now easier to handle. The time input fields were reworked, they should be easier to use (no more small buttons to change between minutes and seconds).

Now, let me tell you how I (believe I have) solved those design problems.

Layout changes

First, as we'll need this later, the whole layout. My big problem with it was stuff that was scattered across the screen: the to-do button was near the bottom right corner (1), the settings button was in the upper right corner, and the schedule view was top center (2). Additionally, hacks were needed for mobile screens: the settings button was merged into the schedule view and the to-do button pushed the control buttons to the left (causing the timer start/pause button to be off-center) at mobile screen breakpoints.

This was both difficult to maintain and did not exactly achieve its goals: the control buttons were pushed to the side when the user enabled the to-do list, potentially causing missed taps due to muscle memory. The settings button was actually two buttons: one was shown on desktop, another was shown on mobile. The schedule display needed a lot of style changes on different screens.

Solutions

The schedule view at the top had big rectangles in it that multiple users identified as clickable buttons. They were not supposed to be clickable, instead they were just there to inform the user of what section they are in (work, pause or long pause) and what sections will follow. This was embedded in a grey box and it only looked right on mobile if I stretched it to cover the whole width of the screen. Essentially, the top part became a big panel on mobile devices and covered an unnecessarily large amount of screen space. Since I realized I like rounded designs more, I tried to create something smaller and circular.

To start off, I realized that a more traditional-looking approaching could work and went off to implement an app bar, essentially compacting everything into a 56px high bar. That meant the whole schedule view and the to-do and settings buttons. The buttons were easy, the schedule view was a bit more tricky. Since I wanted to put circles next to each other (and wanted them to seem less clickable), I wrapped them in a fully rounded panel and made them small. Then, since vertical space is small, I put the section's name right of this panel. The end result was a lot more compact bar that still achieved what it was supposed to.

For some extra flavor, I made the inactive entries smaller through a CSS scale transform and gave a white ring to the active item. I also reduced the default number of items from 5 to 3 (though this is still customizable).

Now the top bar does not block the view and it's also a lot smaller. Plus, I moved the to-do button here, too, so it does not shift the position of the control buttons anymore.

Colors

I use TailwindCSS for styling the app. I love that it's allowing me to have creative freedom over how I style my app instead of giving me prebuilt components (which is also great sometimes, especially for prototyping).

What I realized, though, is that I kept using Tailwind's colors freely, which made it difficult to identify parts of the interface: I used a 800 slate for one background, then later a 700 grey for another. The app was full of colors that were close to each other, but were still different. In the meantime I also used Flutter and Material Design 3, which uses primary, secondary (and sometimes tertiary) and surface colors and their variants (like primary, on primary, primary container, on primary container).

This use of abstract colors also helps keep the design consistent: a primary button is always of primary color and its contents are "on primary" colored. If I later decide to change the primary color of the app, everything changes with it (and I don't have to manually hunt down the individual uses of certain colors and their shades). Colors also have their dark variants, so I don't have to manually search for contrasting colors for a dark theme.

To make things even easier, I used the Material 3 theme builder to get a harmonic color theme for the app and set them as Tailwind colors, like so:

{
  colors: {
    primary: {
      DEFAULT: '#a7373a',
      container: '#ffdad8',
      oncontainer: '#410007',
      dark: '#ffb3b0',
      darkon: '#670311',
      darkcontainer: '#871f25',
      darkoncontainer: '#ffdad8'
    }
  }
}

Then I removed all uses of specific colors (like bg-red-200) and instead just used these abstract colors (e.g. dark:bg-primary-dark dark:text-primary-darkon). This helped me create a user interface where no component feels out of place.

The control bar

Another part to renovate at was the control bar. It used negative margins and z-index and fancy blurred animated rings to operate. It looked cool, but the buttons were close together, making it easy to tap the wrong button on mobile. Also, that spinning blurred ring wasn't a battery-friendly choice.

I no doubt like Material Design 3, and when I was looking for inspiration for a better design, I came across Google's Clock app, more precisely its stopwatch page.

It was exactly what I needed: the start/pause button in the middle and two secondary buttons to the sides. The main button is bigger and wider (though only while the stopwatch is running) and uses the primary color scheme. The buttons on the side use the secondary color scheme and are circle shaped. This is what I ended up implementing as well, without the resizing effect. Also, the secondary buttons disappear when they cannot be used, just like in the Clock app. And finally, the fancy glowing-rotating outline is gone. It was redundant and did not fit into the overall design of the app. The new design looks like this:

A quick word on fonts

Previously the app used Poppins, a friendly, rounded sans-serif font that looks a bit similar to Google Sans and became hugely popular. I now have switched over to Lexend, a font I really like and use as the display font on my KDE desktop, too.

The end results

With the above changes, I believe the app looks a lot cleaner than before.

What do you think? Feel free to share your thoughts on the changes and tell me what you would change. Check out FocusTide at https://focustide.app and see it in action!