february – march 2019

HI.IT is a concept for an app designed to make interval training easier and more accessible.

individual project / UX, UI, Interaction design

Introduction

As a student, I’m often looking out for opportunities to gain some experience conceptualizing and designing applications end-to-end. In one of my searches, I came across a brief from Luke Jones on the great site designchallenge.xyz. The gist of the brief: create a workout timer specifically for high-intensity interval training, or HIIT. I have an interest in weightlifting and exercise, so the brief stood out to me as a great starting point.

I’ve tried out a fair amount of different fitness apps. There's a huge amount out there, but in my experience, it’s rare to find one that hits the mark. It’s common to find either complicated, bloated applications that try to do too much, or tools so stripped down that you have trouble getting the intended functionality out of them. Either way, the experiences leave something to be desired, and it’s easy to feel daunted by the apparent complexity of the culture surrounding fitness.

With this in mind, and using Luke’s brief as a jumpoff point, I arrived at a core design question:

How might one design a tool to help make high intensity interval training more accessible?

Research and Initial Assumptions

I started by doing a bit of work to contextualize the problem. I needed to identify some key considerations:

  • What is the value of the tool?
  • Who is this tool for?
  • Where and when would this tool be used?
Value proposition – why should it be made?

The value of this app can be divided into two main categories.

  1. Ease-of-use and simplicity. Regular phone timers and many workout apps can be a hassle when alternating between two different time lengths, especially when the user is in the middle of some high intensity exercise. A clear and simple tool to help flip between timers could encourage exercising by removing inconveniences.
  2. Habit-forming utility. Although many workout machines (e.g. treadmills, ellipticals, etc.) have timers and workout regimens built in, friction increases when the user wants to keep track of their progress and increase workout difficulty over time. Having a tool that reminds you to work out and congratulates you for meeting goals could be an asset for people who find it challenging to self-motivate.
Personas – who is it for?

The target demographic can be identified generally in a few ways.

  • Millennials are health-conscious, and fitness is seen culturally as being an important aspect in a well-rounded, fulfilling way of life. This point together with the fact that they’re a group highly comfortable with using technology in their lives positions them as a likely user of the tool.  
  • Personal trainers may look for easy and attractive tools to help their clients stick to a workout routine.
  • Busy professionals care about their health but might not have time to go to a gym regularly. They may need a tool to help them hit their fitness goals in an efficient way.
Context – where and when will it be used?

To understand the user’s context and needs, it helps to establish the environment in which the tool in question might be used.

Potential conditions include:

  • located at a public gym; lots of people around, potentially noisy
  • located at home, in a home gym, or in a yard
  • tool will likely be used for extended periods of time, stretching from 10 to 60 minutes
  • lighting conditions will likely be good while workout out
  • user will be busy exercising while using the tool, so the majority of the functionality must be set prior to the start of the workout

What does this mean?

  • The app must be usable in crowded, loud area and while exercising;
  • The app must be suitable for use without constantly looking at the interface—visual, auditory, and haptic feedback will be necessary.

After identifying these considerations, I started some ideation in order to understand how this tool could work.

Ideation

I developed some rough ideas about how the tool could tackle both initial goals: ease of use and habit-forming utility. I decided that dividing functionality into two main categories—individual timers and progressive programs—would let both casual and frequent users get the most out of the app. The individual timers would allow for quick-start individual workout sessions, while the programs would increase in difficulty over time and track the user’s progress as their abilities strengthen.

Precedent analysis

I looked for a few precedents before delving too far into the design process. I made sure to look for examples of products that did a good job of distilling the habit-forming process into smooth and easy flows. Some of these examples include

  • Habitify
  • Headspace
  • HabitMinder

These products all included some elements which I found to be effective in encouraging healthy habits. Headspace in particular does a great job of gamifying accomplishments to nudge the user into forming lasting habits. I kept it in mind when moving forward.

System Map

Creating a system map helped me to get a more defined sense of the big picture for this product. I could see where the key interactions would take place and where some main user flows needed to be developed, especially the onboarding flow, the program and timer creation flows, and the workout timer flow.

Wireframes

I started to wireframe the application, using the system map as a jump-off point and keeping in mind the insights I learned. As I developed the wireframes, it became clear to me that the onboarding process I had built in the system map was far longer and more complex than it needed to be, so I trimmed it down to a simple prompt to add a new timer.

Visual Design

After wireframing, I started developing a visual language to keep things consistent across all the elements in the product. I wanted something that felt slick, energizing, and modern while retaining a welcoming and encouraging voice.

I also used the clear and friendly icons from Feather Icons in the design.

Solution

Here’s the final result: HI.IT. It's a simple, habit-forming interval timer that gently helps users meet their fitness goals.  

Link to Figma prototype


Create timers and programs

HI.IT has two core functionalities: Timers and Programs. Timers are simple interval training timers, alternating between a light interval, a hard interval, and breaks if desired.

If the user likes, they can turn a timer into a Program—a timer that adjusts its length and difficulty over time as the user grows accustomed to the original pace. Programs will gently remind users of their fitness goals and increase in difficulty in order to ensure that the user is always pushing themselves and growing.  

The interval timer

HI.IT allows the user to set the light interval, hard interval, and break length of their workout. It then plays out seamlessly, allowing the user to focus more on their training and less on their phone.

Keep track of progress

Keep track of the progress you make and see in real time how you’re accomplishing your goals. Check the calendar to see which days you’ve trained, or see some more in-depth stats about your current streak, your total workout time, and more.

Reflection

Taking on this project was a great exercise in self-led work. I was able to set deadlines for myself and make sure that I was using a workflow that felt appropriate and justified.

I’m happy with the way I was able to distill the experience of a flexible interval timer into a straightforward and accessible product. I’m also satisfied with the visual design of the piece. The people I’ve asked about it tend to agree that the interface is tasteful and clearly communicates its purposes.

During the project I learned about the importance of building a design system and sticking to it, even if the task at hand is relatively simple. The visual cohesiveness of this project surpasses much of my past work, and I credit this to a visual system that was more comprehensive and thought out than I had used previously.

Of course, there’s also a lot that could be improved. There wasn’t enough in-person data collected during the design process—doing a few more interviews and some user testing would help to better identify peoples’ needs and shed some light on any issues in the design. I also think that creating some user flows early on in the process might have helped me to avoid spending time fleshing out a long onboarding process when something much shorter was warranted.

Conclusion

Ultimately, I’m happy with the product I created. I think that I successfully conceptualized an application that makes interval training more accessible, and I integrated some habit-forming features without going overboard. After a bit of user testing, I’m confident that HI.IT would have a satisfying experience for users.


Back to top
DribbbleLinkedin

Feel free to contact me! I’m always available to bounce thoughts around and I'd love to collaborate.

Email