TaitGo —

How might we enhance the gym experience at the Tait Mckenzie Fitness Centre at York University?

How might we enhance the gym experience at the Tait Mckenzie Fitness Centre at York University?

cover

TYPE

UI/UX, Material Design, Research & Usability

TOOLS

Adobe XD, Adobe Illustrator, InVision, Pencil & Paper

TEAM

Laura Calucag, Michelle Young

ROLE

Research, User Cases, System Map, Low & High Fidelity Prototyping, User Testing

Observations

What is the current problem?

The Tait McKenzie Centre is the athletic centre at York University. Facilities inside include a pool area, a main gymnasium, and a fitness centre. The space has a welcoming and motivating atmosphere as they encourage inclusivity through signage, while also displaying athletic achievements throughout the space. The centre welcomes community members and York University students able to use the facilities on campus; users are mostly students and are both male and female. Activities at the centre include both individual and group activities, such as team practices or personal training. 

My team conducted an “AEIOU” to observe the Tait McKenzie Centre which can be found in detail below.

The Tait McKenzie Centre is the athletic centre at York University. Facilities inside include a pool area, a main gymnasium, and a fitness centre. The space has a welcoming and motivating atmosphere as they encourage inclusivity through signage, while also displaying athletic achievements throughout the space. The centre welcomes community members and York University students able to use the facilities on campus; users are mostly students and are both male and female. Activities at the centre include both individual and group activities, such as team practices or personal training. 

My team conducted an “AEIOU” to observe the Tait McKenzie Centre which can be found in detail below.

S_Tait_Courtesy-of-York-University-800×450
AEIOU

What is the current problem?

What is the current problem?

What is the current problem?

What is the current problem?

Current issues this system will address include the lack of organization and student awareness of the facility services and fitness classes that the centre offers. It will also address the low involvement of students in programs less related to physical activity. Students will be able to access York’s athletic information along with their personal goals - compiling their activities and stats (done) within the fitness centre.Evident of the lack of organization is the problem of having to bring a bracelet/tag and student ID card to enter the fitness centre area, which can lead to frustration as you can’t enter if you have forgotten one of the above.

Current issues this system will address include the lack of organization and student awareness of the facility services and fitness classes that the centre offers. It will also address the low involvement of students in programs less related to physical activity. Students will be able to access York’s athletic information along with their personal goals - compiling their activities and stats (done) within the fitness centre.Evident of the lack of organization is the problem of having to bring a bracelet/tag and student ID card to enter the fitness centre area, which can lead to frustration as you can’t enter if you have forgotten one of the above.

How will this be solved?

What is the current problem?

How will this be solved?

How will this be solved?

The system will be able to provide students with a tracking and goal-oriented database that illustrates the user’s progress through user inputs and health analytics. The system provides a means for users to access activity schedule times and sign ups to be added to a personal calendar. Through filters and user input the system will be able to tailor recommended activities and challenges to the user’s specific preferences and goals. The app will gamify the experience of working out, achieving goals, and involvement in the fitness community through a point system.

The system will be able to provide students with a tracking and goal-oriented database that illustrates the user’s progress through user inputs and health analytics. The system provides a means for users to access activity schedule times and sign ups to be added to a personal calendar. Through filters and user input the system will be able to tailor recommended activities and challenges to the user’s specific preferences and goals. The app will gamify the experience of working out, achieving goals, and involvement in the fitness community through a point system.

What are the requirements of the application?

As a team, we listed out what requirements needed to be in the application. Beside this, we thought about the type of content that would be needed in this requirement and what sort of function and purpose it would serve. As we listed out these 10 requirements, it was helpful to understand what kind of features could be possible in our application.

As a team, we listed out what requirements needed to be in the application. Beside this, we thought about the type of content that would be needed in this requirement and what sort of function and purpose it would serve. As we listed out these 10 requirements, it was helpful to understand what kind of features could be possible in our application.

requirements

System Map

After discovering the requirements in the application, we created a system map to show the different screens that would exist in the application. This allowed us to see how deep the system would be and what kinds of interfaces needed to be built.

After discovering the requirements in the application, we created a system map to show the different screens that would exist in the application. This allowed us to see how deep the system would be and what kinds of interfaces needed to be built.

Screen Shot 2018-01-19 at 12.40.01 PM

