Fitness Passport

Fitness Passport is a meticulously designed mobile application to assist fitness enthusiasts in their active lifestyle journey, irrespective of their global coordinates. Maintaining a fitness routine while traveling can often feel daunting due to language barriers, unfamiliar locations, and the sheer task of finding suitable activities. Fitness Passport effectively addresses these challenges, condensing your search to a singular, user-friendly platform.

Problem

Serious gym-goers often need help maintaining their fitness routine while traveling due to difficulty finding gyms with the appropriate equipment, varied classes, reasonable pricing, and flexible access. Language barriers and unfamiliarity with the local fitness landscape compound this problem.

Solution

Fitness Passport is an app that I designed to combat this problem. It enables users to discover and access various fitness facilities and activities based on their preferences and location. It also allows them to purchase gym day passes, get details about equipment and class schedules, and explore outdoor activities like biking and hiking, making their fitness journey while traveling effortless and personalized.

Tools Used

Figma
FigJam

Illustrator
Slack

My Role

Project Duration

UX/UI Designer

1 Year

Zoom
Google Suite

Otter.ai
Miro

Discovery

Secondary Research

For my secondary research, I honed in on the challenges fitness enthusiasts encounter to stay active and healthy during their travels. The main hurdles emerged from difficulty accessing suitable fitness facilities or activities aligned with their personal fitness goals, such as bodybuilding, martial arts, yoga, and more, all within a reasonable budget. Further complexities arose from language barriers and unfamiliar environments.

The prevailing dissatisfaction and the evident competition underscored that existing solutions, though available, needed to be more effectively addressing everyone's needs. These challenges disrupt the consistency of an individual's fitness journey. My research emphasized the need for a more personalized, intuitive solution that enhances the overall fitness experience, irrespective of location.

Primary Research

I deployed screener surveys to recruit participants to gain insight into how users discover and access fitness facilities, classes, and outdoor activities while traveling. After conducting in-depth interviews and collecting valuable data, I consolidated my findings into affinity groups, empathy maps, and personas. This in-depth exploration of user behavior and preferences was instrumental in shaping the features and functionality of the Fitness Passport app, ensuring it effectively addresses the needs and wants of fitness enthusiasts worldwide.

Surveys

While creating the Fitness Passport app, my primary focus while developing screener surveys was to understand the challenges individuals face while trying to maintain their physical activities during travel. I targeted participants who committed to a specific physical activity and traveled frequently for work or leisure. The objective was to understand the hurdles they encountered in maintaining their fitness routines and their willingness to improve their current habits. This approach helped identify gaps in existing solutions and determine how Fitness Passport could make it easier for people to stay active while traveling.

Interviews

I conducted interviews with a total of five participants after selecting suitable candidates through screener surveys. The interviews were conducted via Zoom calls, and all sessions were recorded for later reference. During the interviews, a range of topics were discussed, including the participants' current physical activities, frequency of participation, desired activities, tangible benefits of physical activities, essential equipment, travel frequency, efforts to maintain physical activities while traveling, challenges faced, frustrations encountered, potential solutions, the feasibility of maintaining practices while traveling, and any additional ideas or thoughts the participants wanted to share. The interviews provided valuable insights into user behaviors, preferences, frustrations, and aspirations, helping shape the design and features of the Fitness Passport app to better cater to the needs of fitness enthusiasts during their travel experiences.

Screener-Survey-Training-While-Traveling

Affinity Mapping

I created affinity maps for Fitness Passport to effectively understand users' needs and behaviors, ensuring a user-centered design. These maps organized complex data into clear patterns, identifying key user pain points and desires. This informed design decisions, guided feature prioritization, and helped shape an intuitive user interface, resulting in an app that is functional, enjoyable, and user-friendly.

Empathy Mapping

The empathy map was created as a tool to foster a deeper understanding of the users' thoughts, feelings, needs, and motivations throughout their fitness journey, particularly while traveling. By visualizing the users' experiences and perspectives, the empathy map helped to humanize the design process and enable a more empathetic approach to problem-solving.

It allowed me to put myself in the users' shoes and gain insights into their pain points, frustrations, and aspirations. This deeper understanding facilitated the development of more relevant and user-centered solutions, as the empathy map guided design decisions, feature prioritization, and the overall user experience of the Fitness Passport app. It had a significant impact on the process by ensuring that the end product resonated with the users' emotions, motivations, and needs, resulting in a more meaningful and engaging fitness experience while traveling.

Affinity maps were then categorized into two empathy maps, Stanley the Struggler and Stacy the Planner.

Personas

