Anda di halaman 1dari 10

DASHBOARD

MOBILE

Dashboard unselected

Dashboard states

View only modal

Error Page
GSUSA
Platform: Mobile
GOLD AWARD DASHBOARD 1 Dashboard
My Gold Award Progress Notes —————————————
You can edit…Donec consectetur,
neque non consequat efficitur. 2 These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
3 design comps

4 1 Titles
DISCOVER
Need help getting started? 5 Subtitle
Dashboard marker

1
Choose an
6
2 page title:
Dashboard title

issue Investigate Authorable:


Title and subtitle can be edited
4 DEFINE
Ready to make your plan? 5 paragraph text
2
information/descriptive text

3 4 5
Present your
3
Council Logo
Display logo of the user’s council

Build a team Create a plan plan Step Catogory subtitle


4 Discover, Define, Deliver
4 DELIVER
5 Authorable:
Time to take action! Subtitle can be edited

6 7
Educate and
8 5
Category Title
Title of category of steps.

Track your work inspire What's next Authorable:


Title can be edited

6 Step Card
See design comps for styling information.
Background image - authorable
GO GOLD 2.0 SITE FOOTER Title of step - authorable
CONTENT TBD
GSUSA
Platform: Mobile
Dashboard/Progress States
GOLD AWARD DASHBOARD Notes —————————————
My Gold Award Progress
You can edit…Donec consectetur, These annotations are for indicating
neque non consequat efficitur.
interactions.
For all styling, color, font and layout specifications see
design comps

1 Not started
DISCOVER Card without any icons
Need help getting started?
Icon: In progress

1 1

Choose an
2 Icon
In Progress 2
2 Icon applied to indicate user in working on the step

GSUSA to provide icon


issue Investigate FPO icon on design comp

DEFINE 3 Icon: Complete


Ready to make your plan? Icon applied to indicate user has completed a step

GSUSA to provide icon


3 3 Icon
Completed 4 5 FPO icon on design comp

Icon: View
Present your 4
Build a team Create a plan plan Icon applied to indicate step that is viewable only user
can not input data
DELIVER
Step 5 is view only until step 4 is completed
Time to take action!
4 Step 7 is view only until proposal from step 5 is
accepted

6 7 Icon
View only

Educate and
8 GSUSA to provide icon
FPO icon on design comp
Track your work inspire What's next
Note:
Icons are authorable from icon options that are entered
in the system via icon sprite. GSUSA to provide DEV
icons for current and future use. Any updates to icons
post launch will require DEV update.
GO GOLD 2.0 SITE FOOTER
CONTENT TBD
GSUSA
Platform: Mobile
Dashboard/View Only Modal
Notes —————————————

5
These annotations are for indicating
interactions.
Lorem Ipsum Dolor For all styling, color, font and layout specifications see
You can edit each2step until you 1 design comps
submit, Copy that tellsitsthe
even though girl theas
marked
step Lorem
complete. she’s about
ipsumtodolor.
visit is not
ready for editing, but she can 1 View only
still look at it. Modal displays when user click/taps a card that is
DISCOVER
marked view only. Let’s the user know that they won’t be
Need help getting started? able to enter data in the step.
4 Cancel Ok 3
2
1
Choose an
2 title and description
Same styling for title and text.
issue Investigate
Authorable
Title and text edited
DEFINE
Ready to make your plan? GSUSA to provide icon
FPO icon on design comp

3 4 5
Present your
3 Primary Button
Button indicates user understand view only.
Build a team Create a plan plan
4 Secondary Button
Cancel button to exit modal and return to dashboard
DELIVER
Time to take action! Authorable:
Button text is editable

6 7
Educate and
8 5
X icon
User click/tap to close the modal and return to
Track your work inspire What's next
dashboard

Note:
All modals are vertically and horizontally centered

GO GOLD 2.0 SITE FOOTER


CONTENT TBD
GSUSA
Platform: Mobile
Error Page
Notes —————————————

These annotations are for indicating


interactions.
For all styling, color, font and layout specifications see
Uh-oh! 1 design comps
Unfortunately, something
went wrong. Error Page
1 Page to display if there is an error in saving.

Authorable:
Error Message is editable.

GO GOLD 2.0 SITE FOOTER


CONTENT TBD
DASHBOARD
DESKTOP

Dashboard unselected

Dashboard states

