UX Assessment of a Workout Planner Mobile App: My Workout Plan

I never thought that a simple workout planner app would solve all my fitness problems. But after using a mobile app for a long enough time, through my designer lens, I have uncovered a couple of UX problems that I felt necessary to share on my blog. I have been reading several UX books these days but I must say that conducting a usability study for your own use is the best way to understand UX Design.

This blog article is an extensive UX assessment of a fitness planner app that allows users to create workouts, schedule them, set reminders, share workouts, and track their fitness progress.

First, I would like to give you a brief idea about the workout planner app so that you understand how it functions.

My Workout Plan - Daily Workout Planner Screen

Brief Overview of the Workout Planner Mobile App

My Workout Plan - Daily Workout Planner is a very basic fitness planner mobile app by 'SosisApps'. It's not like Adidas training apps or Cult fit branded apps that deliver tons of varied content without focusing on the user goal.

This mobile app allows its users to prepare and schedule workout routines before they hit the gym or work out at home. It has a huge database of exercises described by their names and a descriptive GIF image that is very helpful to understand how a particular exercise is performed. There are no preset workouts but it has a feature to download the workout plans of other people which can be quite helpful for beginners or those who wish to explore different routines.

For a person like me, who has been to the gym quite a lot of times and has had some personal training to understand the exercises without much guidance, this app is a lifesaver. It allows me to prepare my own personal workout routine for different muscle groups and play them during the right time. I love the ability to filter exercise based on muscle groups, equipment, and type of exercise i.e. regular or stretching.

It took me quite a lot of time to find this perfect app to help out with my fitness goals. This app surely passes the test on enhancing user productivity and helping heir reach their goals without any distractions. But after using it for 3-4 weeks in a row now, I, being a UX designer and a hardcore app user, feel that there are certain UX problems within the app that could be improved to further enhance the app's usability. For instance:

1. Store the user's position in a list and return them back to the same position after completing a user flow.

Goal and Scenario

In order to make a workout plan, I have to add a couple of exercises from the exercise catalog which is basically a huge database of all kinds of possible exercises.

I can even add a custom exercise but I haven't used it yet. In the beginning, I just need to add a couple of exercises from the catalog and try using a workout plan.

User Flow

I click on the plus icon at the bottom green bar. The full exercise catalog pops up from the bottom. It has a search field where I can search by exercise name. There are filters based on muscle, equipment, and category. I go down the list or search for one and tap on the exercise card to select it.

It takes me to the screen where I can edit the particular exercise. I can assign sets, reps, weights, rest between sets, color codes, and notes. I can also choose between weights and time/distance based on the type of exercise. For example, cardio exercises will need a timer instead of weights and reps.

Then I click on the 'Done' button at the top right. This takes me to the home screen that now shows the selected exercise in a horizontal card format. I realize that this is where my workout is being built.

Now I want to add another exercise so I follow the same process. I click on the plus icon at the bottom green bar. The exercise catalog pops up that takes me to the top of the list. I have to scroll down again to the middle of the humongous list to find the exercise that was nearby the last one I added.

UX Problem

The product catalog list resets every time a new exercise is to be added. It doesn't remember the user position in the last user flow.

So, if I have to add 20-30 exercises to one workout routine, I have to put in tons of effort in simply looking for the workout in the product catalog because it doesn't remember my position from the last time.

Solution & UX Lesson

If you've got a database or a catalog with a list of items that go way beyond 30 items or so, make sure there's a functionality to remember the user's position in the list and scroll them back to the same position. Don't reset the scroll position of the user without their consent. You'll be making them work twice if they have to choose from a list multiple times.

Imagine if you were shopping from the Amazon App and you scrolled to the 1000th item in the catalog to find the perfect gift. And the items nearby also seem to be pretty good but as soon as you click on 'Buy Now', the item gets added to your shopping list and the page gets refreshed taking you back to the top position. This increases frustration and the user will probably end up uninstalling your app.

So, don't mess around with the user's scroll position on any page. Remember it on all pages. Keep it stored and take them back to its previous scroll position whenever a user flow is completed or users wander to other pages. They will feel delighted to be back where they wanted to be.

Don't make them scroll again and again to the same location. Their time is precious and if they feel they're making useless attempts in doing the same actions again and again, they will take no time to uninstall your app. You know now the market competition is so fierce that the other business is merely 8 pixels away on the Playstore or Appstore.

Let the machines put in the effort of storing user positions and let the users be productive in their fitness plans.

