0: Registration/Profile

MOBILE

5.8.19 the navigation button vs arrows

is dependent on DEV conversation with GSUSA

Sign In Page

Create an Account

Need to finish profile modal

Registration pages to congrats page

Profile creation pages to congrats page

 GSUSA
Platform: Mobile
Signin/Landing view
—————————————

Your email Notes

1
These annotations are for indicating
interactions.
Password For all styling, color, font and layout specifications see
design comps
2
I forgot my password 3
1 Email:
4 Keep me signed in user will enter email.
When user click/tap signin email will be validated to see
5 if record already exist in DB.
Sign In
DEV has details.

Register for6a Gold Award Account Authorable:

text above input field can be edited

2 Password
User enters password.
click/tap eye icon to show password.

Authorable:
text above input field can be edited

3 Forgot Password
user click/tap to reset their password

Authorable:
The text of the link is authorable.

4 Signed in
User click/tap to select to keep them signin.
User stays signed in until they log out.

Authorable:
The text “keep me sign in” is authorable

5 Sign in (Primary Button):

user click/tap sign in button to validate information and
enter the site.

Inline errors are displayed if email and/or password are

incorrect

6 register (secondary button)

User is directed to register if they do not already have an
account. .

Note: Call to Action (CTA)

all sides minimums
- padding 16px
- margins 12px
The text is display in a single line no wrapping.
The button expands width to accomondate
length of text.

Authorable buttons :
The text can be customized by authors.
Authors will need guidelines on naming buttons
 GSUSA
Platform: Mobile
Create Accout
2
—————————————
Go Gold: Getting Started
Do you have what it takes to begin earning
your Gold Award?
3

1
Notes
These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
design comps

6
1 background Image:
4 Will follow same formatting and rules as other images on
introduction views. See design comps for styling.
Create Account

Authorable:
1/3 Image is authorable

5 Return to Sign In title

2
Follow same title style

3 text:
Follow same style as body text
GO GOLD 2.0 SITE FOOTER
CONTENT TBD Authorable:
title and text are editable

create Account (Primary)

4
user click/tap to go to create account process

Authorable:
button text is authorable

