ShapeUp

I started off searching for the most used gym apps. I downloaded a handful of apps and narrowed it down to the top two. I go to the gym regularly, and I already use one of the two apps I selected. What I was looking for in my app research, was the ability to track my progress via entering weight and reps per set, per exercise, but also meal plans, and natural personal training routines. I found personal training routines that were pretty good in one of the apps, but they definately had room for improvement.

This is an app I have open while I’m working out. The app has more features than just entering weight and reps per set, but the UI/UX is not great and I find myself taking the rest of the features for granted as a result. It’s a struggle for me when I need to create a custom routine, the UX is unlike any other app I’ve used, in a bad way. Action icons for edit are positioned too close to back buttons. Entering into editing mode, a download icon replaces the edit (pencil) icon, but functions as a back button to exit editing mode, to name a few of the UX discrepancies. Features I dont use but would enjoy if I did, are filterable, detailed stats of my gains, and a database of user generated workout routines that I can add to my own. Visually, the app is pretty utilitarian. It’s branded with the brand colors, light blue, grey, and white, but lacks a coherent UI system as well as any brand personality.

The first benefit of this app over Jefit is that it’s got a much better design language. Rich photography, readable typography, proportional spacing, consistent and appropriate iconography, etc. This app is missing (or I couldn’t find) a way to record weight and reps per exercise set. In fact, it looked like this app lacked exercises using weights for bodybuilding. This is not an app I could use at the gym. The diagrams per exercise were very clear, utilizing a looping video per exercise. And the UI and UX for navigating through each exercise was very good. The UX fell apart however when navigating between sections, and there were times I’d get stuck between a screen and the menu tray with seemingly no way to return to the rest of the app. The app also featured personal training which was catered to your body goals of getting, stronger, leaner, etc. However, the full training experience was behind a paywall.

One thing I felt was missing from both of these apps was a style that expressed the brand more, and presented a style in line with the energy of physical activity. Jefit felt utilitarian and “corporate-ish”, and Sworkit felt more luxury lifestyle with moody photography, expressing a subdued energy. When I think of the word athletic, the image that comes into my mind is neon windbreakers, neon pump-up basketball shoes, and neon minimalist iconographic illustrations of bodies in motion (seen in the olympics and recreation centers), all pulling from the colorful postmodern design, fashion, and architectural movements of the early to mid 1990’s. I think the reason why my mind remembers this imagery in reference to ‘athletic’, is because the tone of the bright colors, and the assertive shapes in the inherent formal expressionism, for me, matches the energy and feeling of physical exercise. I wanted to carry this vision into the design of the app.

With the aforementioned aesthetic in mind, I thought DIN would be a good choice for the typography. DIN is a bold font with impact, readable at a good range of sizes, and is fairly geometric, keeping in line with the brand which I’ll describe in the following chapters. The colors borrow from the 90s neon palette. There is an accent palette pictured at top right, and an analagous secondary palette below which can be paired with any of the accent colors and be used interchangably as accent colors depending on the scheme. Both the color and typography were chosen with the intent of encouraging a high energy psychology for users using the app during their high energy activities to promote stamina and drive.

The bar is fairly low as far as gym apps go that focus on all the main aspects of fitness successfully or at all. In this proposal, I’m initially representing the potential for all of the high level aspects of fitness in-app, but I have emphasized the features around personal training because that is an area in most apps that could be doing so much more. Especially with the recent rise of intelligent computing.

Taking advantage of intelligent computing, as well as connectivity with wearable devices, would ideally enable the app to train any person with any set of goals. The app would have a personal trainer AI that could ask questions, and observe patterns as the exercises are enacted and recorded to adjust to each person intelligently.

Using Jefit and Sworkit, as well as my own considerations before starting training as a reference. I propose routines could be generated around lifestyle, specific goals, or exercise preference. In the following screens I’ll use the lifestyle flow as an example. As for the other two, using specific goals as the seed, a user would specify how much they weigh, how much they would like to weigh, and whether they wanted to build muscle, get leaner, etc. Using exercise preference as a seed, the user would select the kinds of exercises, cardio, freeweights, yoga, recreational, etc. that they would like to base their training around. In each of these flows, the user would be asked to enter their age, weight, etc. and the training across all three options would use this data along with what is considered healthy for each user given the data they provided.