2. Don't make the users set their filter again and again. Don't reset user preferences automatically.

As previously said, I liked that there's a filter feature that allows me to select a specific exercise without putting in the mental effort of identifying which one is which. The filter feature also helps me to learn what exercises are for which muscle group and what exercises can be performed with what kind of equipment. So whenever I have a constraint on the equipment like when I am working out at home, I set the equipment filter to bodyweight, and voila, I have a home workout ready. But there's a big problem with these filters similar to the one I had stated in the previous pointer.

Goal and Scenario

Since it is Friday tomorrow, I wish to work out my legs because, let's be honest, we all hate training our legs. So I will now prepare a workout plan focused on my legs.

Also, I won't be able to attend the gym, so I need to use the resistance band I have at home for this workout. It's almost midnight now and I'm quite tired of the high-intensity workout I did today.

I need to make this workout as soon as possible without any problems with the app.

User Flow

I click on the plus icon at the bottom green bar to add a leg exercise to my workout plan. This takes me to the exercise catalog. I need to create a Leg workout plan.

I click on the muscle filter and select 'Legs'. I click on the equipment filter and select 'Band'. I click on the category filter and select 'Regular'. I scroll down to the desired exercise and select the one most favorable.

This takes me to the edit exercise page where I assign the sets and reps and click on the 'Done' button to add the exercise. This takes me to the home screen where the leg exercise is added and shown as a card.

Now I need to do a couple of more exercises for the legs. I click on the plus icon and the exercise catalog pops up. Damn! Everything is reset as I lost all my precious work.

UX Problem

The filters are reset to any muscle, any equipment, and any category. It's showing all the exercises.

I feel a flush of frustration down my spinal cord and my mind shouts at me, "Are you out of your mind? I just spent so much time and tap efforts in sorting this monstrous list and you want me to set the filter again?!"

It feels as if all the efforts are in vain. I accept my defeat and repeat the process again and again until I've added 20 exercises to my plan in 40 minutes. My sleep is ruined. My anxiety is at its peak. I can't shout at the mobile app because I know no one's listening.

The horror of knowing that I will have to do the same repetitive actions every time I wish to create a workout haunts me every day.

Solution & UX Lesson

It takes a lot of time and mental effort for users to filter through a large database. They select the different categories, search through the lists inside the categories, and sort the list in a way that suits them the best.

Why would you expect that the user loves to sort and filter again and again? They hate it. As much as they love your products or items or exercises or information, they hate sorting through the same to get what they want simply because scrolling through the list seems a herculean task.

So, please don't reset your user's hard-earned filtered and well-sorted lists. Especially if they have to visit the list again and again.

Imagine you were in a shopping mart looking for some groceries. You spot the label that says dairy products and you head towards it with your trolley. You pick up some cheese and head off towards the fruits and vegetable section. After almost an hour of shopping, you walk towards the billing counter. Suddenly you realize that you forgot to buy milk and eggs.

You take your trolley and rush towards the daily section, but you can't find it anymore. It seems to be moved somewhere. You ask the store workers and they tell you this, "Oh we've moved the items from the dairy section into the general daily use items. You'll need to look up dairy in that section now. Sorry for the inconvenience." You're frustrated by now.

Who in their right minds would mess around with the product sorting?! You exit the mart without milk and eggs and probably stay hungry for breakfast the next morning. All because you didn't want to put in the extra effort to look for dairy items again and again. The same happens with mobile apps.

A digital product's primary purpose is to make its users' lives easier and help them be more productive. A filter and sort feature that resets every time is not making your users' lives easier.

Store the filter data and take your user back to the same position in the list without tampering or resetting their filter settings. Let the code put in the effort and not the users.

3. Indicate which exercises have already been added to the workout plan.

Visual indication of a previously performed action or an item already added in alit is very important to create a usable product. I don't want to add the same exercise again and again but there's just no way to identify which exercise I've already added to the workout. I need to go back and forth between different screens. Otherwise, I need to remember which exercise I had previously added so that I don't end up adding the same again.

Goal and Scenario

After adding 3-4 exercises, I need to add a couple of more to the workout plan. Now I need to make sure I don't add the same exercises again from the catalog because I don't wish to repeat any of them while working out. I would rather increase the number of sets or reps.

User Flow

I click on the add icon at the bottom green bar. This takes me to the exercise catalog where I can select the particular exercise I need to add.

