Project Overview
Helping student athletes track, record, and log their mental health in a forum-based web app.
For our Web App Development class’s main project, we had to collaborate with each other to create one innovative solution to a person’s needs in the form of a web application.
My group, including myself, decided to create a web app that is designed for student athletes, as we are all athletes ourselves and understand the struggles of balancing student and athlete commitments.
I was primarily responsible for the user research, as well as the UI/UX design of the product. At times, the team would also come to me for frontend development assistance when needed.
Project Type: Class Project, Mobile & Web
Timeline: Aug 2023 - Dec 2023
Role: User Researcher, UX Designer, Frontend Developer
Tools: Figma, HTML, CSS, JavaScript
Problem
Solution
Athletes often struggle with mental health because they do not have a platform or the resources to share how they feel and confide in others. As a result, academic and/or athletic performance can decrease.
Create a discussion-based social media platform that allows student athletes and professionals to connect with one another, discuss together, and find communities based on certain demographics. Specific features include discussion forums sorted by topics/categories, a daily featured post/topic, and a mood chart to track personal mental health progress.
Understanding Users
In the process of creating an effective Athlete Health Tracker web app, I conducted a series of in-depth interviews with three student athletes from different sports backgrounds. These interviews allowed me to gain a deeper understanding of their unique lifestyles and the challenges they face in managing their mental health. By listening to their experiences and pain points, I was able to identify key areas where the web app could make a significant impact. These insights guided our design decisions, ensuring that the Athlete Health Tracker addresses the specific needs of student athletes in a meaningful way.
To create a user-centered web app for student athletes' mental health, I engaged in meaningful conversations with three student athletes. These interviews provided valuable insights into the daily lives of student athletes, revealing the stressors and challenges they encounter. Through these conversations, I learned about their pain points and the support they seek. This user research was instrumental in shaping the features and functionality of the Athlete Health Tracker, ensuring that it caters to the real needs of its target audience.
Understanding the student athlete lifestyle and their mental health concerns was a critical step in the development of the Athlete Health Tracker web app. I conducted interviews with three student athletes to gain insights into their unique experiences and the hurdles they face. By listening to their stories and concerns, I was able to identify the most pressing pain points and areas where a digital solution could make a difference. These interviews served as a foundation for designing a user-friendly and effective platform that addresses the mental health needs of student athletes.
Interview Questions
Below are some of the questions that I asked during my user interviews.
Key Pain Points:
Here are the 3 pain points that I found when I interviewed student athletes regarding their day to day student athlete lives and what problems they have regarding athletics and academics.
“Suck it Up” Mentality
We found that most student athletes these days tend to have a “suck it up” mentality, where they focus on persevering through their activities and choosing to ignore improving mental health. Most student athletes claimed that this is due to the fact that they feel that they have willingly “signed up” for this responsibility.
Lack of Empathy
Only people on their respective teams truly “know” the niche struggles that student-athletes go through specifically. Students that play the same sport or division may have a higher level of empathy, but it is still not the same as talking with teammates. However, even talking with teammates can sometimes not feel like enough.
Overwhelmed/Stressed
All of the student athletes we interviewed claimed that they feel overwhelmed and/or stressed due to the pressure of having to balance both academics and athletics in college.
Insights from Interviews:
What do these users want from a product like Athlete Health Tracker?
Have discussion features on Athlete Health Tracker
Be able to find communities by toggling certain characteristics or using keyword searches
Be able to save favorite discussions for future visits
User Personas:
After talking to the users during interviews, we gained a better insights into Athlete Health Tracker app's users. Therefore, we created two personas to serve as representations of our target audience.
On the left, we have Royce, who is a Division 1 golfer for a school in New York. On the right is June, a Division 3 basketball player for a school in Maryland.
How Might We
Develop an interactive social media platform tailored for student athletes designed to improve their mental, academic, and athletic performance?
Visualizing Concepts
I sketched out my vision for the app, including the micro-interactions that allow users to efficiently keep visual track of their mental health while browsing for communities and posts, in a low-fidelity mockup. I used a “mobile-first” approach to prioritize the most crucial elements of the app. This results in a more focused and user-friendly experience, which can then be expanded upon for larger screens, which I created a wireframe for on the right.
After creating this mockup, it was time for me and my groupmates to develop a front-end web application based on the wireframes.
Reflections and Growth
As I draw the curtains on this project - a web application designed for student athletes to monitor their mental health - I pause to reflect on my journey and the valuable lessons learned. This project was not just about learning how to code web apps or creating aesthetics; it was about empathy, understanding, and growth.
Balancing Functionality with Empathy: One of my key takeaways is the importance of empathetic design. Working closely with student athletes, I realized that mental health tracking isn't just about data; it's about understanding and responding to emotional needs. This insight shaped every aspect of my design, ensuring that the application was not only functional but also emotionally resonant.
The Interplay of UX and Front-End Development: Wearing dual hats as a UX designer and a front-end developer, I learned to harmoniously blend user experience with technical execution. The challenge was to create an interface that was not only visually appealing but also intuitive and responsive to the unique needs of student athletes.
Learning from Feedback: Engaging with users and stakeholders was eye-opening. It taught me that design is a dialogue, not a monologue. I learned to listen, adapt, and iterate based on the feedback, ensuring the final product truly aligned with the users' goals.
Bridging the Gap Between Mockup and Reality: A pivotal aspect of this project was the realization that bringing a mockup to life in a functional front-end application is often more challenging than anticipated. The journey from a static design to a dynamic, interactive web application involved unforeseen complexities. I encountered hurdles in ensuring that every element of the mockup was accurately and effectively translated into the web environment. This required not only technical skills but also a deep understanding of how design choices impact user interaction and experience.
Valuable Lessons for Future UX Design: This experience has been instrumental in shaping my approach as a UX designer. It highlighted the significance of realistic and practical design considerations from the outset. Understanding the nuances of front-end development has equipped me with the ability to create more feasible and implementation-friendly designs. This knowledge bridges the often encountered gap between design and development, allowing for a more integrated and cohesive creation process. In future projects, I'll carry forward this awareness, ensuring that my designs are not only aesthetically pleasing but also technically viable and aligned with development capabilities.
A Stepping Stone for Professional Growth: Overcoming these challenges has been a robust learning curve, teaching me the importance of flexibility and problem-solving in design. It has honed my skills in adapting designs based on technical constraints and user feedback, making me a more versatile and empathetic UX designer. This experience has been a testament to the dynamic nature of web development and design, where adaptability and continuous learning are key to success.
In conclusion, this project was a remarkable journey in understanding the depth and breadth of UX/UI design. It was more than just a class assignment; it was a real-world application that had the potential to impact lives. I am grateful for this opportunity and excited to carry these learnings forward in my future endeavors.
Thank You for Being a Part of This Journey!