Capstone Case Study: Athletic Mental Health

Jaelynn Snyder
9 min readApr 18, 2024

--

Spring 2024

A review of the Athletic Mental Health website creation journey from ideation to the final product.

Solo Project: I am the master mind behind the research, designs and development.

The Official Logo

Project Overview:

The Athletic Mental Health Wordpress website is an interactive site created to change the athletic community by enhancing the importance of making mental health a number one priority. Users are provided with multiple resources, support and engaging information that will build a strong foundation for their mental health journey. Athletic Mental Health allows users to view inspirational videos, mental health articles, daily journals, and even discuss different topics between each other.

Problem:

The problem that I have addressed is the mental health epidemic among college athletes. According to the University of Michigan School of Public Health, studies show that only 10% of athletes actually speak up about their well being. On top of that, individuals stated that they felt alone because of the lack of resources provided. Overall, another study shows that 43% of undergraduate student-athletes at a single university experience symptoms of poor mental health during their athletic career. Resources today do not provide specific guidance for college student-athletes. Instead resources are mainly for the general public. The resourceful websites also only provide long articles, which force the user to skim through the website.

Solution:

As a solution I have developed the Athletic Mental Health interactive website to assist with mental health awareness for college students-athletes and even non-athletes. The website builds a strong foundation that allows the user to feel like they’re in a safe environment to express themselves and receive a full understanding of mental health and how to fight against it. Along with giving the users the opportunity to learn how to balance mental health and their sport through videos, journals, articles and discussions to keep them engaged.

Phases Of The Solution-

  • The Beginning:

I began this journey with the color palette and logo along with developing a design system that will assist in assuring the website remains consistent and well organized. The first colors that were chosen was Red and White. I chose these colors because it was uncommon amongst my competitors. The first ever logo was a brain with athletic arms and a heartbeat through the middle as shown below along with the website.

Athletic Mental Health Original Design (Left) Original Website color (Right)

These designs came from the idea of the website being designed strictly for athletes. The Red represents passion and the logo represents how strong mental health can be. For this version of the website I have created a testing prototype through Figma using wireframes in order of my users to test out some of the key features. The prototype was built to be the demo of Athletic Mental Health, which means the users would test out some of the key features that are provided. The landing page image depicts the athletic knocking mental health out of the park. (Shown below)

Old Landing Page Image

In the beginning, I pictured Athletic Mental Health being an organization that individuals can join within their community. Therefore, the website included an events page that host different mental health events users can attend. Along with a donation and support group section. There was also a mentor page for the users to find and connect with a mentor that would best fit their needs.

The Events Page (Old Athletic Mental Health) | Support Groups (Middle) | Donation Page (Right)

The events section was created to bring the community together to have serious conversations about mental health which will build an extra path for individuals to reach out for help. The support group was created as a discussion section, however, this discussion section hosted different groups for the user to join such, Journalism Majors and Photography. Whichever group the user is most interested in, they will be able to connect with others that seek the same interest. These functions would be a great tool to encourage users to speak up and talk with on another, along with networking with people who can relate to them.

Checkout the first Athletic Mental Health Prototype! :

https://www.figma.com/proto/txazmvSQa9imFriuEjyyXj/One-Project-(Capstone-Preview)?node-id=18-41&mode=design&t=1wPScjPrpZ8zeD53-1

  • The Middle:

After using the wireframes for the key feature user testing, I was able to make a few changes that will ultimately change the whole brand of Athletic Mental Health. The first change was the landing page. Instead of the baseball player hitting the brain, I moved the brain to the center with connecting lines to the athletes. This gives off a more positive vibe for the user in which I believe was more welcoming. Then I went in to change the color to purple, blue and grey. I made the color change because when landing on the page I wanted the user to feel calm and not alarmed. The new Athletic Mental Health logo was also created with a simple arm muscle and the words AMH with Athletic Mental Health underneath and the purple highlighting the M and the word Mental using Photoshop and being vectorized through Figma. There was also a word logo developed that revealed the slogan: “Let’s Win Together!”.