With lifestyle as the seed, the user would select how much freetime they have in their day-to-day. I chose to use heavier visuals here (pictured next slide), the desk chair, a tall stack of papers, a laptop and a cup of tea, with the intention of conncecting the user to their lifestyle and helping to make the AI seem like its more aware of the user on a personal level.

Before generating a routine, as well as while a routine is taking place, the user will have the oportunity to provide data that the AI will use to adapt and guide a routine. Here, the user is entering personal information as well as physiological information the AI will use to craft an effective routine, and conduct the training in a more personable and friendly way.

After setting a number of parameters, lifestyle, weight, age, schedule, exercise prefference, or goals, the AI creates a routine using a combination of medical health guidelines inherent in it’s program, the users physiology, and all other pertinent parameters. It then finds exercises that fit with the given criteria. For example, a bicycle exercise might not come up, if the user’s availability is late at night, or an intensive freeweight exercise might not come up if the user is outside a certain age range. The isometric background would be animating as the routine was generated.

Now that the routine is generated, whenever the user opens the app to the training screen, an exercise would be ready with a prompt from the trainer AI. This could be the users first exercise after generating a routine or the first exercise of the day. The AI proposes the weight and reps based on the users physiological profile that was entered to generate the routine.

In addition to proposing guidance based on physiology, there’s an opportunity for the AI to prompt the user to push themselves within a threshold given assistance from a spotter for example. Or if after a while, the user seems to be plateauing, the AI could offer strategies to push out of that with alternative approaches to the usual exercise, like, run a little faster for the next minute. These prompts could also be sent through headphones.

After the user acknowledges a prompt, the fields would become editable in order to list the weight and reps that were accomplished for the exercise. The ‘check’ CTA at the bottom would change to an alt accent color to indicate selection quickly before going to the next screen or activating a feedback prompt.

Utilizing wearables’ connectivity, the AI could monitor the users heartrate during the exercise and compare that to the user recorded weight and reps to create an intelligent response. The user tried to lift too much weight, and so the AI is able to offer an effective suggestion based on the established user criteria and medical health guidelines written into it’s programming.

The AI is able to mix up the routine to include a variety of cardio and strength building exercises. Pictured here is the landing screen for a running exercise, mapped via the users location. The proposed exercise is to run 2.1 miles in 15 minutes. Another thing I’d like to point out here is the filter icon next to the hamburger menu. Clicking on that at anytime will allow the user to adjust the exercise variety, adjust their schedule, or physiological parameters like weight.

The AI would be able to map an exercise route using Google Maps API and with the users current location. It might even be possible to map a freeweight exercise for example, to a few gyms in the area. The start of the route is colored with the green of the start timer button, and the end of the route is colored with the purple of the ‘check’ button that the user presses when they have completed the exercise.

As the user progresses along the route, a third node appears, colored white to indicate their current position. In the foreground, the timer keeps the time. This is useful on a run to give the user feedback on how much more they have to go, and if they need to push themselves or not. This is another instance where periodic audio feedback to the headphones could be effective.

The next main section of the app would be a database of all the exercises split up into ‘Cardio’, and ‘Strength’. The user would be able to drill down into the database into categories getting more specific until they found the exercise they were looking for. The user would be able to add the exercise to a custom routine, mark it for the AI to exclude, or include (less or more often), or simply to select the exercise to perform and record it individually.

Pictured here, users would be able to add a new exercise, edit, or delete any exercise. Here we’re looking at a list of the exercises in ‘Strength’>’Full Body’. Clicking the filter icon would allow the user to search for exercises or filter them specifically.

An exercise that was chosen from the database. In this context, outside of a training routine, it’s custom. Notice in the previous screens, the same exercise was colored to match a ‘mid day’ color scheme with blue and yellow. An ‘evening’ routine might be colored purple and yellow, just to give more visual affordance to context. Custom exercises, as well as sections, use a more neutral color scheme.

I’ve given heirarchy to interactive elements in the app, anything clickcable is given a lot of size and space, as well as accent color. Here, the scrollable ‘dropdown’ list when entering weight is given the same bold treatment as the rest of the visuals, but also has unobstructed scroll affordance, adding a comfortable ease of use.

A view of the current generated routine created by the AI. Here, the user can see what to expect and make any adjustments they see fit. The user would also be able to revert the training back to the initial generated state, or a snapshot, in case their adjustments weren’t satisfactory.