Personas were created to develop a deeper understanding of Fitness Passport's target users and guide future design decisions. By crafting personas based on user research and insights, it became possible to create fictional representations of different user types, each with their own goals, motivations, and behaviors. These personas serve as a reference and reminder of the diverse user base, ensuring that design choices are made with the users in mind. They provide a framework for empathy and help to align the team's vision by representing the needs and preferences of real users. Personas will continue influencing future work by guiding feature prioritization, user flow design, and overall user experience enhancements. They serve as a constant reminder to prioritize user-centric design and to create solutions that cater to the specific needs and goals of the personas, ultimately resulting in a more engaging and impactful fitness experience for Fitness Passport users.

Stanley the Struggler: is an avid traveler with a flexible remote job and a passion for daily weightlifting. He seeks locations with quality internet and gyms but struggles with under planning and the overwhelming number of choices available, which can disrupt his training and waste time. He aims to balance work, training, and travel experiences while maintaining a flexible schedule.
Stacy the Planner: a financial planner, thrives on structure and planning. She enjoys vacation travel and daily hot yoga sessions, which help her destress. However, she finds planning overwhelming, worries about having enough time for activities, and challenges finding suitable locations for hot yoga. She aims to maintain her daily hot yoga practice, travel comfortably, and minimize stress through flexible, strict scheduling.

Ideation

Problem Statements (HMW)

How might we’s
- The final stage of my research for Fitness Passport involved synthesizing the collected data into How Might We (HMW) statements to articulate the significant challenges users want to overcome.
  
  1. How might we make it easier for travelers to maintain their practices while on the road or abroad?
  2. How might we mitigate potential language barriers?
  3. How might we help users find alternatives when they cannot do their regular workout?
  4. How might we make it easier for users to see fitness opportunities and accommodations available in their desired travel location?
  5. How might we make it easier for users to rent or purchase fitness equipment they may have forgotten or couldn't bring.

Brainstorm

Having concentrated on the 'How Might We' (HMW) statements, it was time to transition into the ideation phase of the project. This stage entailed sketching potential interface designs, an integral step toward generating viable solutions to address the users' identified challenges effectively.

User Stories

Identifying the essential app features was a must before diving into the design process for Fitness Passport. I arranged user stories based on their importance, prioritizing critical functionalities. This systematic approach aided in understanding the indispensable features and steered me in building a user experience that's straightforward to navigate.

As a user, I want to:

High - Must Have

I want to be able to purchase day passes and rent equipment from my phone so that I can save time while traveling and mitigate language barriers.
I want to view all offerings in my own language so that I can use the app no matter what language barriers exist.
I want to have many filters so I can see what offerings are available at times I'm free and prices that fit my budget so that I can make the most of my travel and not be frustrated with an app.
I want to be able to explore training opportunities no matter where I am so that I can keep healthy and stay motivated anywhere in the world.
I want to be able to find alternatives to my usual training so that I can mix it up but also not fall off my training if it's not available in my current location.

Site Map

With a more refined understanding of my users' requirements, I crafted the site map for Fitness Passport with an emphasis on simplicity. Fitness can be simple, and I aimed to avoid creating an experience that could overwhelm the user. Consequently, I designed the app so users could easily access their fitness location library, set reminders for workouts or classes, and search for new fitness activities or venues.

User Flows

User flows were instrumental in shaping the interface of Fitness Passport, laying out an intuitive and seamless user experience. Three central tasks emerged from the minimum viable product (MVP) outline, each contributing significantly to the app's efficacy. These tasks included discovering and purchasing a day pass to a nearby gym, setting a default translation language, and specifying users' preferred 'Practices' for personalized activity suggestions. A simple yet effective navigation route was carved out by meticulously plotting these user flows, enhancing the user's interaction with Fitness Passport.

Sketching

Sketching served as a practical tool to visualize the user flows and actualize the interface of Fitness Passport. It quickly highlighted the need for a clean and uncluttered design, emphasizing simplicity to avoid overwhelming the user. This early design phase significantly impacted the project, guiding me towards a minimalistic yet practical approach. As sketches progressed, I saw a clear and promising direction emerging for the design, allowing me to refine and enhance the app's user interface iteratively.

Low-Fidelity Wireframes

Shifting my sketches into low-fidelity wireframes using design software allowed me to grasp better the spatial distribution and hierarchy of the app functions in Fitness Passport. This process illuminated opportunities for further simplification and prioritization of features, ultimately leading to an improved user interface. Throughout the iterations, I found that the design evolved towards being more intuitive and user-centric, teaching me that iterative refinement is critical to developing an aesthetically pleasing and functional application. The process highlighted the value of iterative design in creating an app that meets user needs and expectations.

