Process, Plan, Rationale for

Project 1
CCT360 – Intermediate Web Design
Jan Viado (1005467647)
 • I chose Sport Psychology as my content for this
project because of my interest in the subject as a
future career

Sport • The website model I have chosen is based on the

popular sports website, ESPN :
Psychology https://www.espn.com/
• I chose this website as inspiration because the
design is recognizable by many and gives a
sporty feel to it
 The plan was to pick a website that had a
simplistic look to it and something that I can replicate
through HTML and CSS. Once I picked the website, I made
sure to look through it. There was a lot of javascript

Plan & involved which was past my knowledge, however, I think

that it was still doable for me to try to make a good

Rationale website.

I used many resources, such as w3schools.com,

to help me navigate my way to creating the website. I
tried my best to make it accessible as possible as well by
using colour-blindness friendly colours and media queries.
(Home Page – espn.com)
(Inner-page – espn.com)
 • The following personas on the next slide
represent the potential users of my website:
• A coach

• A student-athlete

Personas • A coach would be an ideal user because they

would want to know more about the subject
and hopefully can educate their players too

• A student-athlete would also be an ideal user

because they might want to implement some
of the content they learn into their life
Steven Carry
“I think there should be more
support on the mental game in post-
secondary athletic programs.”
Motivations
Profile:
College Basketball Player Steven is a college athlete working towards his professional
basketball career. He often gets stressed and burnt out due to
Age: the responsibility of being a student-athlete. This overwhelming
21 mental effect sometimes translates in his basketball game which
hinders his overall performance. Recently, he discovered that
Gender: many professional athletes have sports psychologists that
Male enhance their athletic performance through different techniques
and practice. However, there are not the same emphasis on
Occupation: mental health and sports psychology for post-secondary
Student-Athlete
student-athletes.
Frustrations
Ø Stresses of being a student- Goals
athlete
Ø Learn about sport psychology
Ø Mental health effecting his
Ø Wants to know if sport psychology is necessary for him as
basketball performance
a student-athlete
Ø Not enough support and
Ø Learning about different sports psychology techniques
resources to provide sports
and practices that may enhance his mental game if
psychology to post-secondary
deciding to pursue it
athletes
Roc Divers
Profile: Motivations
College Football Coach Roc is a college football coach that has noticed how much
mental health effects his athletes over his past 10 years of
Age: experience as a coach. He has been looking for ways to help his
34 athletes with their mental game. Professional sports teams have
dedicated sports psychologists that have proven to help them
Gender: perform at their best. He believes that if he can integrate a
Male
sports psychologist to their program, his athletes will be
benefitted mentally and athletically. As a former athlete, he has
Occupation:
Coach
never had access to sports psychologist, especially because this
profession is not as popular as it is now.

Frustrations
Ø Need more education on
“The mental game is just as sports psychology and its
important as playing the game. I importance for student-
think we need more of that focus.” athletes
Ø Post-secondary athletes
should have the same
mental health resources
available like professional
athletes do
Goals
Ø Learn about the different ways sport psychology can be
beneficial to each kind of athlete
Ø Learn how sport psychology came about, where it is today,
and how it can be implemented to his current athletes
Ø Educate post-secondary athletes and coaches on sports
psychology
Information
Architecture
(Direct Wikipedia Reference)
(Edited Wikipedia Reference)
Wireframes
Homepage
Sport Psychology 09:52 AM #$ %

https://sportpsychology.ca

Banner Image
! History Categories Techniques
"
"

Wireframe
More
Wikipedia

! Sport Psychology History Categories Techniques

" Unsplash Photos

Categories

Techniques
More Subscribe
Wikipedia Subscribe to our
"
newsletter for monthly
articles and updates
Unsplash Photos
• Inspired by: https://www.espn.com Image on all things sport
psychology!
Categories Image

• The following wireframes respond to my Techniques

Email Address:

personas because there will be a lot of Subscribe

information about sport psychology that

will be clearly organized for users to
navigate through information. What is sport psychology? What is sport psychology?
Descriptive Text from Wikipedia
• My proposed IA fits well with this Descriptive Text from Wikipedia

wireframe because there are a lot of

associative navigation that can be Subscribe
represented through the organized Subscribe to our

photos with links for more information.

newsletter for
monthly articles
Image and updates on all

• The principles of usability can be applied ! Sport Psychology CCT360 Project 1 All Rights Reserved. & ' ( Email Address:

because of the simplistic and easy-to- Subscribe

! Sport Psychology

follow design of the reference website. CCT360 Project 1 All Rights Reserved.
& '(
Inner-page https://sportpsychology.ca
Sport Psychology 09:52 AM

!
#$

"
%

Wireframe
Banner Image
History Categories Techniques
"
Personality Athletic Performance Team Processes

Motivation Recovery Burnout Beyond Sports

! Sport Psychology History Categories Techniques

"
More
Personality Athletic Performance Team Processes Motivation Recovery Burnout Beyond Sports Wikipedia
Unsplash Photos
Categories

• Inspired by: More

Wikipedia
"
Subscribe
Subscribe to our
Techniques

https://www.espn.com/nba/ Unsplash Photos Image

newsletter for monthly
articles and updates
on all things sport

• There is a sub-navigation
psychology!
Categories Image
Email Address:

added to this inner page

Techniques
Subscribe

which is useful when Personality

navigating through the Descriptive text from Wikipedia
Personality
Descriptive Text from Wikipedia

associative content.
Subscribe
! Sport Psychology Image Subscribe to our
CCT360 Project 1 All Rights Reserved. & ' ( newsletter for
monthly articles
! Sport Psychology
and updates on all
Email Address:
CCT360 Project 1 All Rights Reserved.
Subscribe
& ' (
References
ESPN Internet Ventures. (n.d.). NBA - National Basketball Association teams, scores, stats, news,

standings, rumors. ESPN. Retrieved May 22, 2022, from https://www.espn.com/nba/

ESPN Internet Ventures. (n.d.). Serving sports fans. anytime. anywhere. ESPN. Retrieved May 22, 2022,

from https://www.espn.com/

Free design tool: Presentations, video, social media | CANVA. Canva. (n.d.). Retrieved June 4, 2022, from

https://www.canva.com/

Unsplash (n.d.). Retrieved June 4, 2022, from https://mani-unsplash-clone.netlify.app/