Use Cases

We decided to choose 5 use cases based on the requirements we laid out earlier. For each use case, we created a flow to see the possible interactions and screen that would exist in order for the user to achieve the application’s requirement.

The 5 requirements we decided to base the use cases are:
#1 - The system prompts the user to sign in or create an account.
#2 - The system needs to allow users to tailor their experience based on personal preferences.
#3 - The system needs to allow users to view their fitness statistics and progress.
#4 - The system needs to allow users to sign up for classes and activities.
#5 - The system needs to allow users to challenge their friends.

Below are the user flows in detail of each use case. The flow is separated by screens (grey boxes), actions (purple boxes), and options (purple diamond). (Click to enlarge to see a more detailed view of the use cases)

We decided to choose 5 use cases based on the requirements we laid out earlier. For each use case, we created a flow to see the possible interactions and screen that would exist in order for the user to achieve the application’s requirement.

The 5 requirements we decided to base the use cases are:
#1 - The system prompts the user to sign in or create an account.
#2 - The system needs to allow users to tailor their experience based on personal preferences.
#3 - The system needs to allow users to view their fitness statistics and progress.
#4 - The system needs to allow users to sign up for classes and activities.
#5 - The system needs to allow users to challenge their friends.

Below are the user flows in detail of each use case. The flow is separated by screens (grey boxes), actions (purple boxes), and options (purple diamond). (Click to enlarge to see a more detailed view of the use cases)

These flows also helped us to understand and organize what screens to build when we reached the wireframing and prototyping phase.

These flows also helped us to understand and organize what screens to build when we reached the wireframing and prototyping phase.

Sketching

As a group, we discussed and sketched out what each screen may look like based on the user flows that we created. This phase was crucial to do in a group so that each team member would have a full understanding of the application and as well as we were able to give input on what was working and what wasn’t. Below are some rough sketches we did together as a group before actually heading to the computer to design the interface.

As a group, we discussed and sketched out what each screen may look like based on the user flows that we created. This phase was crucial to do in a group so that each team member would have a full understanding of the application and as well as we were able to give input on what was working and what wasn’t. Below are some rough sketches we did together as a group before actually heading to the computer to design the interface.

Look & Feel

Since we had so many categories of the application, we thought that we could assign different colours for different categories. We wanted to use bright colours to bring a fun feel to the gym experience, as well as a motivating and energetic tone. We also decided to use a sans-serif for a simple, readable interface. The sans-serif typeface also has rounded edges which gives off a more casual tone. Below are the colours we assigned for each section, as well as the typography used.

Since we had so many categories of the application, we thought that we could assign different colours for different categories. We wanted to use bright colours to bring a fun feel to the gym experience, as well as a motivating and energetic tone. We also decided to use a sans-serif for a simple, readable interface. The sans-serif typeface also has rounded edges which gives off a more casual tone. Below are the colours we assigned for each section, as well as the typography used.

lookfeel

Prototyping

We imported our screens to InVision to create the prototype application. Throughout this process, we went through multiple revisions until we felt that it would be appropriate to start user testing. Since we had a deep application system, we decided to break up the sections within each team member. I was responsible for creating the dashboard, schedule, and goals section. Below are some of the screens input into Invision ready to prototype.

We imported our screens to InVision to create the prototype application. Throughout this process, we went through multiple revisions until we felt that it would be appropriate to start user testing. Since we had a deep application system, we decided to break up the sections within each team member. I was responsible for creating the dashboard, schedule, and goals section. Below are some of the screens input into Invision ready to prototype.

prototyping_one
prototyping_two

User Studies

After finishing the screens and using InVision to prototype the application, we decided that it was time to user test our application. We prepared for this by writing up a script and several tasks that each person would perform in our application. During user testing, each member had a role whether is was: talking/reading the script, filming the user study, or writing down notes.

Before we started user testing with each person, we gave them a pre-questionnaire to fill out so that we could better understand the demographics and different situations/experiences. After this, we asked each person to interact with the digital prototype and to “think-aloud” while they perform the tasks that we ask to do.

After finishing the screens and using InVision to prototype the application, we decided that it was time to user test our application. We prepared for this by writing up a script and several tasks that each person would perform in our application. During user testing, each member had a role whether is was: talking/reading the script, filming the user study, or writing down notes.

