TOP SECTION

1
1.1
1.2
1.2.1
1.2.2
1.2.3
1.3

Top section of the page should display Hero Image (currently it

is the Students) in the background.
Hero Section should display the following text headings:
"Welcome Veterans "
"Not sure how to pursue your education or Career?
" We can help you get answers"
Centre of Hero Section should display the three columns.
Each individual column should contain a text on top, followed by
(specific) logo, main header and a plus icon at the bottom.

1.3.1

The user should be able to see additional texts that replaces the
content of the column as you mouse over these 3 columns
The 3 columns are as following:
1st Section (Leftmost) should display:

1.3.2

Text: 'I am not sure what I am interested in.'

Logo
"Assess your Interest" Search' as main Heading text
Plus sign at the bottom of this section should direct the
user to ' Interest Assessment page'.
2nd Section ( Middle )should display:

1.3.3

Text: 'I want to get a job. How do I find one that suits my
skill'
Logo
'Assess your Skills and Values' as the main Heading
Plus sign at the bottom of this section should direct the
user to 'Values assessment page.

3rd Section ( Rightmost) should display:

1.3.4

Text: 'I want to go to college. How do I go about choosing

the right one?'
Logo
Textual Write-up related to Veterans Benefit programs
Plus sign at the bottom of this section should direct the
user to College Planner section

Below the Hero's section, the K-12 landing page should display:

1.4

An Image (Cash). ( Refer to the diagram section)

'How much is good enough' text
Textual write-up
'Get a Reality Check' button that directs the user to the ...

1.4.1

CENTRE SECTION: Testimonials Section

1.4.2

Testimonials Section: Background (Top half of the Centre

section) should display an Image in the Background

1.4.3

Testimonials section should display a Text heading "What former

students are saying."
Testimonials section should display 3 non-demarcated individual
columns highlighted by white padding. Each individual padding
should display the following:

1.4.4

1.4.5

1.4.6

1. Photo of the student

2. Name of the student
3. Testimonial ( 6-8 lines )
Bottom half of the Center section should display 'Ask Ginny for
Help' Section (differentiated by lighter background or padding).

Smart Tools Section

Refer to Ask
Ginny for
Help section

Footer Question Section

1.4.7

2.1

REALITY CHECK (LOCATION PAGE): This section allows the

user to select his/ her city.
This page should display Reality Check Navigation section which
shows various Navigation icons that allows the user to perform
various steps leading up to the final calculation of the expenses.
This section should show the following icons:

2.1.1

Location Icon
Housing Icon
Utilities
Food
Transportation
Clothing
Healthcare
Personal expenses
Education
'Your Expense' results

2.1.2

2.1.3
2.1.4

This section displays a text title " How much is good

enough?" above the navigation icons
This section displays a Text paragraph above the
navigation icons.
text Subtitle " Choose your city " below the navigation
icons

Below the Navigation Menu, VA map section should be displayed

VA Map should display various zone (regions) that are clickable.
As the user hovers on specific zones, the map should :

2.1.5

highlight that zone

Generate a pop-up box that displays the largest city for
that region.
Allow the user to click on it so that user is able to select
it.

The map should display a check-box on the pop-up box

indicating successful selection of the city.
2.1.6
VA Map should shoe check mark post selection of the region.
2.1.7

2.1.8

Below the VA map a Navigation bar 2 ( Refer to Appendix)

should be displayed
Navigation bar should display the following:

2.1.9

2.1.10

Go Back and Front icon (< & >) on the left side of the bar.
Go Back icon: allows the user to go back to the pervious page

2.1.11
Go Forward icon: allows the user to go forward to the next page.
2.1.12

2.1.13

Fraction number which indicates the current position of the User.

Numerator should show the page where the user is currently

2.1.14
Denominator should show the total number of pages.
2.1.15
'Next' Button on the Right side that allows the user to advance
2.1.16 to the next page.
2.1.17
2.1.18
2.1.19

'Ask Ginny for Help' Section

'Smart Tools' section
'Footer' Section

Title
Toal
Icon of that tools based on the selction of the user
Item desctiption for the selection user

HOUSING
It should display a Check mark icon on the highlighted image if
the user proceeds to select that choice by clicking on it.
The user cannot click next ( Advance to next section )unless
they have selected one option

Expense Section should display following sub-sections:

Sub-Section 1: Title: Your Expenses
Sub -Section 2:
Monthly costs for the < Selected City>
Housing Icon
Text: 'Housing'
Dollar Amount for the <Selected City>
Sub -Section 3: It should display the Total Cumulative Expense.
Navigation Menu 2
Ask Ginny for Help
Footer

It should highlight ( by change of color) the Choice as the user

hovers over the image.
Navigation Menu 2
Ask Ginny for Help
Footer

