Dorotimer.app

Tools

The content marketing site runs on Statamic, our preferred CMS for website builds. The app itself is built in HTML, CSS, and JavaScript. hotkeys.js is used to manage keyboard shortcuts, and Plausible handles analytics.

UI/UX Process

Our approach to UI and UX design is rooted in work on practical projects, where pixel-perfect mockups often do not reflect the reality of bringing a vision to life. Instead, we rapidly prototype and design in code, in a continuous process of creation, testing, and iteration.

Project Requirements

We start with the project requirements and constraints. In other words, what are we building, and more importantly, why are we building it?

In this step, we also conduct a competitive analysis to assess how our project's plans compare with existing options in the market. What works and does not work in those options?

User Research

Next, we do user research to connect the established 'what and why' with 'who' we're building it for. We observed and interviewed real users of pomodoro timer apps to experience using each tool from their perspective.

In this case, we settled on two core user stories (or personas) for our target audience:

• As a self-employed human working at home or in a coffee shop, I want a timer app I can start and stop with keyboard shortcuts that is so simple to use I don't have to think about it.

• As someone who gets distracted, I want to use a Pomodoro timer with break reminders so that I can maintain focus and avoid burnout.

Narrow Focus

By narrowing our focus, we could then build an app that a specific audience would actually use, rather than building one tool for everyone. In previous ventures, we learned that trying to build something for everyone inversely results in building someone for no one.

Prototyping

With our app's focus in hand, we quickly prototype a minimally viable product (MVP) to test if our findings in the user research step pan out in the real world.

Test and Iterate

We test this prototype with users that fit our focus demographic, beginning a continual process of receiving feedback, iterating, prototyping and refining changes, and testing again.

Competitive Analysis

Since this was a new app (rather an a redesign of an existing website or product), the pain points existed entirely in other tools. These doubled as a competitive analysis to help us understand the landscape.

We looked at the following apps:

1. Pomofocus

2. TomatoTimer

3. Pomodorotimer.online

4. Tomatotimers

5. Easy Pomodoro

6. Online Timers

What we learned from competitive analysis

We wanted the app to require as few steps as possible to complete tasks. Common tasks include: start the timer, stop the timer, switch between timer mode and the two types of breaks (short / long), and access app settings.

Each of these tasks require just one button press or keyboard shortcut to accomplish, saving our users time and mental acuity to focus on their work or study tasks.

Prototyping

In this project, design and development happened simultaneously and iteratively in an Agile workflow. Mockups were done in code rather than by way of high-fidelity Figma prototypes. This allowed for quickly iterating as project requirements changed or decisions that conceptually made sense were found to not be intuitive in reality.

Test and Iterate

Much like UI/UX design and development being a simultaneous iterative process, testing also happened throughout the build workflow. We use tests of functionality, usability, page speed, and accessibility.

Functionality

• As a progressive web app (PWA), is the app installable? Does it work in modern web browsers?

• Do the buttons yield the expected result?

• Do keyboard shortcuts work?

Usability

Some insights from early testing with users who fit our demographic target:

• In early versions, we found our timer start and reset buttons were too close together on small screens, leading to errant taps. So we made those larger.

• The mode switcher became a jumbled pile of buttons on small screens (much like Easy Pomodoro from our competitive analysis)

• The settings menu initially lacked sections, which made finding the right setting difficult.

Page Speed

We wanted the app to feel responsive and like it loaded instantly, so we made heavy use of static caching to achieve that effect. We tested load times using Lighthouse, Page Speed Insights, and other tools.

Accessibility

We followed the WCAG 2.2 checklist for AA-level accessibility features when designing and building the app. We also used the Axe browser extension, and accessibility scanning tools.

• ALT Text and captions

• ARIA roles and labels

• Keyboard navigable

• Color contrast

Results

The new tool fills a much needed gap in available pomodoro timer applications. As a recap, the app supports the following:

• Internationalized for 12 major languages

  • Locate every word or phrase in the app

  • Create translation keys for each of those, repeating for every language you need to support

  • Use a shortform of that key as a placeholder in the template for that word in any given language.

  • Implement a means of switching languages.

• Lets users opt out of tracking analytics

• Customizable alarm sound

• Light and dark mode

• Keyboard accessible and WCAG 2.2 compliant at an AA-level.

Roadmap

The team has a content marketing plan in place to write comparison articles that present dorotimer as an alternative to existing timer apps. Over time, this may grow the tool's user base and provide opportunities for advertising revenue or a subscription model with advanced features.

Areas of potential improvement

• cleaning up the settings interface to be more intuitive

• adding more language translations (including RTL support)

• adding an option to change background colors

• letting users select an alarm sound from Spotify or Apple Music

• creating a task management tool (or integrate with existing ones)