CSM Athletic Center QR Code System
Design and implementation of a QR code system for the College of San Mateo Athletic Center for my UX Design class.
Target: College of San Mateo Athletic Center New Users
Market: College of San Mateo Athletic Center
Role: UI/UX Designer
Software: Figma
The intended outcome:
Increase confidence in users.
Enhance learning experience
Improve inclusivity
Positive perception of the gym
Overview
The Challenge
The Solution
Many people feel intimidated or out of place when they first start going to the gym. Without knowing how to use the equipment, they often stick to cardio machines because it feels safer. Others even give up on the gym entirely because they don't feel confident enough to ask for help or try new things.
How does the implementation of QR code-accessible instructional videos on all gym equipment at the athletic center influence new and regular users' confidence, learning experience, and engagement with gym facilities?
Implement a QR code system on gym equipment that provides:
Instructional Videos: Professionally created guides showing exactly how to use the machines.
Quick and Easy Access: Scan the QR code with a phone, and the video pops up. No complicated steps.
Judgment-Free Learning: Users can learn at their own pace without feeling scrutinized.
Design Process
Research
For the QR Code system, my research involved interviewing students, staff, and visitors to understand pain points with their current experience at the Athletic Center. I conducted observations of gym users and analyzed usage patterns to identify key areas where the implementation of a QR Code could benefit their experience, specially new users, and make using equipment more engaging.
Wireframes
After conducting my primary research, I started sketching the wireframes taking into consideration the need for instructional videos, step by step explanation of the exercise, common mistakes to avoid, and finally, another section for more advanced users, so everyone, not only new users, could benefit for the QR system regardless of their level of expertise or even confidence at the gym.
Low Fidelity Prototypes
The first round of low fidelity mockups allowed me to visualize the core user interface elements and test the visual hierarchy, spaces, and overall layout. These designs incorporated feedback from the wireframe phase and started to anticipate the brand identity and color palette, copy write, and specific information.
High Fidelity Prototypes
After conducting user testing with the initial lo-fi mockups, I refined the designs to address usability issues and feedback. The high fidelity mockups show the final iteration with not only the brand colors and copy write, but also with significant improvements in visual clarity ready to be tested for real users.
Testing
After conducting the usability testing with the high fidelity mockups with 5 people, I refined the design to address all the feedback I received and fix the painpoints noticed in the testing. The final iteration shows the improvements in visual clarity, accessibility, and alignment with user expectations.
Final Product
Takeaways
The implementation of the QR code system will improve inclusivity and a positive perception of the gym.
The QR code system will support the personal trainer plan as the users see the trainers perform the exercises in the videos.
The QR code system will increase confidence in users and enhance their learning experience.