Stretch

๐ŸŽจ
UI Design
๐Ÿ•น
Usability Testing
Platform
Mobile
Client
Self-Initiated
Timeframe
1 month

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

For most people who stretch often, itโ€™s common to follow premade routines, e.g. in a class, following a YouTube video or using a yoga instruction app. However, people managing chronic pain or rehabbing an injury are often prescribed targeted stretches with precise hold durations. These exercises can be awkward to time, particularly when there are multiple exercises to complete, each with varying durations.

The Challenge

Make it easy to follow a custom stretching routine

This project is borne out of a personal need for an interval timer that makes it easy to build and follow custom stretching routines. An exploration of the current product market revealed that no such app exists on the Google Play or Apple App stores.

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

  • - reduce symptoms of chronic and acute pain;

  • - support injury recovery;

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

Kickoff

Is it Only Me?

I started by sending out a survey to determine whether Iโ€™m the only person looking for a solution to this problem. It included questions around what motivates people to stretch and what their practice looks like. I shared the survey in several flexibility, pain management and injury recovery communities on Facebook, Slack and Reddit. I received a total of 124 responses (68 female, 56 male) from people aged 18-44.

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

Customer Profiles

Meet Tim, The Injured Pro

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

Stretch case study customer profile image
A detailed user profile. Illustration by Pablo Stanley

User flows

Thinking Through the Process

Before I was ready to start wireframing, I first needed to clarify the paths users will take through the app. Using each persona as a test case, I created user flows detailing the steps from the entry point, through the process and towards the final action.

Stretch user flow image
A user flow representing Timโ€™s experience creating a routine

Ideation

Layout Exploration

Building on the requirements gathered during my initial rounds of research, I explored several potential solutions to my design challenge.

Stretch early sketches image
Selected sketches from a solo Crazy 8โ€™s exercise

From Ambiguous to Obvious

Usability Testing

Later in the project, I moved into Figma and created a set of low-fidelity wireframes. These helped me further develop the basic structure of each feature and made it possible to easily test the app with potential users. I carried out three rounds of user testing, each time iterating the app based on feedback. Following each session, users were also interviewed to assess their overall experience interacting with Stretch.

Stretch mid-fidelity wireframes
Selected screens from an early testing session
Stretch high-fidelity mockup cover image

Final Concept

Introducing Stretch

Use Premade Routines

While most participants were interested in tailoring their practice, some expressed that creating a routine totally from scratch might be challenging. Based on this feedback, users can either start with a premade routine or create a blank one by tapping โ€˜Newโ€™.

Stretch high-fidelity annotated image
Explore screen

Quick Access to an Interval Timer

An area for improvement highlighted during user testing was that, on occasion, 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 this feedback, I added a simple interval timer to the tab bar.

Stretch high-fidelity annotated image
Simple interval timer, light and dark modes

Learn About Stretching

Findings from both the questionnaire and the interviews suggested that users arenโ€™t fully aware of the health benefits of stretching. Here, people can explore recent articles and research paper summaries about stretching, mobility and flexibility training.

Stretch high-fidelity annotated image
Learn tab (left), See all (right)

Build and Edit Custom Routines

Opening a routine will take users to the first screen shown below. When they tap edit, the app presents a list of stretches in the program. Selecting add will then open a library of available exercises. Once an exercise is selected, users can edit the reps, stretch duration and rest time before adding it to the routine.

Stretch high-fidelity annotated image
Editing and adding an exercise to a routine. Illustrations by Kate Mangostar
Routine timer expanded

Thanks for scrolling ๐Ÿ˜ƒ