LESS PAIN, MORE GAIN — A NEW GYM APP FOR HIGHER EFFICIENCY WORKOUTS
The brief was to develop an app for a fictional organization “The Wellness Foundation” that would enable trainers to motivate their clients; helping them to adopt a healthier lifestyle and track their fitness progress. The timing was four weeks, as a component of an in-depth IronHack UX/UI course.
I chose iOS mobile as the platform and defined my core target as men 30- 60 years old who were current or former gym users.
My research started with surveys, interviews and observations at local gyms in order to understand how to improve the workout experience as well as the pain points users had with gym apps in general. I then used agile methodology, starting with with a low-fidelity paper prototype, moving on to mid-fidelity and finalizing with a high-fidelity design. Each prototype was tested with users to incorporate feedback before moving on to the next.
CHALLENGES
The project was challenging for a couple of reasons. Firstly tracking a workout, for the user of an app, means recording a lot of inputs, mostly in the form of different permutations of weights, sets and reps.
Just as an example; 15 exercises in a workout equates to over 60 inputs into an app if you do three sets for each exercise and vary the repetitions and weights of each. If you were to only spend five seconds inputting each measure that would add up to 5 minutes a session or one hour a month in wasted time. (Or approx 10% of the average total time working out.) Most apps don’t handle the input of this information that well so it is hardly surprising that many people who start using gym fitness tracking apps stop using them within a month. The apps end up being inconvenient and slow them down.
The second main challenge was to offer something new for mobile use in the crowded world of fitness apps where tracking innovations are commonplace. Many companies tie their apps into their own wearable devices and therefore have an advantage over apps that rely purely on an mobile as their interface for inputting information.
LEARNING
The research highlighted that there are three areas that to get right to build a successful motivational app for the gym.
VISUALIZATION: Being able to visualize what future success looks like is a well-recognized strategy for improving performance and this also applies to the gym. If there was a way to show how the body would be affected by exercise and help visualize improvement in strength this would help to motivate the user.
PERSONALIZATION: Gym goers have many different goals which are interrelated with their other fitness activities at any given time. For example a person who runs frequently may choose to use the gym to exercise his or her upper body as they may feel the lower body is already being exercised sufficiently. Or someone going skiing may want to focus short term on improving strength in their legs rather than spending time on the upper body. Allowing users to focus on the precise muscles they needed to strengthen would be more efficient than providing generic workouts.
ORGANIZATION: Gym goers want to get in and out of the gym fast. If the app could create a workout for the user based on goals then this would the user a lot of time which would otherwise be wasted trying to decide on appropriate exercises to meet those goals. The app therefore has a critical role in organizing gym time to be more efficient. It also needs to make it easy to record the exercises done in order to track progress, which is also fundamental to motivation.
THE RESULT
The concept that I developed was an app that allowed the user to input the INTENSITY with which they wanted to exercise each muscle group and created appropriate workout programs in response. The app also allowed users to see how hard their muscles had been worked over the past session, 60 days and 90 days. Although other apps have included muscle images to help select exercises, no app to date appears to have moved beyond this to specifying intensity of activity by muscle group, which would greatly improve the efficiency of a workout.
Links to a youtube run through of the app and a view of the landing page describing the app are below.
THE DEVELOPMENT PROCESS (The full story)
SURVEYS
Initial research was done consumers via surveys. Some key findings were:
- 80% of gym-goers went to the gym to improve their overall health while 58% wanted to improve physical appearance.
- Success at the gym was measured in terms of increase in physical strength (80%) and ‘the way I look’ (58%).
- The pain points for going to the gym were overcrowding (40% complained this is a factor) and repetition with 21% of gym goers listing the repetitive nature of going to the gym as one of the top three factors that dissuaded them from going.
INTERVIEWS
Interviews with gym goers also provided some key insights about their pain points in the gym.
- NEED FOR GUIDANCE: Gym goers wanted guidance as to the exercises they should be doing.
- EXERCISES WERE TEDIOUS: Gym goers wanted to do something different but in the absence of suggestions reverted to exercises and routines they were familiar with.
- GYM APPS WERE NOT EFFECTIVE: The apps that were available did not feel personalized in the training programs they offered. The input of data also took too much time away from working out.
OBSERVATIONS IN THE GYM
A review of consumers in gyms showed that main pain points encountered were tedious routines, distractions, users’ lack of motivation to push themselves and an absence of tracking and therefore a lack of awareness of how they were improving.
USER PERSONA
Having collected the research together I used it to create a user persona for the primary target of the app who I called Nicolas.
Nicolas is a 35 YO who is married and owns a small business in Miami. His goals are to improve his physical appearance and to get fit for cycling and soccer which he plays occasionally with friends. He likes to find out about new techniques at the gym and wants a more efficient workout. His frustrations are based on the gym being very repetitive, the difficulty he has in tracking his workouts and a reliance on doing the same old exercises which are dull.
THE GOAL
Based on the persona and the pain points previously identified the design goal was defined as “How might we motivate consumers to go to the gym more often by making the workout more efficient.”
Reviewing user needs and brainstorming potential solutions, I developed a prioritizing list of the main features the app should have.
Personalization: This was important if the app was to meet the specific goals that Nicolas had with regard to improving his performance in sports.
Targeting: The app should allow Nicolas to input the amount of exercise he wanted in a precise way. Targeting by muscle group was easy to understand, visualize and could be a good way to input goals.
Preset programs: These could provide an alternative to personalization if Nicolas wanted to address a specific goal without going through the process of selecting the muscle groups involved, for example in the case of cycling for which a program comprising specific leg exercises could be useful.
Work out log: An easy way to track would be essential to cut down wasted time when working out.
Interface with Trainer: A way to connect with a personal trainer through the app would help trainers to engage with clients and the app could encourage those without trainers to get potentially get additional advice from a trainer in the future.
There were a number of other features I considered based on research, however in order to put together a minimum viable proposition the above were the key ones I incorporated.
LOW-FIDELITY VS MID-FIDELITY PROTOTYPE DEVELOPMENT
The first prototype was hand drawn on paper then uploaded onto an iphone for testing using the ‘Marvel’ app which simulates the experience of clicking from one screen to another. User testing among 5 users highlighted issues that needed to be changed for the second prototype. A comparison between the low and mid-fidelity wireframes prototypes is shown below.
User testing highlighted the following issues, circled in orange on the low-fidelity prototype screens above.
LIMITED USER GOALS: Users wanted to define goals more specifically. There were no options to input goals on the low-fidelity prototype apart from helping to develop muscles for specific sports. The mid-fidelity app (circle 6) therefore included goals for strength, endurance and definition.
INPUT OF SPORTS PLAYED. Users were given the option in the low-fidelity prototype to input their favorite sports (circle 2) however they wanted to have an easier way to input sports, therefore buttons with each sport were included in the mid-fidelity version (circle 7)
SELECTION OF MUSCLE GROUPS: Users selected muscle groups in the low fidelity prototype (circle 3) on the body map image and dragged and dropped them to the bottom of the screen in order to build their own program (circle 4). Users however felt the drag and drop feature was unnecessary and preferred to select exercises by just clicking on them. This feature was therefore eliminated.
COGNITIVE OVERLOAD: The fourth screen (circle 5) showed users the exercises that had been created by the program for review and confirmation but included too much information . I therefore split the information into two screens. The first screen would provided a view of the different exercise programs for the week (circle 8) while the second would show the related exercises for each session (circle 9).
MID-FIDELITY VS HIGH FIDELITY PROTOTYPE DEVELOPMENT
The mid fidelity prototype was then retested to allow creation of a high-fidelity version in color with photography and styling. A comparison of some of the screens from the mid-fidelity wireframe and the high-fidelity prototype is shown below.
User testing of the mid-fidelity prototype identified four main issues.
GOAL VISUALIZATION : Some way to visualize goals was needed to complement the generic goals of strength, endurance and definition (top row, far left screen). I therefore decided to use the body map (bottom far left screen) as a way to input the level of intensity for each muscle group.
RIGID ORDER OF EXERCISES: The ordered schedule of exercises (top row, second screen), did not allow allow for re-ordering of exercises depending on the availability of equipment. I therefore layout the exercises in a grid form (bottom row second screen) so that users could see all the exercises at one time and select the exercise they wanted to do next. Completed exercises would be highlighted in blue so it was clear what was left to complete and users could exit the routine anytime using the ‘finish workout’ button.
MULTIPLE SCREENS FOR EACH EXERCISE: In the mid-fidelity version, each screen only showed the weight and reps for one set so users needed to navigate through multiple screens if they did more than one set. By re-grouping the information I allowed information for all sets of an exercise to be shown clearly on one screen. I also made the information on weight and reps editable if the user wanted to change these for any exercise.
INTERFACE WITH TRAINER: The mid-fidelity app enabled the trainer to recommend alterations to the exercise program by suggesting up to three exercises be taken out and replaced by three others. Users, however, felt the trainer was unlikely to add much value by changing a program already recommended by the app. I therefore took out this feature but added a better texting interface with the trainer and the ability for the user to upload the latest workout to send to the trainer for comment.
STYLE TILE
A style-tile was created to guide the development of the look and feel of the final prototype for the app and this showed colors, fonts, imagery and layout of information. These were designed to reflect the values of empowerment, focus and energy which would characterize the ideal gym experience for the target persona. The photography chosen communicated determination and drive. Characteristics which users would want to identify with.
Desirability testing of the imagery, fonts and colors conveyed empowerment and energy while the name Kaizen was associated with a state of mind and focus (oriental associations to philosophy and martial arts) which reinforced the imagery. The name was actually chosen because “Kaizen, also known as continuous improvement, is a long-term approach to work that systematically seeks to achieve small, incremental changes in processes in order to improve efficiency and quality” (Source Wikipedia).
USER FLOW
User flow for the final app channeled users down one of two routes: either choosing from a program that exercised specific muscles that they wanted to target or allowing them to undertake a preset program.
Once the app had collected the required user profile info then a program with workout sessions was created. The number of different sessions depended on the total number the user had requested per week. The exercises suggested for any given session could be completed in any order and the results tracked.
At the end of the session the user could have the app suggest more exercises if they wanted to extend the workout beyond the initial requested length or they could finish the workout. The workout results would automatically be logged for future reference and a body map would show the level of exercise completed by each muscle group during the workout, as well as during the prior 30 and 90 days. The log of the workout could then be sent to the trainer for comment.
ERGONOMIC INPUT
This was one useful feature that was developed through recommendation from an impromptu focus group of IronHack coders. The ergonomic feature below was an input scale which allowed weight and reps to be input with one hand using just the thumb. This promised to improve speed and accuracy of tracking. The area for the thumb input was aligned with UI best practice to minimize discomfort as shown below left. The MVP version of the app would only have this feature optimized for for right handers but the next version would also include left-hand input.
BODY INTENSITY INPUT SCREENS
To show intensity with regard to muscle group exercises I chose to color code. The most relevant system for intensity was actually one which most people in Florida and other parts of the US are pretty familiar with; The hurricane warning system showing the intensity of wind speed. I had come to know this system in detail having driven up to Orlando to escape the path of Irma.
This color coding, while vivid, did not however help users to appreciate quickly enough which parts of the body were being worked out most intensely . Hurricanes have a characteristic which reinforces the meaning of the colors which is increasing intensity as you get towards the eye. With the body map there was no one focal point. Also on the above chart my idea of tapping multiple times on parts of the body was difficult to do precisely and it was not clear exactly where to tap. The legend or the visual of the muscle?
The solution was to show intensity through the degree of saturation of one color which I chose to be orange. I allowed the muscle group to be identified by touching on one of the buttons at the base of the figure to highlight the muscle group and then adjusting the intensity of the workout with respect to that muscle group using a sliding scale on the top right. Multiple buttons could be activated on the bottom of the screen allowing all the body parts that the user wanted to work out to be specified at one time before the app created the relevant program.
MAIN BENEFITS OF THE APP
To summarize, the app delivered on two key motivations for going to the gym. User testing showed that this was done in a way that was motivating and informative making the app feel technically advanced compared to the competition.
1) BUILDING PHYSICAL STRENGTH
Original research had highlighted the 80% of users went to the gym to increase physical strength and the app showed visually which parts of the body were growing stronger in a motivating way.
2) IMPROVING PHYSIQUE
The surveys showed that 58% of users wanted to improve the way they looked. The body map provided a powerful visual understanding of how their physique was likely to change and how balanced their activity was.
The technical features built into the app helped reinforce the idea that it would improve efficiency, in particular its ability to define a program that would deliver a specified intensity to defined muscle groups . Use of the app to find efficient combinations of exercises by cross-matching their impact on certain muscle groups was perceived as valuable because these combinations might not be obvious otherwise.
It was anticipated that the app would help create more efficient workouts which would in turn improve performance and increase the likelihood that the user would maintain visits to the gym over the long-term. This would meet the main goal specified by the Wellness Foundation: to increase motivation. The interface with the instructor maintained a key relationship between instructors and gym users by encouraging a dialogue with the instructor about the workouts undertaken by the user.
For more examples of UX/UI see my portfolio at www.mikpace.me
CREDITS
Photograph of bodybuilder on Style tile and landing page: Daniel Apodaca (Unsplash)
Photograph of windsurfer on landing page: Ludomil Sawicki (Unsplash)
Trainer image: Mike Fox (Unsplash)
Gym lockerbox photo: Jan Laugeson (Unsplash)
Track racer: William Stitt (Unsplash)
Persona: Jurika Koletic (Unsplash)
Icons: Lateral raises/seated press/Biceps Curl/Rowing Machine:Gan Khoon Lay (Noun project), Cyclist:Luis Prado (Noun project) Eliptical machine: Fitbit creative labs, Running Machine: Sathish Selladurai (Noun project)
Macbook pro template: Pontus Borjessen (Unsplash)
180 degree symbol :mikicon (Noun project)
Gif images for workouts (Biceps curls/Squats): Workout app by Fitness 22 (App store)
Male anatomy vector image: Maria Lozovska (Shutterstock)
Programs used for prototype: Sketch, InVision, Marvel, Photoshop