UniCore
Application Design & Evaluation
Overview
I led a team of 5 and spearheaded the design of UniCore, a weight training app designed for university gym users, especially beginners.
By the end of the project, we delivered a comprehensive high-fidelity prototype with an 88% task success rate in usability testing, and it is now ready for development.
Role
Team Leader
UX Designer
Tools
Figma
Time
8 weeks
– Introduction –
Background
The market is filled with weight training apps, but most cater to experienced trainers or are tailored to specific gyms. For students, there’s a gap—an app that is beginner-friendly and specifically designed for a university gym environment.
Problem
"How can we design a weight training app tailored to university gym users, who are primarily students with limited experience in weight training?"
Process Overview
– Phase 01 - Research –
Target Audience
We have selected the Gregory Gym Center at UT Austin as our initial target gym and plan to implement a modular design, allowing it to be customizable for any other school gym.
The primary users of our app are individuals who depend on the Gregory Gym Center to meet their fitness needs.
Survey
By gathering feedback from fitness app users, we gain clear insights into market gaps and user priorities.
30 surveys were conducted with participants ranging in age from 18 to 34 years.
By using an Affinity Diagram to categorize participants' responses, we identified the key features to include in our app.
↑Partial demonstration of our work.
We found that responders’ needs tended to center around 5 key components that we decided to take into account when designing our fitness app:
Workout personalization
Tracking and logging
Machine tutorial
Gym Information
App Integration
Competitive Analysis
Before we started on the design process of the app, we wanted to get a comprehensive understanding of the current landscape of workout apps.
We selected 6 direct competitors (Planet Fitness, Apple Fitness, Fitbod Workout & Fitness Plans, Uplift, and Workout Planner & Gym Tracker) and 1 indirect competitor (MyFitnessPal).
Direct Competitors
Planet Fitness
Apple Fitness
Fitbod
Uplift
Workout
Indirect Competitors
MyFitnessPal
↑Partial demonstration of our work.
At the conclusion of our competitive analysis, we solidified the 5 key features we wanted to integrate into our app:
Key Features:
Workout personalization
AI-generated workout plans customized to individual users.
Tracking and logging
Ability to log workouts and clearly track progression.
A notes function for each machine.
Achievement badges to reward progress.
Machine tutorial
An anatomical model for users to pinpoint specific areas they want to focus on.
Multiple tutorial formats for gym machines, including detailed tips and step-by-step instructions.
Gym Information
Gym information, such as crowd levels and the availability of machines at a specific gym.
App Integration
Integration with other apps and smart devices.
Storyboard
It was challenging to articulate what each of us had envisioned for our app. At this point, we decided that creating a storyboard was necessary to understand the app from the users' perspective, prioritizing their wants and needs over our own.
Robert often forgets his workout schedule and focus area. Based on past records, the app recommends: "10/15 is the best time for your next workout. Focus on your lower body."
At the gym, the app detects his location, notifies him to check in, and starts recording the session as a backup.
Unsure where to start, Robert uses the app’s lower body section for exercise demonstrations, a training plan, and past workout data.
He logs progress easily by tapping the screen after each set.
When leaving, the app alerts him about any missing records.
After hitting his weekly goal, it congratulates him and offers a social media share option, boosting his sense of achievement.
Brittany feels nervous at the gym, unsure of what to do.
Overwhelmed by the unfamiliar equipment, she decides to start with the treadmill.
Using the app, she selects "treadmill" from the equipment list and explores options to watch a demonstration video or view images.
Since she forgot her headphones, she appreciates the image option. The app also highlights which muscles the treadmill engages.
After learning how to use the machine, Brittany realizes she doesn’t know the ideal pace or duration for her workout. The app suggests beginner-friendly settings, boosting her confidence as she starts.
Once finished with the treadmill, Brittany uses the app again to learn how to use the bench press, ready to continue her workout.
↑ Partial demonstration of our work.
The storyboards clarified our perspectives, highlighting shared ideas and uncovering fresh contributions. They proved invaluable for testing concepts, validating assumptions, and aligning the team on a user-centered approach.
– Phase 02 - Design –
Wireframing
We started by creating the wireframes of the 4 main pages - Home page, Plan page, Equipment page, and Profile page.
Usability Testing & Design Iterations
Based on the wireframe, we created a Mid-Fi prototype and conducted 3 rounds of usability testing and iterations.
We recruited a total of 24 participants:
1st Round
5 Participants
77% Task Success Rate
2nd Round
9 Participants
67% Task Success Rate
3rd Round
10 Participants
88% Task Success Rate
Due to limited space, I will highlight some of the most important design decisions for this section. If you would like to view the full report, feel free to check it out here.
Design Decision #1 - Gym Information
Discription
This page aims to provide important information related to the target gym, including gym hours, announcements, and the equipment list.
Users should be able to view the information they need in an intuitive and convenient way
Problem
Users have to view the gym announcements on the second layer of the page.
Some participants mentioned that there is too much text, making it difficult to find what they are looking for, especially for beginners.
Solution
The Announcements section has been moved to the Home page and placed at the top.
The information on the gym equipment list page has been reduced by removing the 'Amenities' section, as participants deemed it unnecessary.
Machines are now categorized by muscle group instead of machine type. Icons have been added to make the search process more intuitive.
Design Decision #2 - Machine Tutorial
Discription
The page aims to provide users with a convenient way to access machine tutorials by offering them in 3 formats: text, images, and video.
Problem
The original design will be difficult to implement if there is a lot of text and images for the tutorial.
The page lacks aesthetic appeal and a clear information structure.
Solution
An image carousel was implemented to present the step-by-step tutorial, as it allows users to easily follow the instructions in a sequential format.
Each step includes a clear image that can be enlarged, along with concise text instructions, providing users with a comprehensive explanation.
Design Decision #3 - Weight Training Plan
Discription
In our design, when a user finishes a set, they can short-press the progress ring to log that set. The ring will be partially filled according to the percentage completed.
Once all sets are finished, a long-press will fill the entire progress ring.
The Edit/Reset buttons allow users to modify the details of their plan (e.g., adjusting the weight) or reset their training progress.
Problem
Most participants couldn’t understand where to click to complete the task.
Most participants didn’t understand the meaning or purpose of the progress ring.
Solution
We decided to replace the progress ring with a simple, intuitive 'Complete' button. When tapped, it will change the color of completed equipment items to grey.
We switched from a horizontal to a vertical layout to provide more space for displaying detailed information, making it easier to understand.
A pop-up message has been added to notify users when they have completed today's weight training plan.
Final Design
Here’s the final design of UniCore, demonstrating six different user flows：
On-boarding Process
Access to Gym Information
Equipment Tutorial & Training History
Create & Edit a Workout Plan with AI
Complete a Workout Plan
User’s Profile and Achievements
Takeaways
Open to Improvement - We must remain open to recognizing that our initial designs may be less intuitive than expected. User testing is vital for identifying what works and what needs improvement.
Pay Attention to The Wording of Tasks - The wording of tasks significantly affects success rates; unclear language shifts focus from completing tasks to understanding them.
Ensure Transparency - Clearly communicate how user information is used, such as personal data powering AI-generated plans, and provide an opt-out option.
Use Instructional Text Properly - Avoid guiding users solely with instructional text, as it is often overlooked and hard to notice.