Site Plan
Site Description
Site Name
byui.allthingsnetwork.org/triathlon
Site Purpose
The Great Escape - Prison to Prison Triathlon will be used to share information about the triathlon and register users through an email based registration system.
Target Audience
- Who: All athletes who wish to compete in The Great Escape - Prison to Prison Triathlon
- Age: Most will range from 18 to 60 years of age.
- Technology: Varied. The users are many different people from many different walks of life. This will range from the old to the new, including desktop, laptop, tablet, and mobile.
- Education: Varied. Ranging from high school education up to doctorates.
- Income: Varied. These could range from ~$20k and could go up into the millions.
- Motivation: These are athletes who love to compete in Ironman style triathlons and push their limits as to how well they perform.
Personas

- Occupation: Financial Analyst
- Demographics: 33 years old, financial analyst for a large multinational bank.
- Goals: Enjoys competing in triathlons as a hobby and for his health.
- Social: Does not use social media at all.
- Technology: Uses his work laptop, but mostly uses his tablet and mobile phone for personal use.
- Quote:
Race day isn't the challenging part, it's the reward for the months of hard work while you were training.

- Occupation: Professional Triathlete
- Demographics: 29 years old professional triathlete and member of the PROTA.
- Goals: Become sponsored by a major company to continue her dream of being a professional triathlete.
- Social: Avid fan of Twitter and Facebook.
- Technology: She is almost entirely mobile. Phone and tablet are here main means of technology, aside from her desktop at home.
- Quote:
Be in the moment rather than wishing you were XYZ
Scenarios
- What day and time will the triathlon be held?
- Where will it be?
- What will the route look like?
- How much will it cost to register?
- How do I register?
- What is the purpose of this triathlon?
- What is the history behind San Quentin?
- What is the history behind Alcatraz?
Content Architecture
- What day and time will the triathlon be held?
-
- Include a short text on the homepage describing the date and time for the triathlon.
- Where will it be?
-
- Include a short text on the homepage describing the location of the triathlon.
- What will the route look like?
-
- Text explaining route and when the run, swim, and bike portions will be done.
- Google Map showing the route in its entirety.
- How much will it cost to register?
-
- Text describing the cost to register.
- Include the cost on the registration form.
- How do I register?
-
- Text on homepage regarding where to click to register.
- Link to registration page on all navigation bars.
- What is the purpose of this triathlon?
-
- Text defining the purpose of the triathlon on the homepage.
- What is the history behind San Quentin?
-
- Text on history page about the history of San Quentin.
- What is the history behind Alcatraz?
-
- Text on history page about the history of San Quentin.
Site Map

Style Guide
Color Scheme
The color scheme is based off of the colors of the bay area. It mostly reflects the bay waters as the triathlon will be centered around that. The #FFFFFF color will be used for my background. The rest will be utilized in the typography and content blocks.
Color HEX & RGB | Example |
---|---|
#1E90FF R:30 G:144 B:255 |
|
#FF7F50 R:255 G:127 B:80 |
|
#FFFFFF R:255 G:255 B:255 |
|
#868185 R:134 G:129 B:133 |
|
#323232 R:50 G:50 B:50 |
|
#000000 R:0 G:0 B:0 |
Below is the logo for the site that I will be utilizing for my brand.

Typography
Google's Montserrat will be the primary font with Arial as the backup typeface.
Text Requirements | Example |
---|---|
Default body text 16px Montserrat, Arial, sans-serif #000000 |
Default body text |
Primary Navigation 24px Montserrat, Arial, sans-serif #1E90FF |
Primary Navigation |
Heading Level 1 (H1) 36px Montserrat, Arial, sans-serif #1E90FF |
Heading Level 1 |
Heading Level 2 (H2) 28px Montserrat, Arial, sans-serif #1E90FF |
Heading Level 2 |
Heading Level 3 (H3) 22px Montserrat, Arial, sans-serif #1E90FF |
Heading Level 3 |
Heading Level 4-6 (H4-6) 18px Montserrat, Arial, sans-serif #1E90FF |
Heading Level 4-6 |
Footer text 24px Montserrat, Arial, sans-serif #FF7F50 |
Footer text |
Navigation
The navigation menu system below will be placed at the bottom of the header area, which will be above the main content. This will be restricted to roughly 800 pixels. The navigation will be identical for the entire website.

Responsive Sketches
Desktop/Laptop

Tablet - Portrait Mode

Tablet - Landscape Mode

Mobile - Portrait Mode

Mobile - Landscape Mode