Medium-Fidelity Wireframes

The primary focus shifted towards enhancing usability by streamlining the interface. This stage involved a critical re-evaluation and reduction of the previously cluttered layout, marked by an overabundance of buttons and unnecessary screens. By simplifying these elements, the design moved towards a more user-friendly and intuitive experience. The medium-fidelity wireframes provided a more concrete visualization of this streamlined approach, allowing for the integration of essential UI components and functional layouts that emphasized ease of navigation. This process not only made the application more accessible but also highlighted the importance of removing superfluous features that hinder user engagement. The reworked interface, with its balanced and focused design, underscored the significance of usability in creating an effective and appealing digital fitness platform.

Design

Moodboard

In creating Fitness Passport, I developed a mood board that encapsulated the specific look and feel of the app. The imagery chosen aimed to convey the concept of Fitness Passport as a gateway to fitness opportunities worldwide, regardless of location or activity. It evoked a sense of adventure, freedom, and connection to nature, aligning with the brand's attributes and personality. The UI inspiration for the app incorporated a dark theme with strategically placed bright elements and buttons to enhance usability and draw attention to essential features. Rounded corners were utilized to accentuate various "cards" within the interface, creating a visually appealing and user-friendly experience. The mood board played a pivotal role in shaping the visual direction of the app, ensuring a cohesive and engaging design that resonates with the brand's mission and the users' fitness journey.

Style Guide

The brand platform of Fitness Passport played a pivotal role in shaping the style guide for the app, influencing the design standards and overall visual direction. By aligning the style guide with the brand's mission, personality, and attributes, it ensured a cohesive and consistent user experience. The style guide served as a reference for colors, typography, iconography, and other design elements, providing clear guidelines for design decisions and maintaining a unified brand identity. This significantly impacted the design process, reducing ambiguity, improving efficiency, and ultimately resulting in a visually appealing and on-brand app experience for users.

Hi-Fidelity UIs

As we progressed to creating high-fidelity user interfaces, our central focus was on refining the design to ensure a consistent visual style and seamless user interaction. My primary role involved aligning the notification screen with the overall aesthetic of the app, adhering to the principle of intuitive usability. This meant simplifying designs and avoiding elements that could disrupt the user's experience.

The revision process was guided by the key user-centric design principle of intuitive interaction. We aimed to create an interface that users could navigate effortlessly, without the need to learn new functionalities. This approach was crucial in adjusting the notification screen design, where I opted for simplicity and familiarity, drawing it closer to the initial wireframe concept.

As the client introduced additional features, our challenge was to integrate new screens and functions without compromising the app's intuitiveness. This step involved a delicate balance of covering all necessary functionalities while "trimming the fat" - removing any superfluous elements that didn't contribute to a streamlined user experience.

Throughout this phase, our team worked diligently to ensure that each design change not only enhanced the visual appeal of Circlez but also adhered to the ethos of user-centricity. The final high-fidelity UIs were a testament to our commitment to creating an interface that was not just visually engaging but also highly intuitive and user-friendly.

Prototype

Completing the prototyping process was essential in bringing the Fitness Passport app to life and ensuring a user-centered design. By creating interactive prototypes, I could effectively communicate and validate design ideas, reducing the risk of potential usability issues; testing the prototypes with real users allowed for valuable feedback, enabling iterative improvements that enhanced the overall user experience and minimized usability challenges. The impact of prototyping was significant as it helped a more refined and user-friendly design, aligning the app with the needs and expectations of its intended users.

I utilized Figma as the primary platform to create an interactive prototype for Fitness Passport. I was able to bring my design concepts to life and transform them into a functional prototype. By leveraging Figma's capabilities, I could create interactive screens to simulate the app's user experience. This allowed me to test the prototype with users, gather valuable feedback, and iterate on the design to ensure a seamless and intuitive user journey. Figma proved to be an invaluable tool in the prototyping process, enabling me to showcase the vision of Fitness Passport and refine its design based on user insights.

Testing

Usability Testing

The objective of the usability testing for Fitness Passport was to evaluate the user experience and identify any potential usability issues that may hinder seamless navigation and utilization of the app. Participants were given specific tasks, such as purchasing a day pass for a selected gym, changing language settings, and setting their preferred "Practices" within the app. The testing was conducted through moderated sessions, using a think-aloud protocol to gather insights into participants' thoughts and interactions with the app.

Activity-20-Synthesizing-and-Redesigning-Google-Docs.png

Issue 1:

The placement of the "My Practices" section within the app feels out of place or unintuitive to some participants.