proceeds to select that choice by clicking on it.

( Selct one option

image which behave like radio buttons
Button : Image with a text, clickable with excepetion ( which are
mentioned to be non-deselectable)
4 IMAGES with a short description of what the selcetion is
hover over it is hightlighed
if teh user clicks on them a check box is displayed on the icon

TRANSPORTATION
TOP SECTION
Navigation Menu
What is your food budget for the month
K12 Transportation page should display the "Choice Menu"
section which has following:

Text heading: Choose your Preferred Transport ' & '

Select Only One'

4 choices where each one contains an Image and a

matching Caption. The 4 choices are namely:
Human Power, Public Transport & Carpool, Used Car,
and Average Car & Luxury Car.

It should highlight the Selection (change of color) as the user

hovers over the image.
It should display a Check mark icon on the highlighted image if
the user
'Eating at Home' option should be highlighted by default. User
should be able to select any one of options (Forced choice).
The user should be only be able to proceed to next section if
they have selected one of the option.
Expense Section should display following sub-sections:
Sub-Section 1: Title: Your Expenses
Sub -Section 2:
Monthly costs for the < Selected Transportation >
Transportation Icon
Text: 'Transportation'
Dollar Amount for the <Selected Transportation>
Sub -Section 3: It should display the Total Cumulative Expense.
Navigation Menu 2
Ask Ginny for Help
Footer

2.1.26

2.1.27

2.1.28

No need to
mention to
all the

2.1.29

2.1.30

2.1.31

2.1.32

REALITY CHECK :
( Final Expenses will have a deduction of 2% monthly expenses in the final
tally)
2/9 ( Preseelcted electricity ad Water and Gas is basic expenses it
automatically comes preselected,
visitor can not unselect these two options as they are the essentials)
Basic Package and u cannot deselect it
CHOOSE YOUR PLAN: They can select anyone,there is no basics
Personal Expenses:

TOP SECTION
1
2.2
2.3
2.3.1
2.3.2
2.3.3
2.4

Top section of the page should display Hero Image (currently it is

the Students) in the background.
Hero Section should display the following text headings:
"Welcome Students "
"Not sure how to pursue your education or Career?"
" We can help you get answers"
Centre of Hero Section should display the three columns.

2.4.1

Each individual column should contain a text on top, followed by

(specific) logo, main header and a plus icon at the bottom.

2.4.2

The user should be able to see additional texts that replaces the
content of the column as you mouse over these 3 columns

2.4.3

The 3 columns are as following:

1st Section (Leftmost) should display:

2.4.3.1

2.4.3.2

Text: 'I am not sure what I am interested in.'

Logo
"Assess your Interest" Search' as main Heading text
Plus sign at the bottom of this section should direct the user
to
' Interest Assessment page' in the wizard.
( https://www.vawizard.org/vccs/CareerAssess.action)
2nd Section ( Middle )should display:

Text: 'I want to get a job. How do I find one that suits my skill'
Logo
'Assess your Skills and Values' as the main Heading
Plus sign at the bottom of this section should direct the user
to 'Values assessment' page in the wizard.
(https://www.vawizard.org/vccs/CareerImportance.action)

3rd Section ( Rightmost) should display:

2.4.3.3

Text: 'I want to go to college. How do I go about choosing the

right one?'
Logo
Textual Write-up related to Veterans Benefit programs
Plus sign at the bottom of this section should direct the user
to College Planner section of the wizard.
(https://www.vawizard.org/vccs/Programs.action)

Below the Hero's section, the K-12 landing page should display:

2.5

3
3.1
3.2

An Image (Cash). ( Refer to the diagram section)

'How much is good enough' text
Textual write-up
'Get a Reality Check' button that directs the user to the
students landing roll-over page.

CENTRE SECTION:
Centre section of the K-12 Landing Page should display
Testimonials Section
Testimonials Section: (Top half of the Centre section) should
display an Image in the Background
Testimonials section should display a Text heading "What former
students are saying."
Testimonials section should display 3 non-demarcated individual
columns highlighted by white padding. Each individual padding
should display the following:
1 Photo of the student
2 Name of the student
3 Testimonial ( 6-8 lines )
Bottom half of the Center section should display 'Ask Ginny for
Help' Section (differentiated by lighter background or padding).

Smart Tools Section

Refer to
Ask Ginny
for Help
section

Footer Question Section

4.1

REALITY CHECK (LOCATION PAGE): This section allows the

user to select his/ her city.
This page should display Reality Check Navigation section which
shows various Navigation icons that allows the user to perform
various steps leading up to the final calculation of the expenses.
This section should show the following icons:

Location Icon
Housing Icon
Utilities
Food
Transportation
Clothing
Healthcare
Personal expenses
Education
'Your Expense' results