MacBuilder
Julia Kispert, Abby Stolp, Nawal Chaudhry, and Bea Bautista
Click to check out our Figma prototype
A widely discussed phenomenon at Macalester is the social divide that exists between student-athletes and the rest of the student body.
It is not uncommon to meet an athlete in a class and find that they have almost exclusively interacted with other athletes throughout their time at Macalester or to talk to a non-athlete and find that they have never once been into the Leonard Center let alone attended a sports event. To address this gap, we have redesigned the TeamBuilder app, a tool used by every athlete at Macalester, with the goal of integrating the student and athlete experiences using features that all students and student-athletes will find useful.
Athlete schedules are difficult to access and are only posted on a spreadsheet at the gym door. This makes it difficult for the Macalester community, especially those who are not on sports teams to know when the Leonard Center gym is booked for practice. Additionally, the team schedules for game days are not centralized and are also difficult to access. This has a noticeable impact on turnout for athletic events at Macalester and affects both student-athlete morale, as well as the wider campus culture.
The closest solution to these problems currently implemented at Macalester is the TeamBuilder app. The existing app has a number of issues that the users have expressed concern about, including things like glitchiness, a lack of attention to athletes with injuries, and abrasive UX design, among other issues, so our project will also serve as a solution to these athlete concerns.
Using Neilsen’s 10 Heuristics, we were able to evaluate the latest version of the TeamBuilder app, which would help inform our design decisions.
Macalester athletes are required to use TeamBuilder, a mobile app where coaches and teams can log their weightlifting and conditioning workouts. The current version of the app features a homepage where the user can view their workout for the day and their workout calendar provided by either their strength or team coach. Other functionalities include a journal to log current workouts, a Maxes/PR page to keep track of an athlete’s record performances, Messaging functionality to contact coaches, and a Profile page with the athlete’s personal information.
- Visibility of system status: The current TeamBuilder app’s homepage is effective at highlighting key information to athletes such as their assigned workout for the day, and their workout calendar.
- Match between system and the real world: To athletes, terminology such as “PR” (personal record) as well as names for specific exercises (e.g. “Romanian deadlift”) would be easily understood due to their experience training and exposure to strength coaching. However, for non-athletes and members of the Macalester community, this terminology may not be easily understood.
- User control and freedom: Navigation within TeamBuilder is smooth and supports undo and redo commands to get to different pages. However, we did notice that there was a significant lag in the app at times, which created a very long delay when moving between pages. Users also do not have the ability to control their athletic status on the app (i.e. whether they are injured or not, in season or out of season), which makes some of the app’s functions such as the daily workout plan irrelevant to some users.
- Consistency and standards: TeamBuilder uses terminology consistently throughout the app, and follows common standards for navigation.
- Error prevention: When testing TeamBuilder, navigating through different pages can be laggy, which can lead some users to think that there is an error. There is no error message when this lag happens, which led us to close and reopen the app instead of waiting for the app to retrieve the page information.
- Recognition rather than recall: The current TeamBuilder features a bottom bar menu that keeps the app’s main pages visible to users at all times. Minimize the user’s memory load by making objects, actions, and options visible. The hamburger menu allows access to less commonly used pages such as the user profile and app settings. These two menu options remain static throughout all pages in the app.
- Flexibility and efficiency of use: The main homepage allows users to see their workout for the day, provided by a coach to all members of a team. This leaves little flexibility for the user to customize their workout to tailor to their needs — especially if they are injured and cannot do certain movements.
- Aesthetic and minimalist design: The overall aesthetic of the app is pleasing and would appeal to a broad audience. However, there are some design choices such as the grey text on the blue background that can make the text harder to read, especially for those with visual impairments.
- Help users recognize, diagnose, and recover from errors: There is no error message shown to users when the app lags or crashes when navigating between pages. However, when the main page initializes, the fields where information is supposed to appear have loading animations, which helps users understand that they need to wait.
- Help and documentation: When looking at the daily workouts provided to athletes, TeamBuilder has the function to show a video of the exercise, recorded by professional trainers at the Leonard Center. This provides support for users hoping to learn the proper form for an exercise.
Based on our Heuristic Evaluation, we decided to focus on improving TeamBuilder’s flexibility and efficiency of use, user control and freedom, as well as its aesthetic and minimalist design.
After completing our own evaluation of TeamBuilder, we decided to interview athletes who are required to use the app to learn more about their experiences, as well as non-athletes who had no previous experience with the app to allow us to see the user interface through completely fresh eyes.
To address student concerns we created a chart:
We decided to start off the design process by building our first prototype in Figma.
For the initial Figma prototype, we based the UI design on the original TeamBuilder app, pulling style elements such as color and general site navigation tools while adding our own. We specifically did this, as the app is very familiar to athletes and we wanted to focus on making an easy to use product. The primary features that we added to the design at this stage (pictured below) were the:
- User profile
- Athletic events calendar
- Leonard Center schedule
- Customizable workout feature with Max/PR tracking.
After this, we made the decision to create a physical prototype using paper.
We wanted to use this secondary method of modeling that would force us to observe our design from a different perspective and hoped that it would allow us to discover any flaws that we may have missed when designing in Figma.
Although physical designs often feel more restrictive than the actual graphics of Figma, these limitations allowed us to strip our design down to its bones and really think about the way each element on the screen interacts with the others.
Original Figma design Paper Prototype design
While making the paper copy, one feature we decided to add was an additional navigation tool in the form of the bottom bar pictured in the upper photo to the right.
One of the main reasons behind our choice to create a paper prototype was to use it during user testing. Specifically, we wanted to follow users as they attempted to complete a single task–editing a workout. We also wanted this prototype to be tested by consulting an expert user who has a lot of familiarity with the existing app’s use and limitations.
We used the framework of ‘Tarot Cards for Tech’ to evaluate our design prototype.
These cards served as a guiding force for us to think about dark UI, and how it applies to our own prototype. Some of these ethical issues were definitely important for us to start to think about and address before we got further into incorporating design feedback from user testing.
The Backstabber tarot card asks “What are some of the ways that users can feel betrayed by our platform?”. Since our app is supposed to be used by athletes to track their injury and health status, we recognize that this information is sensitive and should remain private. Users could potentially feel betrayed by MacBuilder if this information was shown to the broader community of users without their consent, or if it was leaked. User privacy should remain a priority for MacBuilder and we want to avoid potential privacy issues by limiting the sensitive information that we collect. We initially wanted to collect information about the specific injuries such as when they occurred and which part of the body was impacted so that the app could better provide substitutes. However, we realized that this information is highly sensitive and the app should also not be used in lieu of professional trainer consultation to make suggestions for injury prevention/management.
The other Tarot Card of Tech we considered was The Siren which asks, “What would using your product too much look like?”
- MacBuilder could be harmful if used too much if it is used as a substitute for professional health and fitness consultation. Activities that MacBuilder promotes such as weight training can be potentially dangerous and can lead to injury when lifting too much or with poor form. While MacBuilder hopes to mitigate risks of injury by providing access to tutorial videos on form, the app should not be used as the end-all-be-all of training or should fully replace the advice from professionals.
- Macbuilder could also have the potential to feed into unhealthy obsessive behaviors, especially since a core part of the intended user base is competitive athletes. The intended use is to track progress, but if the user has existing unhealthy behaviors– especially in combination with the pressures of being in a competitive environment– it can definitely lead to things like calorie counting, obsessive exercise, or body checking. The mental health of our users is extremely important to us, and we explicitly tried to avoid implementing features that would track weight or calories burned for this reason.
The user testing for the paper prototype was very beneficial for getting feature-specific feedback.
One major piece of feedback was about our added bottom navigation bar pictured below.
Many of our users felt that having both this feature and the drop-down menu at the top left corner of the screen was overstimulating and that it created more confusion than convenience. Because of this response, we decided to use our original layout from the Figma design that has only the drop-down menu.
Another point of confusion was the “Your Teams” box on the homepage pictured below.
The intended purpose of this feature was to give users the chance to customize their experience by selecting sports teams to follow. The box displays relevant information such as game scores in an easily accessible location to limit the amount of work that has to be put in by fans to track their favorite Macalester teams.
After this was explained, users responded positively, however, the wording of “Your Teams” was too vague, and they did not initially understand the function of the feature. To make this more clear, we changed the title text of the box to “Followed Teams” as pictured below.
Two features that were particularly popular during the user testing period were the calendar and scheduling features. Users appreciated having the ability to see the current training schedule in the Leonard Center and felt that it would be useful in finding times when the facility wasn’t occupied by athletic teams. They felt similarly about the Upcoming Events calendar, expressing excitement about the ability to more easily follow athletic events.
We also had the opportunity to show our paper prototype to one of Macalester’s current athletic trainers which gave us feedback from the perspective of a different type of TeamBuilder user. He was able to follow the given instructions and work through our redesigned interface. Feedback he gave us was:
- Prioritizing the ability to edit workouts to make them more personalized for individual athlete needs.
- Making a feature that could specify if a workout was assigned or optional.
- For non student athletes, giving tools to help explain workouts.
- Avoiding using bright colors (especially shades of red and green). Due to color blindness and concussions, bright colors can be hard to read.
We chose to incorporate this advice into our redesign by:
- Including a subscript at the bottom of each workout that would indicate if a workout was ‘assigned by trainer’, ‘optional’, or ‘created by you’. This allowed us to differentiate between the types of workouts and also keep the identity of the trainer private.
- Having a place for a youtube video to be added for each workout.
- Changing the green color we used in the check button to confirm the weights for a user .
After further user testing we also realized that to increased usability we should focus on using IOS design specifically we changed:
- Our arrow buttons
- Calendar to be just like the Apple Calendar App
The final version of the MacBuilder redesign used all of the aforementioned research and user input to create an interface that seamlessly integrates the needs of all students interested in sports and fitness at Macalester.
To display our product we created a demo video. This video is included at the top of this blog post.
With more time, there are several additional features that we believe would improve the MacBuilder user experience even further.
- Allowing users to schedule meetings with a Macalester Trainer
- Expanding the social capabilities of MacBuilder, such as in-app messaging with trainers
- Including links to other video enhancement such as full-length workout classes, giving students more freedom in their self-led fitness journeys and make MacBuilder even more of a central location for students looking to get active.
- Building a prototype in Swift in order to allow for even more user testing and fine-tuning of Macbuilder
- Deploying Macbuilder as an IOS prototype, allowing us to share the project with as many students as possible and see it at work as an actual piece of software rather than a set of hypothetical test-cases.
Overall, we found a lot of value in redesigning an app for our community. Our goal was to centralize the information around the Athletics Department, as well as addressing the social divide between Student-Athletes and the rest of the student body. In a small way our prototype is an attempt at joining the two groups together through software, as well as in the Macalester College Leonard Center.
