top of page
better living fitness
Finding the best way fitness and nutrition can improve your life.
PROJECT TYPE:
Senior Capstone Coursework Project - Michigan UX Capstone
PROJECT TOOLS:
Figma, Procreate, Photoshop, Illustrator, & Google Docs
TEAM & ROLES:
Before initiating any development work on the Better Living Fitness application, our team made the strategic choice to allocate project responsibilities across various roles. While collectively assuming the role of UX/UI designers for the project, each team member also took on an additional distinct responsibility. In my case, I assumed the role of our team's research lead. This involved a comprehensive range of tasks such as shaping interview scripts, reaching out to potential interviewees, orchestrating user interviews, coding notable quotes from interview transcripts, crafting user flows, and ultimately presenting our research findings to the client.
-
Ian: UX/UI Designer & Research Lead
-
Addison: UX/UI Designer & Stakeholder Mediator Lead
-
Taejung: UX/UI Designer & Reports and Logistics Lead
-
Doae: UX/UI Designer & Design Lead
WHAT IS THE PURPOSE OF THIS PROJECT?
In partnership with Better Living Fitness, a gym located in Ann Arbor with a mission to promote clients' maximum energy and vitality through safe and effective exercise, proper nutrition, and self-nurturing, our team took on the project of enhancing and streamlining their current mobile application. This application serves as Better Living Fitness' primary communication platform for providing workout materials and information, connecting trainers with their clients.
WHAT IS THE SOLUTION?
After conducting several rounds of user testing, we identified numerous pain points that required attention to ensure Better Living's application's continued success, especially among the older age demographic (around 55 - 80 years old). Users in this group found the current application overly complex to navigate successfully. Consequently, as part of our strategy to improve the Better Living Fitness application, we assessed and revamped the current application, simplifying the user flow and enhancing navigability to cater better to their consumer base.
PROJECT STAKEHOLDERS & GOALS
Before conducting the user interviews, our team identified crucial project elements, including the key stakeholders of Better Living Fitness, and clearly defined our project goals to ensure the success of the application’s redesign.
Key Stakeholders
The Better Living Fitness application's key stakeholders encompass a diverse group, starting with the primary users, who are the valued clients of Better Living Fitness. Additionally, the physiologists and personal trainers also play a crucial role, utilizing the application to effectively communicate workout plans with the Better Living Fitness clientele. Last but not least, the direct client and founder of Better Living Fitness, Mark, holds a significant stake in the success and evolution of the application.
Project Goals
Our project is centered around three main goals, all of which are critical to its success. The first goal is to gain an understanding of our audience through comprehensive research and user interviews. The second goal is to improve the current design by conducting thorough evaluations and making data-driven enhancements. Lastly, we aim to establish a solid foundation that will empower our client to implement future recommendations and ensure the long-term success of the project.​
-
Data Collection: In order to gain a comprehensive understanding of the Better Living Fitness application and provide effective improvement recommendations, our team intends to carry out at least two rounds of user testing. Through this iterative process, we aim to gather valuable insights from user interactions and feedback, which will ultimately guide us in refining and optimizing the application's user experience.
-
Evaluation: After collecting and reviewing the data, our next step is to devise a strategic action plan for implementing UI improvements across the Better Living Fitness application.
-
Final Design & Future Recommendations: Utilizing Adobe Creative Cloud applications and Figma, we will develop an interactive prototype that revamps the user interface of the Better Living Fitness application, aligning it with other leading workout applications in the market. The final prototype will incorporate various elements, such as intuitive micro-interactions, a universal application navigation bar, and an aesthetically pleasing yet user-friendly design that remains true to the current Better Living Fitness branding.
RESEARCH GOALS & QUESTIONS
The success and direction of our project were of utmost importance, and to ensure a well-guided approach, our team formulated several research goals and questions. These served as our compass, steering us in the right direction throughout the project's journey.
Research Goals
Our team has formulated two research goals. The primary objective is to gather data that will enable us to comprehend the most significant pain points experienced by users within the application. This information will serve as the foundation for making informed design choices and providing well-founded recommendations. Our secondary research goal is to collect data that will grant us insights into how Better Living Fitness' clients navigate through the current application. We aim to identify opportunities to simplify and streamline the user journey across various pages within the application, enhancing the overall user experience.
Research Questions
To steer our project development effectively, we will consolidate all our research findings and address a core research question that aligns with the project's goal of addressing user pain points in the current Better Living workout application.
Our research question is as follows: "For clients who use the Better Living Fitness workout application to exercise, which aspects of the app are perceived as user-friendly and which ones present challenges or difficulties?"
RESEARCH METHODS
After careful consideration of various research methods, our team opted to focus exclusively on in-person User Interview Testing as the means to enhance the user interface of Better Living Fitness's application. During these interviews, we sought and obtained participants' consent to record audio and screen activity while they interacted with the app, in accordance with our research questions. This recording capability empowers our team to thoroughly review the interviews, analyze user feedback, and prioritize screen redesigns based on identified pain points and user preferences.
The choice of in-person recorded user testing interviews stems from our desire to precisely observe the areas where the application's UI can be most improved. Through direct observation, we gain a clear understanding of the participants' references and interactions with the app during the interviews. Moreover, the recordings serve as valuable resources, allowing us to review these interactions afterward, ensuring we capture every nuance and detail shared by our participants during the evaluation process.
User Research Methods
-
Qualtrics Screener Survey
The Qualtrics Survey can be found here.
Our Qualtrics Screener Questions consisted of the following questions:
-
Do you currently use the Better Living Fitness application? (Multiple Choice)
-
How long have you been an active user of the BetterLiving Fitness application? (Fill in the Blank)
-
How old are you? (Fill in the Blank)
-
What is your gender? (Male, Female, Other)
-
What kind of phone do you use (Apple [iPhone], Android [Motorola])
-
What is your availability for an interview? (Multiple Select)
​
2. In-Person Recorded Interviews
Our User Testing Interviews will adhere to a designed interview script. Once we have gathered client information, we will utilize Google Forms to send out a set of preliminary questions via email, aimed at filtering out individuals under the age of 25. This step is essential as our focus is predominantly on middle-aged adults or older, our primary target audience.
Key In-Person Interview Questions Asked
-
“When you first open the app, what is the first thing you look to do?”
-
“If you were looking for workouts, where would you expect to find it?”
-
“How would you start a new workout using a previous exercise routine?”
-
[internal] How long did it take the user to complete this task?
-
“While going through a workout, what are your thoughts on the way you interact with completing an exercise?”
RESEARCH RESULTS
Our research findings indicated that all participants faced significant challenges while navigating between screens and locating specific task items, such as locating where to find additional information for each workout exercise.
The homepage posed difficulties for participants, emerging as a major source of frustration for everyone involved. Recognizing there were common pain point patterns, our team has determined that enhancing the usability of the homepage will be a top priority to create a smoother and more satisfying user experience.
Another recurrent concern identified through interview analysis was the workout page. Despite being considered one of the more intuitive and visually appealing screens, participants still found it to be cluttered and overwhelming. Numerous concealed features within the current design went unnoticed, leading our team to conclude that a redesign of this screen
is essential.
Themes & Insights
Application Landing/Home Page
A significant portion of the participants encountered difficulties in comprehending the extensive content present on the homepage. They noted that the homepage appeared overly crowded and lacked a polished design. Moreover, owing to the application's prototype-like appearance, a subset of participants failed to grasp its full functionality. This led to a situation where some participants were unaware of their ability to navigate to other pages until explicitly instructed to do so, primarily due to the absence of a navigation bar on the homepage and throughout the application. Based on these observations, we conclude that a redesign of the homepage holds the potential to enhance the application's long-term viability.
Application Workout Page
In addition to the homepage, another page that exhibited a substantial number of challenges was the workout page within the Better Living Fitness application. Despite receiving predominantly favorable feedback from our interview participants, all of them encountered difficulties when attempting to locate supplementary information for each workout.
A noteworthy drawback identified on the workout page pertains to the utilization of a carousel slider for presenting images/videos illustrating the execution of each exercise. A significant majority of participants were unaware that the workout images/videos were organized within a carousel slider, leading them to perceive a lack of content. Given the presence of these two issues, it is our belief that a redesign of the workout page would also contribute positively to the advancement of the Better Living Fitness application.
COMPARATIVE ANALYSIS
Following several iterations of user testing interviews, our team proceeded to perform a comparative examination of other fitness-oriented applications available in the market. The aim was to discern the areas of strength and vulnerability within Better Living Fitness' existing feature set. While our team's main focus did not include the creation of additional features for the Better Living Fitness application, our client sought our expertise in conducting this comparative analysis.
The objective was to generate insights and concepts for potential future feature enhancements that could be integrated into the application.
Based on our research, it became evident that Better Living Fitness demonstrated leadership across several categories. However, our investigation revealed the absence of three specific aspects—found in other fitness applications in the market—within Better Living Fitness. These aspects are the capacity to personalize workouts, monitor nutritional intake, and a deficiency in workout type diversity.
USER PERSONAS
Before embarking on the UI redesign journey for Better Living Fitness, our team constructed two distinct user personas. These personas were shaped using the insights extracted from our comprehensive user interview data. Presented below are the profiles of two user personas: the primary persona, Jane Fishman, and the secondary persona, Douglas Craig.
USER FLOW DIAGRAM
Upon finalizing the development of our personas, our team proceeded to craft a user flow diagram that represents the current application architecture. Despite our concentrated efforts on the redesign of the homepage, workout pages and profile page, we recognized the value in generating a diagram encompassing all the present features of the Better Living Fitness application. This decision was driven by our intention to gain a comprehensive grasp of the application's overall structure and functionalities.
The Better Living Fitness application consists of four primary navigation core pages: Homepage, Workouts page,
Profile page, and the My Alignment page. The primary focus of our team centers around the first three pages mentioned.​
-
Homepage: At the forefront is the Home page, serving as the users' initial point of entry. Within this page, users are granted access to pivotal functions such as Today's Workout and My Health.
-
Workout page: Central to the user experience is the Workout page, functioning as a pivotal feature and tool for effective exercise. Here, users can peruse their workout routines categorized by date. Furthermore, previous routines can be replicated and somewhat tailored by modifying sets, weights, and repetitions. This enables users to curate workout plans that suit their individual requirements. Users can navigate to associated instructions, exercise categories, and trainer comments via dedicated buttons.
-
Profile page: The Profile Page allows users to access and edit their personal information and profile particulars.
DESIGN PROCESS
Commencing our design endeavor to revamp the UI of the Better Living Fitness application, our initial approach encompassed a thorough review of our transcribed coded interviews. Through this examination, we found three prerequisites that we identified as crucial components to integrate into our forthcoming designs.
-
Clear and elaborate homepage design: Establish an uncomplicated interface enabling users to swiftly grasp the array of functions offered by the app.
-
Easily accessible comprehensive guidance on the workout page: Addressing the universal challenge faced by all participants in locating detailed instructions for each workout.
-
Inclusion of Gifs/Videos on the workout page: In response to the collective struggle observed among participants in locating images/videos depicting the correct execution of each workout due to the current UI using carousels.
Low-Fidelity Sketch
Starting with the core design/UX requirements, our team analyzed the various existing interfaces and pages of the Better Living Fitness application and compared elements with current UX industry standards. This analysis resulted in the creation of our low-fidelity sketch, which merges the previously mentioned UX requirements, as well as a simple interface.
Mid-Fidelity Design
Once we had our low-fidelity design completed and received input from our client, we quickly moved on to developing a more detailed mid-level design.
After finalizing the design of our mid-fidelity prototype we conducted further user testing with Better Living Fitness users at the Better Living Fitness facility in Ann Arbor, Michigan, as well as conducting a stand-up with our client resulting in our team making the following changes for our high-fidelity design:
-
We moved the workout history from the homepage to the workout page.
-
We designed the bottom bar menu instead of the hamburger menu because this gives users direct access to the features that propose the value of the client's offering and this always keeps users informed about where they are.
-
We established a consistent back button over the app and added an alignment section to the bottom navigation bar based on user and client feedback.
FINALIZED HIGH-FIDELITY DESIGN
Below are the finalized 14 frame designs from our team's revamp of the Better Living Fitness iOS application. In this section, you'll see screenshots of all the frames in the design and a demo video of how the application functions.
iOS Demo Video
This video was created to showcase the finalized flow of the application. Click the “Play Button” to watch the video.
bottom of page