Stretch

Self-Initiated Project
Role
Product Designer
Timeframe
1 week

Stretch is an interval timer that helps users build customisable stretch routines.

The Challenge

Make it easy to create and follow custom stretching routines

People managing chronic pain and rehabilitating injuries are often prescribed targeted stretches with precise hold durations. These programs can be awkward to follow, particularly when the number of repetitions and hold durations vary between exercises.

This project is borne out of a personal need for an interval timer that makes it easy to follow such programs. I first experienced this issue a few years ago when I injured my lower back and was recommended stretching to ease the pain and advance my recovery. I often found myself using a combination of the Notes and Timer apps on my iPhone. I knew there had to be a better and easier way to follow custom stretching routines.

High-level goals:
  • - help people tailor their stretching practice;

  • - reduce symptoms of chronic and acute pain;

  • - support injury recovery;

  • - and improve user mobility, range of motion and flexibility.

Discovery

I first sent out a survey to understand whether other people were experiencing similar issues to me. I wanted to know if others would benefit from an easier way to follow medically prescribed stretching routines.

The survey probed respondents about their current stretching practice, what motivates them to stretch and how the experience could be improved. I recruited participants via flexibility, pain management and injury recovery communities on Facebook and Reddit. A total of 124 people (68 female, 56 male) responded and completed the survey.

36%
of people experiencing chronic or acute pain use stretching as a pain-management tool.
42%
follow prescribed routines using a written list of exercises.
59%
switched from in-person classes to video tutorials since Covid-19 forced gyms and studios to close.

Customer Profiles

I summarised the findings into three personas, each with different characteristics and reasons for using Stretch. They helped me build empathy with my user group and determine which features to prioritise.

User persona image
Up facing arrow icon
One of two personas created during the project. Illustration by Pablo Stanley
Wireframe image
Up facing arrow icon
Paper wireframes provided a way to quickly explore content structure and layout variations

User Testing

I converted my best ideas into clickable prototypes using Figma. These helped me further develop the structure of each page and made it possible to remotely test the app with potential users.

Determined to make Stretch work the way people want, I conducted three rounds of user testing with iterations based on feedback. Participants were asked to complete specific tasks (e.g. find, edit and start the premade Evening Wind Down routine) while continuously thinking aloud. In addition, at the end of each session, I interviewed participants to understand their overall experience interacting with Stretch.

Wireframe image
Up facing arrow icon
Selected screens from a low-fidelity prototype
User flow image
Up facing arrow icon
A user flow representing a typical user's experience creating a routine

Final design

Introducing Stretch

Pre-made Routines

During the survey and user testing sessions, participants said they wanted to edit pre-made routines rather than create them from scratch. Based on this feedback, users can either create a blank routine from by tapping "New" or edit a pre-made routine found on the Explore page.

high-fidelity design showing how to edit a premade routine in Stretch
Up facing arrow icon
Editing a pre-made routine. Illustration by Kate Mangostar

Build Custom Routines

Stretch gives users the ability to add, remove and customise the exercises in a stretch routine. Tapping "Add" will open a library of available stretches. Once an item is selected, users can edit the reps, hold duration and rest time before adding it to the routine.

high-fidelity design showing how to add an exercise in Stretch
Up facing arrow icon
Adding an exercise to a routine

Follow Routines

When users are ready to begin stretching, all they have to do is tap the play button, and Stretch will automatically step through each exercise in the program. Users can see which exercises are coming up in the program by swiping on the tab at the bottom of the screen.

High-fidelity design showing how to expand a routine in Stretch
Up facing arrow icon
Viewing the routine from the timer screen

Quick Access Interval Timer

An area for improvement highlighted during testing was that sometimes no routine is needed, just easy access to an interval timer. For instance, one participant gave an example of doing a set of brief cool-down stretches after a run. Based on these findings, I added a simple interval timer to the tab bar.

high-fidelity design showing light and dark mode versions of the timer screen
Up facing arrow icon
Quick access interval timer, light and dark modes

Learn About Stretching

Findings from the survey and interviews suggested that users want to know more about the health benefits of stretching. To meet this need, I added a Learn section to the app where users can explore recent articles and research paper summaries about stretching, mobility and flexibility training.

high-fidelity design showing how the Learn section of the Stretch app
Up facing arrow icon
Learn tab and "See all"