return to Signed in (secondary(

5
User click/tap to select to return to sign in view

Authorable:
button text is authorable

Note: Call to Action (CTA)

all sides minimums
- padding 16px
- margins 12px
The text is display in a single line no wrapping.
The button expands width to accomondate
length of text.

Authorable buttons :
The text can be customized by authors.
Authors will need guidelines on naming buttons

6 Peekable card
For this view only using peekable content to
indicate to user that there is other information
to swipe to reveal.
 GSUSA
6 Platform: Mobile
Incomplete Profile modal
—————————————
2 Hey! You’re not
finished with your
profile!
Lorem ipsum dolor sit amet,
Notes
3 1
consectetur adipiscing elit.
These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
4 design comps

1 Complete Profile
If user exits registration before completing profile they
Complete Your Profile 5 are provided this modal until they complete thier profile

2 title
Follow same title style

3 text:
Follow same style as body text

Authorable:
title and text are editable

4 Icon
GSUSA to provide icon for view

Complete Profile (Primary)

5
user click/tap to go to where they left off in completing
their profile

Authorable:
button text is authorable

6 X icon
User click/tap X in upper right hand corner to close
modal

Note:
All modals are vertically and horizontally centered
 GSUSA
Platform: Mobile
Registration/Profile Page 1
—————————————
GET REGISTERED

Your Gold Award Profile

Notes
1 These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
design comps
Your profile photo
Authorable:
(Tap to edit)
file size & spec All labels for input fields are aurthorable
Your email
1 Profile Photo
this@that.com 2 Placeholder graphic until girl uploads image.
User click/tap to access device options.
Choose either upload from gallery or take a photo
Image is cropped to fit into circle mask.
Confirm your email
DEV has specification on image size limits
3
Authorable:
text lables above input field can be edited
Choose password

4 2 Email
User enters email valida that meets email formatting
Password must contain at least one number, requirements.
be at least 8 characters long and is case-
sensitive.
Authorable:
Create Account 5 text lable above input field can be edited

3 Confrim Email
Already have an account? Sign in. 6 user enter email validate that it matches previous entry

Authorable:
text label above input field can be edited
GO GOLD 2.0 SITE FOOTER
CONTENT TBD
4 Password
User enters password
User clicks eye to see password

Authorable:
text above input field can be edited
Information text below password is authorable

5 Create Account (Primary Button):

Button is disabled until all require information in entered
and valid

Inline errors are displayed if email and/or password are

incorrect

Note: Call to Action (CTA)

all sides minimums
- padding 16px
- margins 12px
The text is display in a single line no wrapping.
The button expands width to accomondate
length of text.

Authorable buttons :
The text can be customized by authors.
Authors will need guidelines on naming buttons

Sign In
6
User click/tap sign in link to go to sign in page if already
has an account. .
 GSUSA
Platform: Mobile
Registration/Error example
—————————————

GET REGISTERED

Your Gold Award Profile Notes

These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
design comps

1 Inline Error Example

Your profile photo User enters incorrect data
(Tap to edit) Message appears belowi input box.
file size & spec
the Box and text are red
Your email
DEV Requirements have gathered all error messages
this@that.com 1
You already have an account. Please sign in.

Confirm your email

Choose password

Password must contain at least one number,

be at least 8 characters long and is case-
sensitive.

Create Account

Already have an account? Sign in.

GO GOLD 2.0 SITE FOOTER

CONTENT TBD
 GSUSA
Platform: Mobile
Congratulations modal
—————————————

Congratulations! You’ve
2
lorem ipsum dolor sit.
Lorem ipsum dolor sit amet,
1 Notes
3 consectetur adipiscing elit.
These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
design comps
4

Complete Your Profile
Congratulations
1
All congratulation views are pages.
5
Page that markes the completion of registration
and directs user to complete profile.

title
2
Follow same title style
GO GOLD 2.0 SITE FOOTER
CONTENT TBD
3 text:
Follow same style as body text

Authorable:
title and text are editable

Icon
4
GSUSA to provide icon for view

Complete Profile (Primary)

5 user click/tap to go to complete their profile information

Authorable:
button text is authorable
 GSUSA
Platform: Mobile
Profile/ page 1
—————————————
COMPLETE YOUR PROFILE

Your Name and Address

First name
Notes
1
These annotations are for indicating
This is a placeholder for an error message. interactions.
For all styling, color, font and layout specifications see
Last name
design comps

Authorable:
All labels for input fields are aurthorable
Country
2 Input fields
1
User enters information in fields.
All fields are required.
Street address First name: example inline error message

Country:
2 Autocomplete for country.
City If country is not USA then update form with international
fields

GSUSA to provide country list

3
State Zip
City/State/Zip
Virginia 3 User enter text in field.
Autorcomplete each field as user enters.

5 GSUSA to provide state/city/zip code lists.

Back Next 4 If GSUSA database doesn’t have this information then
these are open text fields.

Next (Primary)
4 Button disabled until all information is input without
GO GOLD 2.0 SITE FOOTER
CONTENT TBD errors.

Authorable:
button text is authorable

Back (secondary)
5 User click/tap to return to previous view/step.
 GSUSA
Platform: Mobile
Profile/ country Picker
—————————————
COMPLETE YOUR PROFILE

Your Name and Address

First name
Notes
These annotations are for indicating
This is a placeholder for an error message. interactions.
For all styling, color, font and layout specifications see
Last name
design comps

Authorable:
All labels for input fields are aurthorable
Country

Unite 1 Country:
1 Autocomplete for country.
United States If country is not USA then update form with international
Street address fields
Another United Country
Lorem Ipsum United
GSUSA to provide country list
Dolor United
CIty City/State/Zip
2
User enter text in field.
Autorcomplete each field as user enters.
2
State Zip GSUSA to provide state/city/zip code lists.
If GSUSA database doesn’t have this information then
Virginia these are open text fields.

4 3 Next (Primary)
Back Next 3
Example of enabled Button is when all information is
input without errors.

Authorable:
button text is authorable
GO GOLD 2.0 SITE FOOTER
CONTENT TBD
4 Back (secondary)
User click/tap to return to previous view/step.
 GSUSA
Platform: Mobile
Profile/ Foreign Country
—————————————
COMPLETE YOUR PROFILE

Your Name and Address

First name
Notes
These annotations are for indicating
This is a placeholder for an error message. interactions.
For all styling, color, font and layout specifications see
Last name
design comps

Authorable:
All labels for input fields are aurthorable
Country

Great Britain 1 1 Country:

Autocomplete for country.
If country is not USA then update form with international
Street address fields

GSUSA to provide country list

City City
2
Open text field.
2
No autocomplete unless GSUSA has list of all countries
and cites.
3 4
Province/County Postal code
Province.county
Lorem Ipsum 3
State label changed
Open text field

4 Postal Code
Back Next
Zip code label changed.

Note:
All fields except for country are open text and entry
fields unless GSUSA has listing of all countries and
GO GOLD 2.0 SITE FOOTER cities, counties and postal codes.
CONTENT TBD
 GSUSA
Platform: Mobile
Profile/ Account details
—————————————
COMPLETE YOUR PROFILE

Your Account Details

Phone
Notes
( ) ______ - __________ 1 These annotations are for indicating
International Phone
interactions.
For all styling, color, font and layout specifications see
Birth date design comps

/ / 2 Authorable:
mm/dd/yyyy All labels for input fields are aurthorable
You must be at least 13 years old to register
for Gold Award Phone:
1
School Masking for phone format with area code.

3 International Phone:
User click/taps link for international phone.
Form field updated with masking for country code
Grade
and open text field to enter number.
12 4 International Phone

Graduation date

/ / 5 Country code can be dropdown if GSUSA has list of all

country codes otherwise are open text fields.
mm/yyyy
Birth date
2
Use DEV provided calendar for user to input birthdate.
Back Next
User click/tap to open up calendar
Form field masked with slashes to separate date
information

3 School
GO GOLD 2.0 SITE FOOTER Open entry text field
CONTENT TBD

4 Grade
Dropdown from range from grades
9 - 12

5 Gradation Date
Use DEV provided calendar for user to input birthdate.
User click/tap to open up calendar
Form field masked with slashes to separate date
information
Only Month and year for graduation

Calendar will need to update to only offer month and

year for this useage.
 GSUSA
Platform: Mobile
Profile/ Calendar
—————————————
COMPLETE YOUR PROFILE

Your Account Details

Phone
Notes
( ) ______ - __________ These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
Birth date
design comps
/ / 2 3
1 Calendar:
mm/dd/yyyy
Opens in a modal
You must be at least 13 years old to register
for Gold Award shaded background and vertically centered.
1 Width goes edge to edge of the sceen.
School

Use DEV provided calendar for user to input dates

2 Date
Grade Make sure to remove comma betwee month and year in
calendar view.
12

User selects date information in calendar and it is

Graduation date displayed in the maksed field

/ Note:
mm/yyyy Gradation Date
Only Month and year for graduation date should be
shown in calendar options.
Back Next
The date view needs to be removed.

DEV: Calendar will need to update to only offer month

and year for this useage.

GO GOLD 2.0 SITE FOOTER 3 X icon

CONTENT TBD
X in upper right hand corner closes calendar and returns
to view.
 GSUSA
Platform: Mobile
Profile/ Council
—————————————
COMPLETE YOUR PROFILE

Council Information

Council name
Notes
Commonwealth of Virginia These annotations are for indicating
1 interactions.
For all styling, color, font and layout specifications see
design comps

Authorable:
All labels for input fields are aurthorable
Troop Volunteer/Leader 1 Council Name:
Information If girl has existing record then autopopulate with
Troop / IRM number council name and logo in database.
2
If girl is new user, then autocomplete as she enters
council name.
Name of troop volunteer/leader Display logo of council she entered.

3 Use DEV provided calendar for user to input dates

Volunteer’s email 2 Troop information

Troop/IRM number
4 Autocomplete as user enters if GSUSA has information
in database.
Volunteer's Phone Check with GSUSA if this information is provided in DB
then open text field.
( ) ______ - __________ 5
3 Name
Open entry field

Back Next Email

4
Open entry field validate email format

5 Phone:
Masked for phone number.
GO GOLD 2.0 SITE FOOTER
CONTENT TBD
 GSUSA
Platform: Mobile
Profile/ Journey
—————————————
COMPLETE YOUR PROFILE

Journeys and Awards

Notes
Girl Scout Silver Award
Completion date These annotations are for indicating
1
interactions.
// For all styling, color, font and layout specifications see
mm/yyyy design comps

1 Completion date Date

Council where you earned your Silver 2
Award Use DEV provided calendar for user to input birthdate.
User click/tap to open up calendar
Form field masked with slashes to separate date
information
Only Month and year for graduation
Girl Scout Journey
Calendar will need to update to only offer month and
Journey 3 year for this useage.

2 Council
Autocomplete as she enters council name.
GSUSA to provide list of councils to DEV
Completion date

/ 1 3 Journey
Dropdown menu for user select from.
mm/yyyy User unlikely to know formal name and need dropdown
to easily find correct journey.
4
Troop / Group volunteer's name
4 Troop/Group Name
Open entry field for volunteers name

Register
5
Back Register 5 Button disabled until all information across all views are
complete and free from errots.

GO GOLD 2.0 SITE FOOTER

CONTENT TBD
 GSUSA
Platform: Mobile
Profile / complete
—————————————
Congratulations! Notes
You’ve completed
1 These annotations are for indicating
your profile
interactions.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
For all styling, color, font and layout
specifications see design comps

1 congrats page:
- Once the girl reaches this page in a step,
the step should be marked as Complete
on the Dashboard.

She should not be able to go back to the

Go To Dashboard 2 previous page.

Authorable:
Title
descriptive text
icon selected from icon sprite
GSUSA to provide icons to replace FPO

Dashboard button (Primary button):

2
She can use the Dashboard button to
navigate away from this page to
dashboard

Authorable:
Button/CTA: The text can be customized
by authors.
Authors will need guidelines on naming
buttons
author set desintation action for button
page or modal
0: Registration/Profile
DESKTOP

5.8.19 the navigation button vs arrows

is dependent on DEV conversation with GSUSA

Sign In Page

Create an Account

Need to finish profile modal

Registration pages to congrats page

Profile creation pages to congrats page

 Your email GSUSA
Platform: Desktop
1
Signin/Landing view
—————————————
7 Password

I forgot my password 3
Notes
These annotations are for indicating
Keep me signed in 4
interactions.
For all styling, color, font and layout specifications see
Sign In 5 design comps

Create a Gold Award Account
1 Email:
6
user will enter email.
When user click/tap signin email will be validated to see
if record already exist in DB.
DEV has details.

Authorable:
text above input field can be edited

2 Password
User enters password.
click/tap eye icon to show password.

Authorable:
text above input field can be edited

3 Forgot Password
user click/tap to reset their password

Authorable:
The text of the link is authorable.

4 Signed in
User click/tap to select to keep them signin.
User stays signed in until they log out.

Authorable:
The text “keep me sign in” is authorable

5 Sign in (Primary Button):

user click/tap sign in button to validate information and
enter the site.

Inline errors are displayed if email and/or password are

incorrect

6 register (secondary button)

User is directed to register if they do not already have an
account. .

Note: Call to Action (CTA)

all sides minimums
- padding 16px
- margins 12px
The text is display in a single line no wrapping.
The button expands width to accomondate
length of text.

Authorable buttons :
The text can be customized by authors.
Authors will need guidelines on naming buttons.

7 background image
background image behind GoGold Logo

Authorable
background image following stylings in design comps
 GSUSA
Platform: Desktop
Create Accout
GO GOLD: GETTING STARTED 2 —————————————
3
Do you have what it takes to begin earning your Gold Award?
Notes
1
These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
design comps

1 background Image:
Will follow same formatting and rules as other images on
introduction views. See design comps for styling.
Creat Account 4 Creat Account Create Account
-

title
Return to Sign In 5 Follow same title style
2

text:
3 Follow same style as body text

Authorable:
title and text are editable

create Account (Primary)

4 user click/tap to go to create account process

Authorable:
button text is authorable

return to Signed in (secondary(

5 User click/tap to select to return to sign in view

Authorable:
button text is authorable

Note: Call to Action (CTA)

all sides minimums
- padding 16px
- margins 12px
The text is display in a single line no wrapping.
The button expands width to accomondate
length of text.

Authorable buttons :
The text can be customized by authors.
Authors will need guidelines on naming buttons
 GSUSA
Platform: Desktop
Incomplete Profile modal
—————————————
PROFILE ADDRESS DETAILS COUNCIL JOURNEY

GET REGISTERED Notes

Journeys and Awards
These annotations are for indicating
6 interactions.
For all styling, color, font and layout specifications see
design comps
2 Hey! You’re not finished
Completion Date
with your profile. 1 Complete Profile
If user exits registration before completing profile they
Lorem ipsum dolor sit amet, consectetur adipiscing elit. are provided this modal until they complete thier profile
3
Aliquam accumsan dolor vel egestas feugiat.
mm/yyyy 2 title
1 Follow same title style

3 text:
4
Follow same style as body text

Authorable:
Journey Name title and text are editable

5 Comlpete Your Profile 4 Icon

GSUSA to provide icon for view
Completion Date
Complete Profile (Primary)
Month Year
user click/tap to go to where they left off in completing
00 0000 their profile
5
Authorable:
Troop / Group Volunteeer’s Name
button text is authorable

X icon
5
User click/tap X in upper right hand corner to close
modal
BACK register
Note:
All modals are vertically and horizontally centered
 GSUSA
Platform: Desktop
Registration/Profile Page 1
—————————————
PROFILE ADDRESS DETAILS COUNCIL JOURNEY

GET REGISTERED
Notes
Your Gold Award Profile
These annotations are for indicating
Your email interactions.
For all styling, color, font and layout specifications see
this@that.com 2 design comps
1
Authorable:
Confirm your email All labels for input fields are aurthorable
3
1 Profile Photo
Placeholder graphic until girl uploads image.
Password User click/tap to access device options.
Choose either upload from gallery or take a photo
4
Image is cropped to fit into circle mask.
Password must contain at least one number, be at least 8 characters DEV has specification on image size limits
long and is case-sensitive.
Your profile photo
(Click to edit) Authorable:
File size req: XXX mb
Button is text lable above input field can be edited
5 Create a Account unavailable
until all
required 2 Email
Already have an account? Sign in. information User enters email valida that meets email formatting
is completed requirements.
6
Authorable:
text lable above input field can be edited

3 Confrim Email
user enter email validate that it matches previous entry

Authorable:
text lable above input field can be edited

4 Password
User enters password
User clicks eye to see password

Authorable:
text lable above input field can be edited
Information text below password is authorable

5 Create Account (Primary Button):

Button is disabled until all require information in entered
and valid

Inline errors are displayed if email and/or password are

incorrect

Note: Call to Action (CTA)

all sides minimums
- padding 16px
- margins 12px
The text is display in a single line no wrapping.
The button expands width to accomondate
length of text.

Authorable buttons :
The text can be customized by authors.
Authors will need guidelines on naming buttons

6 Sign In
User click/tap sign in link to go to sign in page if already
has an account.
 GSUSA
Platform: Desktop
Registration/Error example
—————————————
PROFILE ADDRESS DETAILS COUNCIL JOURNEY

GET REGISTERED Notes

Your Gold Award Profile
These annotations are for indicating
interactions.
Your email For all styling, color, font and layout specifications see
design comps
this@that.com 1
You already have an account. Please sign in.
1 Inline Error Example
Confirm your email User enters incorrect data
Message appears belowi input box.
the Box and text are red
Password
DEV Requirements have gathered all error messages

Password must contain at least one number, be at least 8 characters

long and is case-sensitive.
Your profile photo
(Click to edit)
File size req: XXX mb
Create a Account

Already have an account? Sign in.

 GSUSA
Platform: Desktop
Congratulations modal
—————————————

2
Congratulations! Lorem Ipsum! Notes
These annotations are for indicating
interactions.
3 Lorem ipsum dolor sit amet, consectetur For all styling, color, font and layout specifications see
1 design comps
adipiscing elit.
Congratulations
1
All congratulation views are pages.

Page that markes the completion of registration

and directs user to complete profile.
4
2 title
Follow same title style

3 text:
Follow same style as body text

Authorable:
Complete Your Profile 5 title and text are editable

4 Icon
GSUSA to provide icon for view

5 Complete Profile (Primary)

user click/tap to go to complete their profile information

Authorable:
button text is authorable
 GSUSA
Platform: Desktop
Profile/ page 1
—————————————
PROFILE ADDRESS DETAILS COUNCIL JOURNEY

GET REGISTERED

Your Name And Address Notes

These annotations are for indicating
interactions.
First Name 1
For all styling, color, font and layout specifications see
design comps
Please enter your first name.
Authorable:
Last Name All labels for input fields are aurthorable

1 Input fields
User enters information in fields.
Country All fields are required.
First name: example inline error message
2 United States

2 Country:
Street Address Autocomplete for country.
If country is not USA then update form with international
fields

GSUSA to provide country list to DEV

Street Address 2 (optional)

City/State/Zip
3
3 User enter text in field.
DEV to Autorcomplete each field as user enters.
CIty
confirm’with
GSUSA GSUSA to provide state/city/zip code lists.
which If GSUSA database doesn’t have this information then
information they
these are open text fields.
have in their State Zip
database
Virginia
Next (Primary)
4 Button disabled until all information is input without
Button is
unavailable
errors.
5 Back 4 Next until all
required Authorable:
information button text is authorable
is completed

Back (secondary)
5
User click/tap to return to previous view/step.
 GSUSA
Platform: Desktop
Profile/ country Picker
—————————————
PROFILE ADDRESS DETAILS COUNCIL JOURNEY

GET REGISTERED

Your Name And Address Notes

These annotations are for indicating
interactions.
First Name
For all styling, color, font and layout specifications see
design comps
Please enter your first name.
Authorable:
Last Name All labels for input fields are aurthorable

1 Country:
Autocomplete for country.
Country If country is not USA then update form with international
fields
Unite 1
GSUSA to provide country list
United States
Street Address
Another United Country City/State/Zip
2
Lorem Ipsum United
User enter text in field.
Autorcomplete each field as user enters.
United Things
CIty GSUSA to provide state/city/zip code lists.
If GSUSA database doesn’t have this information then
these are open text fields.

State 2 Zip
3 Next (Primary)
Virginia Example of enabled Button is when all information is
input without errors.

Authorable:
Back 4 Next 3 button text is authorable

4 Back (secondary)
User click/tap to return to previous view/step.
 GSUSA
Platform: Desktop
Profile/ Foreign Country
—————————————
PROFILE ADDRESS DETAILS COUNCIL JOURNEY

GET REGISTERED

Your Name And Address Notes

These annotations are for indicating
interactions.
First Name
For all styling, color, font and layout specifications see
design comps
Please enter your first name.
Authorable:
Last Name All labels for input fields are aurthorable

1 Country:
Autocomplete for country.
Country If country is not USA then update form with international
fields
Babar's Kingdom 1
GSUSA to provide country list
Street Address
City
2
Open text field.
No autocomplete unless GSUSA has list of all countries
and cites.
CIty
Province.county
2 3
State label changed
Open text field
Province/County Postal Code No autocomplete unless GSUSA has list of all countries
and cites.
3 4
Postal Code
4 Zip code label changed.
Open text field
Back Next No autocomplete unless GSUSA has list of all countries
and cites.

Note:
All fields except for country are open text and entry
fields unless GSUSA has listing of all countries and
cities, counties and postal codes.
 GSUSA
Platform: Desktop
Profile/ Account details
—————————————
PROFILE ADDRESS DETAILS COUNCIL JOURNEY

GET REGISTERED

Account Details
Notes
These annotations are for indicating
interactions.
Phone For all styling, color, font and layout specifications see
1 design comps
( ) -
International Phone Authorable:
All labels for input fields are aurthorable
Date of Birth
Phone:
1
XX/XX/XXXX 2 Masking for phone format with area code.
You must be at least 13 years old to register for Gold Award
International Phone:
User click/taps link for international phone.
School Form field updated with masking for country code
and open text field to enter number.
3
International Phone

Grade

4 Country code can be dropdown if GSUSA has list of all

country codes otherwise both are open text fields.
Graduation Date
Birth date
2
/ 5 Use DEV provided calendar for user to input birthdate.
Month and year only.
User click/tap to open up calendar
Form field masked with slashes to separate date
information
Example of disabled button state
Back Next 3 School
Open entry text field

4 Grade
Dropdown from range from grades
9 - 12

5 Gradation Date
Use DEV provided calendar for user to input birthdate.
User click/tap to open up calendar
Form field masked with slashes to separate date
information
Only Month and year for graduation

Calendar will need to update to only offer month and

year for this useage.
Date Picker GSUSA
Platform: Desktop
Profile/ Calendar
—————————————

The user can select, month, date or year in any order. They can input the
date in any order that seems natural to the individual.
The views below are different states available to the user.

Day within the date can be disabled to accommodate just month/year input.

Notes
1
Opening view with full calendar These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
2 design comps
Remove
comma
from date 1 Calendar:
Opens
Use DEV provided calendar for user to input dates

Date
2
Make sure to remove comma betwee month and year in
calendar view.

User selects date information in calendar and it is

displayed in the maksed field

Note:
Gradation Date
Only Month and year for graduation date should be
shown in calendar options.
The date view needs to be removed.

DEV: Calendar will need to update to only offer month

and year for this useage.

Click month and choose a month

XX/XX/XXXX

Click year and choose year

XX/XX/XXXX

Click date and choose date

XX/XX/XXXX
 GSUSA
Platform: Desktop
Profile/ Council
PROFILE ADDRESS DETAILS COUNCIL JOURNEY —————————————

GET REGISTERED

Council and Troop Information Notes

These annotations are for indicating
Council Name 1 interactions.
Commonwealth of Virginia
For all styling, color, font and layout specifications see
design comps

1 Council Name:
Troop Volunteer/Leader Information If girl has existing record then autopopulate with
council name and logo in database.
Troop / IRM Number

If girl is new user, then autocomplete as she enters

council name.
Display logo of council she entered.
2
Name of Troop Leader / Volunteer
Use DEV provided calendar for user to input dates

2 Troop information
Email 3 Troop/IRM number
Autocomplete as user enters if GSUSA has information
in database.
Check with GSUSA if this information is provided in DB
4 then open text field.
Phone
3 Name
( ) -
Open entry field
5
4 Email
Back Next Open entry field validate email format

5 Phone:
Masked for phone number.
 GSUSA
Platform: Desktop
Profile/ Journey
—————————————
PROFILE ADDRESS DETAILS COUNCIL JOURNEY

GET REGISTERED

Journeys and Awards Notes

These annotations are for indicating
interactions.
Girl Scout Silver Award For all styling, color, font and layout specifications see
design comps
Completion Date

/ 1 1 Completion date Date

Use DEV provided calendar for user to input birthdate.
Month and year only.
User click/tap to open up calendar
Form field masked with slashes to separate date
Council where you earned your Silver Award information
2 Only Month and year for graduation

Calendar will need to update to only offer month and

year for this useage.
Girl Scout Journey Series
2 Council
Journey Name Autocomplete as she enters council name.
3 GSUSA to provide list of councils to DEV

3 Journey
Completion Date Dropdown menu for user select from.
User unlikely to know formal name and need dropdown
/ 1 to easily find correct journey.
Month and year only.

4 Troop/Group Name
Open entry field for volunteers name
Troop / Group Volunteeer’s Name
4 Register
5
Button disabled until all information across all views are
complete and free from errots.
Back Complete Profile 5
 GSUSA
Platform: Desktop
Profile / complete
—————————————
Notes
These annotations are for indicating

Congratulations! Lorem Ipsum! interactions.

For all styling, color, font and layout
specifications see design comps

1 congrats page:
Lorem ipsum dolor sit amet, consectetur - Once the girl reaches this page in a step,
1 the step should be marked as Complete
adipiscing elit. on the Dashboard.

She should not be able to go back to the

previous page.

Authorable:
Title
descriptive text
icon selected from icon sprite
GSUSA to provide icons to replace FPO

Dashboard button (Primary button):

2
She can use the Dashboard button to
navigate away from this page to
dashboard
Go to Dashboard 2
Authorable:
Button/CTA: The text can be customized
by authors.
Authors will need guidelines on naming
buttons
author set desintation action for button
page or modal