Turning a website into an app for an improved user experience.
Strong Strong Friends currently has a web based weight training program, and an active Facebook community where people support each other and offer advice on workout form. Using the website on mobile at the gym can be a bit cumbersome and as a user myself, I kept thinking about all the ways an app would improve the experience.
Strong Strong Friends provides great resources in the form of animated GIFs and YouTube tutorials, but accessing these while working out involves flipping through multiple website pages or apps on a mobile device. There is no way for users to track progress or amount of weight used digitally. Lastly, I thought the way subscribers currently use the connected Facebook group to answer questions or improve workout form really interesting and thought it could be even more powerful if this feature was part of the app.
The prototype I've designed offers a fully integrated digital solution for using all of SSF's workout programs, easily accessible resources and video library, as well aggregation of all social media feeds. In addition, I introduced the idea of the Form Check feature, bringing the conversation users are already having on a third party platform into the app.
Target demographic included current subscribers to the program, people who are new to exercising or don't exercise at all, and those who are already very comfortable lifting weights.
This was a speculative project for my own amusement, and part of coursework for DesignLab.
I began by evaluating a variety of apps that offered strength training and workout programming. I focused on how the apps handled social connection, user input, and transitions between resources and the workout program.
Every app reviewed had a companion Apple Watch app. Nike had the nicest instruction, with dedicated short videos on how to perform the moves. Of all the apps, Strong was the most complicated and flexible app, with many options for workout programming, note taking, and even macro tracking. It was an all encompassing fitness app. The Sheiko app was suitable for people who want to follow a power lifting program, adjust the weights, and make minimal notes. It’s not intended for users who want to design their own program. StrongLifts was a simple app meant to take the place of paper and pen.
A user survey was posted online in the Strong Strong Friends Facebook group, on Instagram, and on another weightlifting and fitness Facebook group. Everyone who took the survey did some kind of exercise regularly, with almost 60% working out at least four or more days per week.
This user persona is based on the demographic for Facebook group for Strong Strong Friends, combined with results from the user survey conducted during the research phase. Active members of the Facebook group are predominantly women with an interest in weightlifting for overall strength and health, as well as breaking down issues around body image and food.
In the task flow, I explored the information architecture for the app, and looked at how all the features would work together. The tasks were divided into four main categories, all accessible via a dashboard.
The user flow expanded on the task flow byimagining how the user would move through the app while working out, and how they would approach different scenarios. It was vital that moving between the workout screen and the resources was effortless and intuitive because the environment where they would be using this feature (the gym) was likely to be filled with distractions.
The low fidelity wireframes began as sketches before moving on to the computer. In this step I focused on iterating and brainstorming ideas for the workout screens, since this seemed to be the most complicated part. Based on my research, it was equally important that users were able to both view instructions and input data, so I lead with these two things.
During the mid fidelity wireframe process, I did another round of testing to make sure users were able to effortlessly navigate the app. This mid stage testing was invaluable because we were able to pinpoint problem areas in the workout flow and navigation. Specifically, users were unclear about the structure of the workouts themselves. In the high fidelity version, these issues were eliminated.
Here are the complete mid fidelity user testing results.
A closer look at the specific changes made after testing is here.
Based on testing results, I improved the workout subnavigation and the hierarchy of the workout overview so the workout structure was more clear. In the high fidelity stage, simple branding was applied to keep the app clean with the idea that other companies could easily apply their branding to the app. All the images were taken from the Strong Strong Friends website and social media feed.
Here you can see the parts and pieces that make up the app, as well as some brand styles.
We performed two sets of testing with low and high fidelity prototypes. The testing demographic included people familiar with the workout program, people who exercised regularly with workout apps, and people who did not workout regularly or have experience with apps.
In the first round of testing showed that users wanted to tick off each exercise as it was performed, even individual exercises in a circuit. Our original hypothesis was that this would be tedious, but user feedback told us that this was motivating and led to a feeling accomplishment.
In the low fidelity prototype there was a bit of confusion about the structure of the workout program. We created a new screen that gave users an overview of the workout, adjusted the navigation, as well as the workout input fields to help with this confusion.
The biggest challenge of this project was designing an intuitive user flow for the workout structure, and making sure the instructional resources were easy to access. It would be interesting to explore are whether users prefer to use the social aspect integrated in the app, or if they would rather use traditional platforms for this.