Before we started user testing with each person, we gave them a pre-questionnaire to fill out so that we could better understand the demographics and different situations/experiences. After this, we asked each person to interact with the digital prototype and to “think-aloud” while they perform the tasks that we ask to do.

DEMOGRAPHICS

DEMOGRAPHICS

Below are the demographics that we summarized from the pre-questionnaires filled out.

  • 6 participants
  • All York University students
  • All fall in between 18-24 years old
  • Fitness levels: 2 beginner, 2 adequate, 2 expert
  • 4/6 participants members of Tait McKenzie (Athletics & Recreation facility at York University)
  • Majors varied from: Design, Kinesiology, Commerce, Nursing, and Social Sciences

Below are the demographics that we summarized from the pre-questionnaires filled out.

  • 6 participants
  • All York University students
  • All fall in between 18-24 years old
  • Fitness levels: 2 beginner, 2 adequate, 2 expert
  • 4/6 participants members of Tait McKenzie (Athletics & Recreation facility at York University)
  • Majors varied from: Design, Kinesiology, Commerce, Nursing, and Social Sciences

POST-QUESTIONNAIRE

POST-QUESTIONNAIRE

After each session, we asked the person to fill out a post-questionnaire asking about their experience with the application. Not only were we able to obtain notes from their user testing session, but we were able to better understand the areas that worked and what didn’t work through the post-questionnaire. In the post-questionnaire, we also asked them if they can see themselves using this application and had any further feedback/suggestions. Below is a summarized version of the post-questionnaires combined and filled out by those who participated in user testing.

After each session, we asked the person to fill out a post-questionnaire asking about their experience with the application. Not only were we able to obtain notes from their user testing session, but we were able to better understand the areas that worked and what didn’t work through the post-questionnaire. In the post-questionnaire, we also asked them if they can see themselves using this application and had any further feedback/suggestions. Below is a summarized version of the post-questionnaires combined and filled out by those who participated in user testing.

Screen Shot 2018-01-19 at 1.49.14 PM

Final Analysis

Based on the feedback we received during user studies and post-questionnaires, we analyzed what the biggest problems were and what possible solutions we could make to fix these cases. From observing and analyzing, we decided to make several changes based on the user testing.

Based on the feedback we received during user studies and post-questionnaires, we analyzed what the biggest problems were and what possible solutions we could make to fix these cases. From observing and analyzing, we decided to make several changes based on the user testing.

Screen Shot 2018-01-19 at 1.53.49 PM

Introducing TaitGo

TaitGo is a personal fitness application that tracks fitness goals, statistics, and exercises while all being connected to a community at York University. TaitGo shows facilities, games, and activities happening at Tait McKenzie Centre, which is the Athletics & Recreation Centre at York University. With this community, it brings a motivating tone to the experience of one's fitness journey.

You can interact with the prototype by clicking here: https://invis.io/Q3ORQ2BZCYK

TaitGo is a personal fitness application that tracks fitness goals, statistics, and exercises while all being connected to a community at York University. TaitGo shows facilities, games, and activities happening at Tait McKenzie Centre, which is the Athletics & Recreation Centre at York University. With this community, it brings a motivating tone to the experience of one's fitness journey.

You can interact with the prototype by clicking here: https://invis.io/Q3ORQ2BZCYK

dashboard

Customize your dashboard.

Customize your dashboard.

Add widgets to your dashboard to see the things that matter the most to you.

Find activities, classes, and events happening at York U.

Stay involved and add events into your personal calendar!

schedules
fitness

Keep track of your fitness stats.

Wanna see how many calories you've burned this week? You can see exactly how much progress you've made throughout your fitness journey.

Challenge your friends and stay motivated!

Connect with your friends, share your fitness journey with them, and see what others are doing!

community
goals

List your goals and complete them.

Keep track of your short and long term goals. View your completed goals and see how far you've come!

Application Walkthrough

Below is a detailed video walkthrough of the TaitGo application to show how someone might interact with the application to access different features such as fitness goals, statistics, and activities.

Below is a detailed video walkthrough of the TaitGo application to show how someone might interact with the application to access different features such as fitness goals, statistics, and activities.

Reflection

CHALLENGES

CHALLENGES

