Prototyping a HIIT timer in Origami Studio

View the original post

…Gym kit optional 🏃🏼‍♀️

Ever used a generic HIIT timer and have forgotten which exercise is next in the round or when the workout is nearly over?! 🥵 Here’s how to create your very own HIIT timer in Origami Studio that can be used on your mobile or tablet devices!

We will look at the 7 steps to build this prototype:

  1. Designing the layout
  2. Creating the UI
  3. Creating the timer
  4. Creating a settings screen to adjust the work/rest intervals
  5. Keeping track of progress
  6. Using JSON to create a circuit of exercises that’s easy to update
  7. Adding sound effects

Step 1: Designing the layout in Figma

I want the design to be clear and clutter-free. Although I will be building the UI directly in Origami, I find it easiest to iterate on my designs in Figma.

Figma Designs

Step 2: Creating the UI in Origami

To get started, we need two artboards: ‘Home’ which displays the timer and ‘Settings’ to adjust the intervals and rounds. On the left of the screenshot below is an overview of the layer structure. It’s important to keep everything organised in groups in Origami so we can use the Layout feature (and not get lost when trying to edit a layer!).

Layer list

Layout is Origami’s awesome UI feature that lets us dynamically control the layout of layers inside a ‘Group’. It’s like Flexbox in CSS or Auto Layout in Figma.

Layout: On ✅

We should use Layout throughout the prototype. Let’s look at a specific section of the Settings screen.

Each of the settings sections are actually made up of 3 Layout groups. Starting from the bottom up:

  • The plus/minus buttons are in a horizontal layout group
  • A vertical layout group (with a white border) containing the time text and the buttons group.
  • Finally a vertical layout group containing the setting title text and the previous vertical layout group. We can adjust the spacing, alignment, padding and margins to get our layout just right.

These 3 sections are then displayed in a column by turning on Layout on the artboard.

Step 3: Creating the Timer ⏱

Patches required: Stopwatch, Option Picker, Tap Interaction, Switch, Option Sender, Round, Subtract.

We want the timer to count down from the interval time, however the Stopwatch patch in Origami captures incrementing time from the moment it is turned on. To build a timer, we need to Subtract the stopwatch time from the interval time to get the remaining time.

A feature of this HIIT timer is to allow us to change our work and rest times independently. This is where the Option picker comes in handy. The user’s selected work and rest interval times will be the two options in the picker which feed into the subtraction logic mentioned above.

Creating a countdown timer with the Stopwatch patch.

The stopwatch in Origami outputs time to 2 decimal places, however we want to keep it simple, so let’s use the Round patch before we display this number.

Finally it would be helpful if we could start and stop the timer! Connect a Tap Interaction on the ‘Start’ button to the the Flip input on a Switch. The Switch is connected to an Option Sender to determine whether the Tap pulse is sent to the start or stop input on the Stopwatch. For example: when the Switch is turned off, a Tap pulse will be sent to the Start input on the Stopwatch and off we go!

Step 4: Adjusting the Timer Settings

Patches required: Tap interaction, Counter, +, x.

For this HIIT timer to be useful for all of our workouts, we need to be able to adjust 3 things: work interval, rest interval and number of rounds to complete. This is quite straightforward. Each of the three settings is represented by a Counter. We connect Tap interactions
to the plus and minus buttons on the Settings artboard to the increase and decrease inputs on the counters. As we want to adjust the time intervals by 5 seconds at a time, we multiply the Counter by 5. We can also setup a default value and then add/subtract the counter value from it.

Step 5: Keeping Track of Progress

We need to keep track of our progress, to avoid being stuck indefinitely on press ups! To do this we will use two Counter patches: one for exercises and one for rounds.

Exercise counter

At the end of each rest period, a pulse fires to increase the exercise counter. When the counter reaches it’s maximum (which is the length of our array) it resets and increases the round counter.

Note: The counters starts on 0 (which we want so that it matches up with the indexes of our loop), however we will need to add 1 to them before displaying the number on screen.

Round counter

Step 6: Using JSON for a circuit of exercises

Patches required: JSON, Loop over array, Loop Select, Value for Key.

To create our exercise circuit, we will input data into our prototype in JSON format. We will create an array of exercises, which can easily be adjusted to have more exercises or harder ones depending on how fit you’re feeling!

To be able to select the correct exercise to display on the screen from the array, we can create a loop from our JSON array using the Loop Over Array patch. Then using the ‘Current Exercise Count’ wireless variable from our Counter patch, we can select the specific exercise in the loop we’re interested in, using Loop Select.

The Value for Key patch lets us access the exercise property from the object to display on the screen.

Creating the circuit of exercises using JSON and Loop Over Array

Another bonus of using JSON instead of Origami’s Loop Builder patches is that our prototype is setup to load data from the internet, such as a Firebase database, using the Network Request patch.

Step 7: Adding Sound Effects 🔊

Patches required: Sound Kit, Less than or Equal to, Repeating Pulse.

The final piece to the puzzle; we want to hear the last few seconds when holding that plank! Let’s add some sound.

We want a sound effect to play every second in the last 3 seconds of each exercise. To determine when we are in the final 3 seconds, let’s connect our ‘Rounded Time remaining’ variable to a Less or Equal patch.

Connecting this to a Repeating Pulse patch will set the repeating pulse interval to 1 second when we’re in the final 3 seconds, as a ‘True’ boolean is equivalent to 1 second. Hook this up to theSound Kit and choose your sound!

When starting the prototype, an unwanted mystery pulse fires. To suppress this, I have created a patch component to avoid the sounds being played at the start.

Sound Kit

3,2,1 GO!

Now you’re ready for the hard bit… exercising! 💪🏼

Download the file to give it a try:

Prototyping a HIIT timer in Origami Studio was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.