Sweatie —a mobile app development project
Sweatie is a mobile app concept developed in the course of Mobile App Development class at the University of Miami. I collaborated with Jessenia Morales and came up with this pocket fitness trainer app for the final project.
This app teaches the users how to do several different workouts properly and efficiently. Once the users learn how to conduct a specific exercise, they are encouraged to switch to the “sweat sesh” tab and start their fitness routine. The users can pick what part of the body they want to work on that day and the app will start a timer all while prompting what the user should be doing during that time. The app plans the workout for the users so that they can just focus on getting your exercise in for the day. Each category has 4 different types of workouts to complete in the time allotted. Users can edit the time for each workout, save a favorite workout and also create their own combination of workouts to best suit their needs.
Sweatie is meant to make exercise fun and less intimidating for those who don’t do workout often but would like to start.
Design
The design of this app follows several of the iOS Human Interface Guidelines. To start, clarity is important so that the user does not strain their vision while using this app. The text for each category is big and legible to make it easy to choose from one of the options. The text in the how to tab is also large and legible so that the user does not have a hard time understanding the directions. Once the user starts the workout timer, the numbers on the countdown and the text on top naming the workout are large and legible as well. There is contrast between the background color and text color so that everything on the screen isn’t hard to read, especially while in the middle of an exercise.
The aesthetic integrity of this app is rather simple in order to not overstimulate the user. The functions are straightforward and use familiar icons to help the user make the right choice. There is a consistency in font type and colors across all the screens and there is direct manipulation when scrolling through the category tiles, the user has control over what they want to choose. The timer provides feedback once the user has completed the workout to motivate them to either continue or come back the next day. The how-to and sweat sesh tabs also provide feedback by highlighting which tab you are currently on so that the user always knows where they are in the app. Lastly, the use of metaphors is also prevalent in the how to tab, the directions for each type of workout are hidden in an accordion style drop down menu and are easily revealed once the user taps on the name. This makes it simple for the user to read through the information and not feel overwhelmed.
Development
The logic paths of Sweatie is fairly straightforward:
- Users will be able to read about workout instructions in the how-to tab (learn and perform movements in correct postures) for different body parts / focus (eg. upper body, lower body, etc.)
- Users will be able to select generated fitness program and start exercising with the timer running
The developed features are:
- Linear page transition
- Bottom navigation
- List tile view
- Accordions
- Countdown timer
We implemented the logic we learned from the multipage navigator to develop the linear page transition. Users will be able to navigate from the list view of different types of workouts to the instruction page for each of the movements in accordion format. Users will be able to expand and collapse the contents by tapping on the accordion title. This is also implemented for users to navigate from ‘sweat sesh’ page to the fitness timer page.
Bottom navigation is implemented to break up the tabs since each entails different functionality (workout instructions and fitness programs & timer).
We used the getwidget package to implement the list tiles and accordions. This package made our lives so much easier! Although the documentation is not all there — after playing around with it, we were able to figure out some of the problems we encountered. So highly recommend checking that out!
As for the timer, we referenced the code from this article and tweaked it to match the purpose of our app. We have it on a separate page (instead of the homepage) and use the named routes for linear page transition. We also removed the background color countdown animation because we wanted to keep it minimal. Lastly, we want to dynamically change the title as the timer counts down to signal the users when to change to the next movements and so on.
Future features:
- Customized workout routine
- Define user’s fitness goals
- Select fitness level (beginner, intermediate, advanced, etc.)
- Provide personalized fitness program
- Select and add / remove movements from the workout routines
- Input length of each movements
- Add more workout movements to the collection
- Ability to bookmark / favorite workout movements and add it to a collection
- Ability to let the users play their music while working out
Implementation issues
- Breaking lines in accordion contents
- Adding image to the list tiles
- Dynamically changing the title text inside the timer
The default accordion in the getwidget package takes in two pieces of information — title and content. After we pasted in our content, everything was squished together — which made it very difficult to read. However, we quickly learned that ‘\n’ means insert a newline in the text at this point, which made everything much easier to read!
Our second roadblock was another issue with the getwidget package. As we mentioned earlier, it’s a process of trial and error. In their documentation, they provided the sample code to implement a list tile with text and icons, but nothing about it with an image. We tried many different ways to insert the images in there but it kept giving us errors. However, after many many tries, we finally figured out that we have to add it into the avatar property. Their default image overlay has a slight dark overlay on top so we needed to specify the opacity of that overlay to 0.
The third and last roadblock we ran into was figuring out how to dynamically change the title text inside the timer. We thought about creating a function to watch the timer string and change the text based on how much time is left, but nothing really panned out. So after examining the code with Dr. Chuan, we realized to do that, we would have to replicate the code where the timerString is getting updated dynamically. Because the time is ticking and we’re unsure of how to set it to a range of seconds, we ended up having to do it the dumb way. Basically we have a switch and case block that updates the workout title text based on the timer string.
But hey it works! 😂
Another issue we ran into was that if I set a case for 0:00, the text will be shown before the timer starts and after it ends. So to bypass that, we grabbed the duration variable and its initial value (0:00:00.000000) and set the text to ‘Get started’ and another case for ‘0:00’ to update the text to ‘Good job!’ and congratulate the users on finishing the workout session.
Conclusion
Overall, it was a fun project but definitely still have many improvements that can be made! Namely — figuring out a more efficient way to dynamically change the title text inside the timer would be a priority to improve!