New Logo (Left) | Word Logo (Right)
New Landing Page | New Image

Within the new version of Athletic Mental Health, I have kept two of the menu sections from the old version which was the About and Resources/Tips. Therefore, I took away majority of the content from the old version and revised it to make it more relatable to the user and reach outside of my target audience. I changed Mentors to Ambassadors, Support Group to Discussion board, and added a new menu called Daily Challenges, where individuals can learn how to enhance their mental health during their everyday life. Along with addeding another menu section called “Mental Health 411”. This section provides general information that everyone needs to know about mental health. The subpages for this section is Mental Health Stats, Professional Advocates and Mental Guidance.

Mental Health 411 Section (Left) | Mental Health Stats (Right)

To keep the website entertaining I have provided different interactions through each section. The Mental Health 411 section provides a video and graphics to view. Mental Health Stats include drop down quick facts about the affect of mental health through athletes. Mental Health Advocates provide short articles and Mental Guidance also provides videos based on what button you press.

Professional Advocates (Left) | Mental Guidance Section (Right)
  • Heavy User Testing For The Finishing Project:

This new version of Athletic Mental Health went through heavy user testing. For this testing, I have reached out to my target audience (College Athletes), along with non-athletes between the ages of 18 and 25+, resulting in eight participants in total. Even though four out of the eight participants were not athletes, they still participated in an extracurricular activity. There involvement in user testing allowed me to adjust the website to make it suitable for the general public.

Participation Market

This time the users had full control of the website because it was officially developed. During the beginning of each user testing I asked each individual to give me their full thought of the websites new aesthetics and then went into a list of task for them to complete to see how easy it is to navigate through the site. As a result, 71.4% of the users found the website user-friendly and resourceful, while 87.5% of the users agree that the content provided on the site was motivating. Along with the statistics I was also able to note down everyone’s reaction to Athletic Mental Health and collect different opinions. The results from each test has allowed me to make further adjustments in order to create a successful Mental Health website.

Results of the observations and user opinions from the Heavy User Testing and its solutions

The Final Results:

After the heavy user testing there was not much to change, therefore, using the results I was able to make a few adjustments to the website that would make the user experience more smoothly. Beginning with the Daily Challenges which I immediately changed to Daily Inspirations since it was difficult for my testers to find this section during the task segment. This portion was also located as a subpage under the About section, therefore I made it a section of its own.

Views from Daily Inspirations (Formerly known as Daily Challenges)

Users who use this section will be able to change their life for the better by taking time out the day to focus on their mental health as mentioned earlier. Society in general is always hard on themselves therefore this section can be used to remind everyone that it is okay to take time for yourself and others around you.

A last minute add on was the “Help A Friend” menu option, this section is inspired by individuals who may know someone who is struggling with mental health and want to know how they can handle that person as a friend. This can also solve the problem of individuals being afraid to speak up about their mental health.

Image of Help A Friend Section

I also had the opportunity to create a trailer and a poster dedicated to Athletic Mental Health. Please View Each Deliverable:

Athletic Mental Health Website

Athletic Mental Health Trailer

Athletic Mental Health Poster

Results:

By the end of this crazy journey I am proud to say that I have developed a strong Mental Health website that can compete with others. I have also learned multiple lessons such as, deeply researching your competitors and taking time to learn your target audience so that the blueprint and testing portion runs smoothly to avoid having to any major changes during the final progress. In the future, I hope to be able to make Athletic Mental Health a well known website that can help college student athletes express themselves mentally. Along with collaborating with college sports conferences, such as NIAIA (National Association of Intercollegiate Athletics) and NCAA (National Collegiate Athletics Association). With suicide rates increasing rapidly and becoming the second leading cause of death within the college community due to mental health, I encourage anyone who has or know an athlete in their life to show them the Athletic Mental Health website. So we can win the fight against mental health together with resources, tips and support.

--

--