Several participants struggled to locate the "My Practices" section. This is integral to the function of the app as users need to set their “practices” in order to get suggestions based on what they already do when that “practice” is not available where they are.
Participants indicated they expected the "My Practices" section to be located elsewhere within the app. On the home screen or under a user profile. The issue appeared to disrupt the fluidity of the user experience as users attempted to go anywhere but settings at first this incited frustrations for some participants.

Issue 2:

Having to hit the small checkbox on the checkout page was unintuitive to some users.

Some users had difficulty selecting the small checkbox on the checkout page.
Participants wanted the entire text area to be a selectable option, not just the checkbox.
This design choice frustrated some users and disrupted the checkout process.

Issue 3:

Some participants didn’t like the idea of having to create an account to explore options near them.

Several users were put off by the need to create an account before exploring options near them.
This requirement was viewed as a barrier to entry by some, potentially discouraging them from using the app.
The inability to explore the app's features without an account could negatively affect user engagement and acquisition.

Solution 1:

Consider relocating the "My Practices" section to a more prominent or intuitive location within the app based on user feedback.
The two main recommendations derived from user testing are to implement a profile page on the home screen that allows users to access and modify "My Practices" and ensure it is still accessible through the settings. And centralize a button on the home screen that allows immediate access to the "My Practices" page

Solution 2:

Consider giving the whole area for each purchase option its own dedicated button this would presumably remove all confusion as to where to tap.
The checkbox can stay to indicate what options are selected though the whole area especially the text should be selectable

Solution 3:

Consider allowing users to explore local options or other features of the app without initially requiring account creation. Though limiting what they can do without first registering is a must. For example, making purchases and editing practices are for registered users only.
Implement a guest mode or offer limited functionality for non-registered users, increasing the app's appeal and reducing initial barriers.

Redesign

Based on valuable user feedback obtained during testing, an important addition was made to the sign-in screen of Fitness Passport. In response to participants' frustrations with the requirement of signing up to explore nearby options or try out the app, a "Continue as Guest" button was incorporated. This enhancement addresses the user's need for immediate access. It allows them to explore Fitness Passport without the initial barrier of creating an account, offering a more inclusive and hassle-free experience for users.
In response to user testing feedback, a significant improvement was made on the home screen of Fitness Passport. To address the issue of users struggling to locate the "Change Your Practices" function within the settings, a dedicated button was added directly on the home screen. This adjustment ensures the easy accessibility of this integral function, meeting users' expectations and streamlining their experience. By placing the "Change Your Practices" button prominently on the home screen, Fitness Passport empowers users to modify their practices effortlessly and enhances the app's overall usability.
Based on user feedback, another improvement was implemented on Fitness Passport's "Selected Offering" page. The offerings were transformed into full buttons to address users' frustrations with selecting small checkboxes. This change allows users to choose the desired options by clicking on the entire area, improving usability and eliminating the confusion caused by small checkboxes. By making the whole area selectable while achieving the same functionality, Fitness Passport provides a more intuitive and seamless user experience during the selection process.

Reflection

Learnings

Reflecting on the Fitness Passport project, I recognize it as a pivotal experience that enhanced my UI/UX design capabilities, particularly in user research. One of the most challenging yet enlightening aspects of the project was determining the essential features of the application. The stringent criteria I set for participant selection in the questionnaire phase proved a significant hurdle, as it was difficult to find enough suitable participants for the subsequent interview process. This challenge, however, underscored the importance of thorough and targeted user research in informing the design process, a skill I significantly improved upon during this project.

The primary target audience for Fitness Passport comprised fitness enthusiasts and individuals keen on maintaining their fitness routines while traveling. The project's core objective was to address the language barriers these users often encounter in foreign locales and to facilitate access to day passes and fitness classes when they are out of town or country. This unique focus required a deep understanding of the user's journey and pain points, shaping the application's design to cater to their needs.

My experience with Fitness Passport was more than just another project; it was a deep dive into the complexities of designing for a niche market. The insights gained from this process were invaluable, particularly in enhancing my research skills. The ability to conduct effective user research, synthesize findings, and translate them into a functional and appealing design has been a significant takeaway. These refined research skills are not just a testament to my growth in this project but will also be a cornerstone in my future endeavors.

As I look ahead, the expertise and insights gained from Fitness Passport will undoubtedly influence my approach to future projects. The rigorous user research process, in particular, will be an asset in any UI/UX design project, ensuring that the end product is not only visually compelling but also resonates with the intended audience. Whether it is in the fitness sector or any other industry, the skills honed in this project will be instrumental in creating designs that are both innovative and user-centric.