View only modal

Error Page
GSUSA
Platform: Desktop
THE GIRL SCOUT GOLD AWARD DASHBOARD
1 Dashboard
My Gold Award Progress Notes —————————————
Your can edit…. Nunc lacinia urna non libero ultricies, vestibulum facilisis risus
2
mattis. Donec nec dolor placerat, viverra massa at, lacinia libero. These annotations are for indicating
interactions.
For all styling, color, font and layout specifications see
design comps

3 1 Titles
Subtitle
Dashboard marker

page title:
Dashboard title
4
DISCOVER
Authorable:
Need help getting started? 5 Title and subtitle can be edited

paragraph text
2

1 2
information/descriptive text

Council Logo
3 Display logo of the user’s council

Step Catogory subtitle


4 Discover, Define, Deliver
Choose an issue Investigate
Authorable:
Subtitle can be edited

4 Category Title
DEFINE 5
Title of category of steps.
Ready to make your plan? 5
Authorable:
Title can be edited

3 4 5 6 Step Card
See design comps for styling information.
Background image - authorable
Title of step - authorable

Build a team Create a plan Present your plan

4
DELIVER

Time to take action! 5

6 7
Educate and
8
Track your work inspire What's next
GSUSA
Platform: Desktop
Dashboard/Progress States

THE GIRL SCOUT GOLD AWARD DASHBOARD


Notes —————————————

My Gold Award Progress These annotations are for indicating


Your can edit…. Nunc lacinia urna non libero ultricies, vestibulum facilisis risus interactions.
mattis. Donec nec dolor placerat, viverra massa at, lacinia libero. For all styling, color, font and layout specifications see
design comps

1 Not started
Card without any icons

Icon: In progress
2 Icon applied to indicate user in working on the step

GSUSA to provide icon


FPO icon on design comp
DISCOVER

3 Icon: Complete
Need help getting started? Icon applied to indicate user has completed a step

1 2
GSUSA to provide icon
2 FPO icon on design comp
Step that 1
is Not Yet Icon 4 Icon: View
In Progress
Step that is
Started Icon applied to indicate step that is viewable only user
In Progress
can not input data
4
Step 5 is view only until step 4 is completed
Choose an issue Investigate Step 7 is view only until proposal from step 5 is
accepted

GSUSA to provide icon


DEFINE FPO icon on design comp

Ready to make your plan? Note:


Icons are authorable from icon options that are entered

3 4 5
4 in the system via icon sprite. GSUSA to provide DEV
3 icons for current and future use. Any updates to icons
post launch will require DEV update.
Step that Icon Icon Step that
has been Completed View only is View
completed Only

Build a team Create a plan Present your plan

DELIVER

Time to take action!

6 7 8
4

Icon
View only

Educate and
Track your work inspire What's next
GSUSA
Platform: Desktop
Dashboard/View Only Modal

THE GIRL SCOUT GOLD AWARD DASHBOARD


Notes —————————————

My Gold Award Progress These annotations are for indicating


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

1 View only
5 Modal displays when user click/taps a card that is
marked view only. Let’s the user know that they won’t be
able to enter data in the step.
Lorem Ipsum
2
Dolor!
Your can edit…. Nunc lacinia urna non libero ultricies, vestibulum facilisis risus 2
mattis. Donec nec dolor Lorem ipsum
placerat, dolor
viverra sit amet,
massa consectetur
at, lacinia libero. title and description
adipiscing elit. Lorem ipsum dolor sit amet, Same styling for title and text.
consectetur adipiscing elit.
Authorable
DISCOVER Title and text edited
4 Cancel Ok 3
Need help getting started? GSUSA to provide icon
FPO icon on design comp

1 2
3 Primary Button
Button indicates user understand view only.

complete Secondary Button


icon 4
Cancel button to exit modal and return to dashboard
here

Authorable:
Choose an issue Investigate Button text is editable

X icon
5
User click/tap to close the modal and return to
DEFINE dashboard

Ready to make your plan? Note:


All modals are vertically and horizontally centered

Example
of not yet
started 3 4 5 Example of
View only
GSUSA
Platform: Desktop
Error Page
Notes —————————————

These annotations are for indicating


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

Error Page
1 Page to display if there is an error in saving.

Uh-oh! Authorable:
Error Message is editable.
1
Unfortunately,
something went wrong.