Designing Tiempo:
What Tiempo is (and is not)
By
Santiago Villalba
·
July 24th, 2023
Santiago is a product designer from Asunción, Paraguay.
Part 1: Context
Tiempo originates from my pursuit to get more clarity in workouts at the gym. I was becoming a little desperate knowing that, at any point, I *constantly* forgot what set I was on. “Am I only in the second set? Out of 4?! No way, I'm too tired!” Or even worse: “Oh no… I absolutely forgot what set I’m doing right now… so… let me do another one just in case” (!).
So I looked for apps to solve this. Fortunately, I found many! But soon it became clear that none of them were made with my use case in mind. Let me elaborate:
1: They were too Granular
To start a workout, you need to input way too much information, some not even relevant or interesting for me to track. In fact, the only three metrics I wanted were:
Which set I was on,
How much time I was actually working out and resting for, and
If possible, what’s my heart rate during this workout, and how many calories I’m burning. After all, I love the gratification of closing my rings, so this app needed to log these workouts into that.
But to actually log workouts in these apps accurately, you need to log way more information than listed above, on every single set. This means:
Before starting: selecting the (single) exercise you'll do from an almost endless list, which requires you to learn its precise name: not everyone knows what a “Spider curl” is, or how it is different from a preacher curl. Certainly not me!
After finishing: logging how many reps you did, and the weight you lifted. These two pieces of information may be useful, but the thing is, logging this in a device with the screen size of a watch (even an Ultra) and most importantly, when you’re the most physically exhausted, can become a lot to ask.
2: it’s not that pretty out there
So it’s pretty clear that apps that already fulfill these needs are indeed already available. In fact, at the time I’m writing this, I am using an app that does all of this in a sufficiently simple way, but does not take full advantage of either the solid platform watchOS provides or the information submitted when you log a workout.
I noticed many missed opportunities. Why are the sounds of pausing and resuming so similar? Why do I have to wait even one second to instantly tell if my timer is paused or running? Why do I have to name each timer I create? And last but not least: Why does this app look like this?
Part 2: The app
Enter Tiempo. It’s born out of this need, but throughout the process, I pushed myself to strip away from the maybe-nice-but-not-essential features, making this an app that’s comprehensive in what people need for regular, non-pro-level strength workouts, but simple enough for everything to be done straight from your watch, from timer creation to displaying essential workout information in less than a second, in the smallest screen I’ve ever designed for.
Extremely limited time + extremely limited space make for a really, really fun design/ideation process:
Functionality
You can create composite timers made of two types of segments: work segments (“steps”) and rest segments in between steps. The total length of your timer will depend on:
The number and length of your segments.
Whether your work segments count down a set amount of time or count up indefinitely.
Timers are named automatically based on the two crucial pieces of info: the amount of steps and the rest duration.
Tiempo uses HealthKit to calculate how many calories you burn on each workout with the same high level of accuracy of the Workout app that comes preinstalled on every Watch. You only need to set the activity of your workout (Strength training, HIIT, running, etc.) when you create a timer.
Part 3: Design
To translate this into UI, I decided to go with a dial-based graphic as the essence of pretty much every screen.
Timer list
Segments on the ring represent the segments in your workout: longer segments are active segments (or “steps”) and the circles in between them represent the rest segments. This lets users very quickly tell timers apart by just glancing at the ring graphics, which is pretty useful in the timer list that welcomes you as you launch the app.
To further help tell timers apart, you can set a color for each.
Upward or downward arrows tell you whether active segments count up or down.
Active timer
In segments that count down and rest segments, an outer ring that surrounds the main ring will proportionally show you how much time is left in that current segment.
Each of the three remaining corners are dedicated to actions such as pausing, ending a “step”, or scrapping/ending the workout.
Color helps tell which segments were completed and which segment is the current one.
Rest segments
To improve their visibility, the circle representing that rest segment will temporarily transform into a longer visual segment too, and then transformed back into a circle.
At the same time, the transition animations will also help highlight these end/start events.
Extra stuff
overtime
Something we also wanted to add is how much time your timer actually is taking beyond what you set out at the time of creating it. Sometimes, those 60 or 90 seconds you set for rest time between your steps are not enough, or you will stop when someone comes over to talk at the gym.
What this means is that sometimes you’ve actually paused for way longer than you thought. To be more mindful of this, we added a count-up timer that’s telling you how much time you’ve been on pause, and in the timer summary, you’ll be able to see the total time you scheduled to take vs. the overtime you did by pausing. You can easily disable this in settings if it feels too anxiety-inducing.
pause
A pulsating glow during pause will instantly let you know the timer is paused, no need to check whether the counter is moving or not.
sounds and motion
Distinctive sounds when pausing, resuming and counting down before starting a timer will let you know of these events without having to look at the screen. But when you do, animations will also help communicate transitions between steps.
Wrap-up
Ivan and I are extremely excited about this app.
Tools like Framer, Figma, SwiftUI and the watchOS platform in general add extra layers of fun to this project for us. We're also doing research on the possibility of adding a workout mirroring to iPhone feature to the app, which will make this project larger, but more fun too.
We're committed and eager to follow Tiempo throughout every step of its lifecycle: from the final tinkering before releasing, user testing, gathering feedback, marketing, providing support, to constantly looking at how to evolve the app, how to monetize it (eventually, maybe?) and so much more.
Designing Tiempo:
What Tiempo is (and is not)
By
Santiago Villalba
·
July 24th, 2023
Santiago is a product designer from Asunción, Paraguay.
Part 1: Context
Tiempo originates from my pursuit to get more clarity in workouts at the gym. I was becoming a little desperate knowing that, at any point, I *constantly* forgot what set I was on. “Am I only in the second set? Out of 4?! No way, I'm too tired!” Or even worse: “Oh no… I absolutely forgot what set I’m doing right now… so… let me do another one just in case” (!).
So I looked for apps to solve this. Fortunately, I found many! But soon it became clear that none of them were made with my use case in mind. Let me elaborate:
1: They were too Granular
To start a workout, you need to input way too much information, some not even relevant or interesting for me to track. In fact, the only three metrics I wanted were:
Which set I was on,
How much time I was actually working out and resting for, and
If possible, what’s my heart rate during this workout, and how many calories I’m burning. After all, I love the gratification of closing my rings, so this app needed to log these workouts into that.
But to actually log workouts in these apps accurately, you need to log way more information than listed above, on every single set. This means:
Before starting: selecting the (single) exercise you'll do from an almost endless list, which requires you to learn its precise name: not everyone knows what a “Spider curl” is, or how it is different from a preacher curl. Certainly not me!
After finishing: logging how many reps you did, and the weight you lifted. These two pieces of information may be useful, but the thing is, logging this in a device with the screen size of a watch (even an Ultra) and most importantly, when you’re the most physically exhausted, can become a lot to ask.
2: it’s not that pretty out there
So it’s pretty clear that apps that already fulfill these needs are indeed already available. In fact, at the time I’m writing this, I am using an app that does all of this in a sufficiently simple way, but does not take full advantage of either the solid platform watchOS provides or the information submitted when you log a workout.
I noticed many missed opportunities. Why are the sounds of pausing and resuming so similar? Why do I have to wait even one second to instantly tell if my timer is paused or running? Why do I have to name each timer I create? And last but not least: Why does this app look like this?
Part 2: The app
Enter Tiempo. It’s born out of this need, but throughout the process, I pushed myself to strip away from the maybe-nice-but-not-essential features, making this an app that’s comprehensive in what people need for regular, non-pro-level strength workouts, but simple enough for everything to be done straight from your watch, from timer creation to displaying essential workout information in less than a second, in the smallest screen I’ve ever designed for.
Extremely limited time + extremely limited space make for a really, really fun design/ideation process:
Functionality
You can create composite timers made of two types of segments: work segments (“steps”) and rest segments in between steps. The total length of your timer will depend on:
The number and length of your segments.
Whether your work segments count down a set amount of time or count up indefinitely.
Timers are named automatically based on the two crucial pieces of info: the amount of steps and the rest duration.
Tiempo uses HealthKit to calculate how many calories you burn on each workout with the same high level of accuracy of the Workout app that comes preinstalled on every Watch. You only need to set the activity of your workout (Strength training, HIIT, running, etc.) when you create a timer.
Part 3: Design
To translate this into UI, I decided to go with a dial-based graphic as the essence of pretty much every screen.
Timer list
Segments on the ring represent the segments in your workout: longer segments are active segments (or “steps”) and the circles in between them represent the rest segments. This lets users very quickly tell timers apart by just glancing at the ring graphics, which is pretty useful in the timer list that welcomes you as you launch the app.
To further help tell timers apart, you can set a color for each.
Upward or downward arrows tell you whether active segments count up or down.
Active timer
In segments that count down and rest segments, an outer ring that surrounds the main ring will proportionally show you how much time is left in that current segment.
Each of the three remaining corners are dedicated to actions such as pausing, ending a “step”, or scrapping/ending the workout.
Color helps tell which segments were completed and which segment is the current one.
Rest segments
To improve their visibility, the circle representing that rest segment will temporarily transform into a longer visual segment too, and then transformed back into a circle.
At the same time, the transition animations will also help highlight these end/start events.
Extra stuff
overtime
Something we also wanted to add is how much time your timer actually is taking beyond what you set out at the time of creating it. Sometimes, those 60 or 90 seconds you set for rest time between your steps are not enough, or you will stop when someone comes over to talk at the gym.
What this means is that sometimes you’ve actually paused for way longer than you thought. To be more mindful of this, we added a count-up timer that’s telling you how much time you’ve been on pause, and in the timer summary, you’ll be able to see the total time you scheduled to take vs. the overtime you did by pausing. You can easily disable this in settings if it feels too anxiety-inducing.
pause
A pulsating glow during pause will instantly let you know the timer is paused, no need to check whether the counter is moving or not.
sounds and motion
Distinctive sounds when pausing, resuming and counting down before starting a timer will let you know of these events without having to look at the screen. But when you do, animations will also help communicate transitions between steps.
Wrap-up
Ivan and I are extremely excited about this app. Tools like Framer, Figma, SwiftUI and the watchOS platform in general add extra layers of fun to this project for us. We're also doing research on the possibility of adding a workout mirroring to iPhone feature to the app, which will make this project larger, but more fun too.
We're committed and eager to follow Tiempo throughout every step of its lifecycle: from the final tinkering before releasing, user testing, gathering feedback, marketing, providing support, to constantly looking at how to evolve the app, how to monetize it (eventually, maybe?) and so much more.