But in order to make sure I don't add the same exercise, I need to go back to the previous screen and memorize the exercises added earlier.

Then I have to carefully select the different ones from the catalog.

See the problem here?

UX Problem

There's no visual indicator anywhere in the catalog of exercises that tells me that an exercise already exists in my workout plan.

Imagine if you added a product to your shopping cart and there was no indicator about how many and which items are placed in your cart while you were shopping. Won't it be frustrating? And worse would be to find out at the billing counter that you've bought the 5 pieces of the same black t-shirt.

Without any sort of indication of a previously conducted action, how can we expect users to achieve their digital goals?

Solution & UX Lesson

A tiny label underneath a previously added exercise saying 'Added' would be sufficient for me to identify which exercises to avoid adding again and again.

Even if I wish to add multiple exercises of the same type, the functionality allows me to add, but the 'Added' label would make my life a little bit easier and my workout plans a little bit more optimized.

I won't have to go back and forth on the home screen and I won't have to remember which of the 100 exercises I have already added to my workout plan.

Don't make the users memorize information from previous screens. Don't make them revert back to a screen simply to look for information that could've been incorporated within the present screen.

Provide labels, tags, icons, color codes, stickers, bookmarks, and other visual indicators to help your users differentiate between the different kinds of information.

4. Users prefer a screen layout with more focus on the images than the exercise name.

This is more of a UI problem but I found this issue very important since I have been trained as a visual designer and I know how much visual design can impact the usability of a digital product.

Whenever we're learning how to perform an exercise we do so by looking at the animation or a video. We don't care about the name of the exercise. I didn't even know about the names of the different exercises until recently.

The point here is that whenever a piece of information is displayed in the form of cards, we should decide which type of media should be larger in size based on its importance.

I call it the 'Proportional Priority'. Visual proportions of a piece of content should be decided based on its priority of importance and significance to the user.

If the image is more important than the text, then the image should occupy the maximum part of the card layout. If the text is more important in a list of blog articles, like my home page, then the text should occupy the maximum part of the card layout.

UX Problem

In this workout planner app, initially, when I didn't know much about the exercises, I used to go all the way to the last exercise edit page, tap on the GIF image, and check out how an exercise was done.

The GIFs are the most important part of this app's catalog and yet when you look at the card layouts on the home screen and even in the catalog, you see them as tiny icons. Why make such an important piece of information so small as compared to the name of the exercise and the number of sets and reps?

Even when I click on play and the workout flow begins, I see the exercise GIF in the top one-third of the screen and there's no way to tap on that image to expand it into a lightbox where I can view it on the full-screen.

