The Great Escape Triathlon Logo

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

A picture of Chris Bennett
Chris Bennett
  • 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.

A picture of Carol Peletier
Carol Peletier
  • 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

  1. What day and time will the triathlon be held?
  2. Where will it be?
  3. What will the route look like?
  4. How much will it cost to register?
  5. How do I register?
  6. What is the purpose of this triathlon?
  7. What is the history behind San Quentin?
  8. 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

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.

The Great Escape - Prison to Prison Triathlon Logo

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.

Sample Navigation Panel

Responsive Sketches

Desktop/Laptop
Desktop Sketch
Tablet - Portrait Mode
Tablet Sketch - Portrait
Tablet - Landscape Mode
Tablet Sketch - Landscape
Mobile - Portrait Mode
Mobile Sketch - Portrait
Mobile - Landscape Mode
Mobile Sketch - Landscape