Alcatraz Race Website Design Documentation Version 1.0

Version Control Chart

Date	Name	Change Description	Version
12/9/2015	Jesus Arredondo	Creation	0.1
12/19/2015	Jesus Arredondo	Web version of site plan creation	1.0

Purpose of the website

The purpose of the triathlon page is to inform all visitors of the page about the triathlon that is carried out each year from San Quentin prison to Alcatraz prison in San Francisco California. This website will provide users with all the information they need to subscribe to this race, such as price, route of the race, date and time of the triathlon to motivate and encourage them to attend the event.

The website will have information about the event and the requirements to participate in it..

Target Audience

Physical Description

Age: Typically from 18 – 50 years of age, there may be people older than that
Gender: Will be a mixture of men and women.
Education: Not applicable, people from different educational backgrounds can be part of the target audience.
Economic Status: People who can pay $100 to get enrolled into the competition, but there can be also people who is just interested to know more about the triathlon
Language: English Proficiency is needed as the content of the website will be developed in English.
Geographic Location: Mainly people in the United States, but there may be some international competitors or tourist who may visit the website.

Technical Description

Mac and PC are predominant devices, but this site may be accessed through tablets and smart phones-
OS is not relevant for this site.
Browsers: Chrome, Fire Fox, Internet Explorer, for smart phones and tablets Chrome, android default browser, safari, and it might also include Opera.
Most people visiting the website is comfortable using web browser, and have experience navigating through the web.

Target Audience Statement

The target audience for creatingux.com/triathlon will be men and women of age ranging from 18 years old to 50 years old with moderate income, who want to participate on the triathlon, or who may want to presence the competition. The target audience for this website will be mainly located in the United States, the San Francisco Area and some international audience may be visiting the web page the audience is expected to be from English speaking countries, or be English speakers. This website’s content will target people with the interest to participate on the triathlon or be part of the public of the same.

Personas

Persona	Amateur Runner
Name	John Anderson
Photo
Education	Accountant
Job	Works as accountant
Demographics	Gender: Male Age: 30 years old. Marital Status: Married Location: California, US.
Goals and tasks	He wants to one day win the competition, he loves to exercise and when he is at work he likes to do really good on his job. He would like to continue to compete in this race 5 year more and would like to be a coach at a high school once he retires from accountancy.
Environment	He is married and have two boys, he loves to do some outdoor activities he loves to exercise each morning before going to work. He likes to go with his wife on the weekends to see his sons soccer games on the weekend.
Quote	“Don’t just try, do it”

Persona	Student
Name	Ashley Robinson
Photo
Education	College Student
Job	Student
Demographics	Gender: Female Age: 19 years old. Marital Status: Single Location: Atlanta, US
Goals and tasks	She is a college student perusing who loves to dance and swim her biggest dream is one day be able to complete a triathlon just like the Alcatraz triathlon. She wants to finish a degree in business and have her own restaurant one day.
Environment	She is single and lives at her parent’s house near San Francisco, she loves to dance and every morning she spends 1 hour doing exercise, she loves to cook and is very passionate about art. On the weekends she likes to go swimming and she loves to spend time with her friends at the beach.
Quote	“The time I enjoy the most is when I am in the water”

Scenarios

What is Alcatraz triathlon?
In what does this competition consists?
What is the route that it follows?
Who can participate?
How much does it cost to enroll for the triathlon?
When is the competition carried out?
What is the History behind the competition?
Why is this competition unique?
Who can I contact if I have questions?

Architecture

Content mapping with scenarios

The following section maps the scenarios with the content of the website

What is Alcatraz triathlon? This will be found on the home page with a brief explanation of what the Alcatraz prison competition is?
In what does this competition consists? There will be one page covering the swimming, running and biking stages of the competition.
What is the route that it follows? A map with the route to follow will be displayed in the main page.
Who can participate? This will included in the registration page.
How much does it cost to enroll for the triathlon? This will included in the registration page.
When is the competition carried out? This will included in the registration page, and also in the main page.
What is the History behind the competition? This will included main page of the website.
Why is this competition unique? This will included in the registration page and each of the stage pages of the competition.

Content

HOME PAGE
- Purpose of the website
- Brief description of the competition
- Stages of the competition.
- The route of the competition.
- Rules of the competition.
- Dates of the competition
RUNNING SECTION
- Brief description of this phase of the triathlon.
- Pictures showing the some people who has run this competition.
- Map of the route to follow in this stage of the competition
SWIMMING SECTION
- Brief description of this phase of the triathlon.
- Pictures showing the some people who has run this competition.
- Map of the route to follow in this stage of the competition.
BIKING PAGE
- Brief description of this phase of the triathlon.
- Pictures showing the some people who has run this competition.
- Map of the route to follow in this stage of the competition
REGISTRATION PAGE
- Rules of the competition
- Fee of the enrollment
- Form asking for Name, Address, Phone Number, Gender, and competitor’s age.
CONTACT
- A form asking the following information.
  - Name
  - Subject
  - Email
  - Email Body
  - Captcha

Site Map

Style Guide

This section will cover the styles and colors for the layout, typography and responsive layouts for creatingux.com website. This section is intended to serve as a guide on the styles to be applied during the development face of the website.

Color Scheme

Primary Colors

White

Black

Green

Gray

Primary Colors	Description
White	This is the color that is going to be used for all font color
Black	This is going to be the background for text
Green	Background color when hovering over menu elements
Gray	Background color for sub-menu in mobile version

Typography

This section describes the sizes and colors for the typography that will be used in CreatingUx.com website.

Element	Font	Weight	Style	Size	Color
Default Paragraph	Helvetica	Normal	Normal	16px	White
Heading Level 1 (h1)	Arial	Bold	Normal	32px	White
Heading Level 2 (h2)	Arial	Bold	Noraml	24px	White
Heading Level 3 (h3)	Arial	Bold	Normal	18px	White
Heading Level title 1 (h1)	Arial	Bold	Normal	32px	White
Selected Anchor	Helvetica	Normal	Normal	18px	White
Unselected Anchor	Helvetica	Normal	Normal	18px	White
Table font mobile device	Arial	Normal	Normal	14px	Black

Responsiveness

Navigation

Navigation will be place across the top of the website
When an option is selected the background of that option will change color to green and font color will be white
An unselected options will be background black with and font color white
Submenus will be background color grey and font color white

The layout show below is the layout for desktops and laptops

The navigation for tablets will look like as follows

And the navigation for smartphones will look like as follows