Creating a deep systemed application
After creating the requirements of the application, we realized that the application’s potential of having a deep system. Working on a deep systemed application was challenging at times since we had to carefully  think out the flow of the entire system. To work on things more productively, we ended up splitting up sections so that each person was responsible for a number of screens. Although we split the screens up, we were still very much involved with the entire system altogether through constant discussions and feedback giving.

Since we split up the screens, another challenging aspect to a deep systemed application was making the application look unified in style and interface. Our initial mockup (shown below) of our prototype really proved this as the visual style was not all unified and it was almost obvious that the application was split up between people.

Creating a deep systemed application
After creating the requirements of the application, we realized that the application’s potential of having a deep system. Working on a deep systemed application was challenging at times since we had to carefully  think out the flow of the entire system. To work on things more productively, we ended up splitting up sections so that each person was responsible for a number of screens. Although we split the screens up, we were still very much involved with the entire system altogether through constant discussions and feedback giving.

Since we split up the screens, another challenging aspect to a deep systemed application was making the application look unified in style and interface. Our initial mockup (shown below) of our prototype really proved this as the visual style was not all unified and it was almost obvious that the application was split up between people.

reflection_one

Onboarding process - different gradients are used with different coloured buttons

reflection_two

Goals section - only a few colours are used with no gradients and is a much more toned down version compared to the onboarding process

To solve the issue of different visual styles between all the screens, we decided to assign colours to certain sections of the application, as well as a colour for the buttons so that it would be clear and easy for the user to learn.

While we still wanted the onboarding to differentiate from the actual application, we used pictured backgrounds (that ties with the imagery used in the community section) instead of using gradient background, which was a little too harsh and not used much throughout the application.

To solve the issue of different visual styles between all the screens, we decided to assign colours to certain sections of the application, as well as a colour for the buttons so that it would be clear and easy for the user to learn.

While we still wanted the onboarding to differentiate from the actual application, we used pictured backgrounds (that ties with the imagery used in the community section) instead of using gradient background, which was a little too harsh and not used much throughout the application.

WHAT I LEARNED

WHAT I LEARNED

Research & Usability Methods
Prior to this project, I would create applications and call it the final product. However, this project allowed me to learn about the research & usability methods (i.e. use cases, questionnaires, think-aloud user testing) in order to create a strong application based on testing and research. With all the steps of research and testing, I found each method to be helpful in understanding the audience and really understand the interactions that worked within the application. Overall, it was really interesting to get people involved with the application.

Research & Usability Methods
Prior to this project, I would create applications and call it the final product. However, this project allowed me to learn about the research & usability methods (i.e. use cases, questionnaires, think-aloud user testing) in order to create a strong application based on testing and research. With all the steps of research and testing, I found each method to be helpful in understanding the audience and really understand the interactions that worked within the application. Overall, it was really interesting to get people involved with the application.

WHAT I WOULD CHANGE/IMPROVE ON

WHAT I WOULD CHANGE/IMPROVE ON

User Testing
After user testing, we decided to make a few revisions based on the feedback and experiences. If I were to further improve the application, I would try another round of user testing to test out the revisions made. Since we only got to user test with 6 people, I would try user testing with more people this time with different backgrounds and experiences.

User Testing
After user testing, we decided to make a few revisions based on the feedback and experiences. If I were to further improve the application, I would try another round of user testing to test out the revisions made. Since we only got to user test with 6 people, I would try user testing with more people this time with different backgrounds and experiences.

Measures of Success

A way to measure success of the product can definitely be through user testing. Although we did user test with 6 participants, I think it would be useful to go through another round of user testing to de-bug anything that isn't working in our application and also to test out the revisions that we made after analyzing our first round of user testing. If the product were to go live at Tait McKenzie Centre, ways to measure success would be amount of people that signed up on the application and are using it to sign up for classes, challenge their friends, and track their fitness statistics.

My team and I ended up submitting this project to the York University Undergraduate Research Fair, which I'm glad that we did since it really stood out from the normal submissions that this research fair got (which were usually science-based). However, since a lot of our project relied on research and user testing methods, we were able to submit this project into the fair and won a gold prize. 

User Testing
After user testing, we decided to make a few revisions based on the feedback and experiences. If I were to further improve the application, I would try another round of user testing to test out the revisions made. Since we only got to user test with 6 people, I would try user testing with more people this time with different backgrounds and experiences.