The entire amount of value that I get from this app is not based on the fact that I am able to learn the names of the exercises (which I am but I don't really need to) but to look at the interesting GIFs of the exercises conveniently without tiring my eyes.

The product team has spent so many hours perfecting the images with highlighted muscle groups and showing what form is right and wrong, and yet the importance given to the image is negligible.

Solution & UX Lesson

The content cards should be thoughtfully designed. Before jumping into fitting the information into a card, we should understand which element is the most important for the user.

Instead of a list view, there should be a grid view with large size GIF images with small text and labels at the bottom of each.

I agree that it increases the scrolling effort because of large size cards, but with the sorting feature and easy recognition of exercises visually, I will be able to select exercises way faster than before.

Think of your mobile screen layout as the layout of a newspaper. The most important headline and news are in the largest proportion. The least important ones are smaller in size.

All the apps and websites where the images and other media matter the most, make them larger than the rest of the information. To see this in action, go to Google, search for cats, and go to the videos tab. You'll see the videos as small icons beside the large descriptive text. Now go to the YouTube app on your mobile and search for the same. You'll see a stark difference between the layouts of what you see on the browser and what you see on the app.

If the videos and their previews weren't large enough, if the video title was stacked beside the video in a large font, and if the media was given less importance than the text, you would've never been on YouTube for as long as you as you are these days. Less clutter, more media.

5. Don't overload the users with hundreds of choices without any grouping or sorting.

We all have difficulty making choices, now more than ever before. Why?

Because there are too many choices available to us, that too very conveniently. Too many brands. Too many showrooms. Too many products. Too many college degrees. Too many online courses. Too many blog articles. Too many food items to eat. Too many mind-numbing TV shows to binge-watch. Too many books to read. Too many places to travel to. Too many friends on Facebook. Too many reels on Instagram. Too many videos on YouTube. Too many clothes to choose from. The list goes on and on.

We're living in the age of limitless choices with a scarcity of attention. As the number of choices in our daily life increases, our attention span decreases, exponentially. I remember I could read and remember the entire 1000-page novel of 'Count of Monte Cristo' in the early 2000s in a single day. Today, I struggle to read a single page of a 100-page non-fiction book without drifting off to a different activity.

So, when we're already tormented by so many choices why burden your app users without tons of choices and endless lists?

UX Problem

In this app, on the product catalog when you've previously added a couple of exercises and made some routines, your exercises will be stored as 'Previously Added Exercises'.

While this seems to be very useful at first when you're making one or two routine plans, it gets complicated when there are hundreds of exercises to choose from without any grouping or sorting.

It increases the mental load while selecting the exercise. The sheer volume of the list makes me feel lost after scrolling for some time.

Solution & UX Lesson

Reduce the number of choices for your users. If it's not possible to reduce the number, group them under different subheads. Provide a visual cue that helps users to select items easily from a large list. Give them the ability to sort or filter or search from multiple options.

Don't make them overwhelmed with hundreds and thousands of list items. Make it simpler, more comfortable, and quicker to select items from a list of information. It is also important to group the list items in a logical manner that helps the user.

6. Placement of CTA Buttons (Call to Action) is quite far from the natural user mental model.

Call to Action buttons need to look like buttons and they should be placed where the user is most likely to click. We all know this as it seems common sense. But sadly, common sense is not so common.

We tend to mess around with buttons and links with their style, size, shape, effects, animations, and most importantly, their placement on the screen. This manipulation of the buttons often leads to frustrations and increases the amount of time and effort for the user simply to discover and interact with them.

UX Problem

In this fitness app, when you're preparing the routine plan, there's a pretty disturbing phenomenon that occurs due to the incorrect placement of buttons. Once you're preparing the routine, you enter into the edit exercise screen. There you'll observe the button 'Done' at the top right of the screen.

No, it doesn't appear at the bottom of the screen as expected, it appears at a weird top right position. Once you're done with the plan preparation user flow and you hit play and enter into the exercise flow stage, you'll see all the buttons at the bottom left.

While both the locations are a bit difficult to reach with one-handed use, why is there such inconsistency in the placement of buttons? Why are we playing around with the mental models of users who expect the buttons to be at the bottom of the screen where they can easily access them with their thumbs, without straining their muscles

Solution & UX Lesson

Always follow standard conventions while designing elements that are well built into your user's mental models. Don't mess around with what your user expects from your app or website. Users don't wish to re-learn the basic conventions of using their digital products, they want to use them effectively to increase their productivity in life.

Always stay consistent with the placement of buttons and links, and other standard elements on all the screens. Keep the clickable areas within the lower middle zone of a smartphone where the thumbs can reach without much stretching.

Consistency is the key to making products with excellent usability. If you wish to play around and induce creativity within your product, do so with the content and interactions that enhance the usability. Follow a design system while designing and placing buttons.

Create a hierarchy of links with styles that don't differ too much in their style. If one button is a rounded pill, make all of them similar. If you're using the color green on the primary button background, use the same green for the other link's text color with an underline. Make the clickable text recognizable and easy to click.

On a Concluding Note

In the last few days, I've found this creative exercise of using multiple apps and assessing them for usability issues to be quite exhilarating.

While I'm still using the above fitness tracker app to create my daily workout plans, I've come to realize that in UX Design, it's not possible to create the perfect app design in one go. There will be drawbacks, some people will find it comfortable to use, some will not understand the app at all, and some will compromise with the shortcomings. But as a UX designer or a mobile/web developer, it's important to develop this 'Empathy Eye' and discover usability issues to make the product more appealing to a wide range of audiences.

As a budding designer, I know how difficult it is to predict all such problems way before the product is launched into the hands of a variety of users, but that's where usability studies come into play. We must understand that building an app or a web product is never a one-off task. It needs to be tested, reviewed, and iterated upon until we get rid of as many usability issues as possible within a given time frame and budget.

Without this, the digital products are going to be overtaken by competition or will be overthrown by your users who expect your products and services to improve over time. They won't compromise forever, they'll find something else to help them achieve their goals without giving them a hard time.

If you found the above article exciting or interesting or if you gained anything valuable from this, do me a favor, and leave a comment, or better, share it with your friends, family members, colleagues, batchmates, buddies, and your social circle!

Search This Blog

DesignerKaran