The flow and patterns of my go-to workout app
In the past week, I was introduced to the world of user flows, task flows, and design patterns. In this reflection piece, we’ll take a look at a task flow and some design patterns on my favorite workout app, FitOn.
About FitOn
I discovered FitOn about two years ago on the App store while searching for a workout app. I chose FitOn because of its simple interface design, big images and videos, and generous use of white space. It was very intuitive to use.
Task Flow
Above is a brief task flow I sketched out for a task that I often visit on the app: ‘Start a ballet workout.’ FitOn’s default page is the Program page, which doesn’t include a search icon. I had to switch to the Browse menu to access the search feature. I wonder why the search icon is not available on all pages.
FitOn’s search page is very organized. There are various filters you can use to refine your search, such as the length and intensity of the workout. For example, I type ‘ballet’, and FitOn displays large cards with only the necessary details.
Design Patterns
- Carousel Navigation
FitOn utilizes several navigation patterns very well. One of them is the carousel navigation, which is very efficient on the tablet.
2. Card-based Navigation
As you can see above, FitOn’s cards feature large, bright pictures, time, the workout intensity level, title, and a consistent CTA button. The information hierarchy is logical. As a result, each card is clutter-free and cohesive.
3. Grid browsing
For their on-demand workouts, FitOn opts for a simple grid. As a regular user, I appreciate the 2-column grid because if there were more, it might be overwhelming.
4. Information Hierarchy
FitOn excels in this category. For example, each section on their advice menu follows a consistent pattern of the category name, photo, articles, and a CTA. Again, their generous use of white space makes it easier for me to focus on each content material.
5. Workout Details Card
Again, there is so much to learn from FitOn’s use of information hierarchy! Each workout detail card follows a consistent pattern of trainer name, workout name, categories, duration and intensity, description, and a CTA. The text sizes are intentional and well-balanced.
One small suggestion:
I think it would be helpful to have the option to filter by target area on the above list page. I had trouble finding the specific ballet workout I wanted on this page because of the many options. What do you think?
All in all, I recognize and appreciate FitOn’s use of consistent patterns for efficient and intuitive user experience. I know that I’ll be referring to it often throughout my design student journey to remind myself of how to properly apply information hierarchy, consistent card patterns, and dynamic filters.
Thanks for reading! :)
