User Profile and Navigation Module

The upper right of the "Story Library" shows the student's "Profile and Navigation Module" upon sign in, as shown in the first mockup, above. This consists of the student's first name and last initial (if the teacher has provided a last name during sign up. If not, only the first name will show), a dedicated icon for signing out beside the name, a current accounting of the student's accumulated "Knowledge Coins" below, and then the student's currently equipped avatar. For brand new accounts, the Readingful "Apple Logo" icon will be the default avatar. New student accounts shall begin with zero "Knowledge Coins."

Side Navigation Menu

The navigation menu shall be accessible via the student hovering over the avatar in the "Profile and Navigation Module," which should swap in and reveal a button with a menu icon, as shown in the second mockup, above. When that button is clicked, the profile module shall fade out of view, with the the 3 natigation menu buttons fading in, as shown in the third mockup, above. If one of the navigation buttons to the two areas that aren't currently being visited at any given time are clicked, the menu should fade away, and slide back down the student's profile module. If no selection is made, the menu should close automatically as long as the user isn't hovering over any of the buttons, and 3 seconds have elapsed. The navigation buttons are to allow the student to toggle back, and forth, between the Story Library, Leaderboard, and Avatar Store content areas in the lower right of the page. When one is clicked, the other's elements in the lower right should fade out, to be replaced by the destination's elements. Hovering over any button should reveal its descriptive section title to the left.

Signing Out

When the dedicated sign out button is clicked, the phrase "Signing you out..." shall replace the student's name, and the processing animation shall replace the "Knowledge Coin" total, as shown in the fourth mockup, above, hold for a few beats, and then the page's elements reload to the homepage.

Styling Checklist:

Images

1. Profile Module Sign Out Button: sign_out.svg, 22 x 20, #FFFFFF4D (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

2. Profile Module Sign Out Button Hover: #FFFFFF99 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

3. Profile Module Sign Out Button OnClick: #FFFFFFE6 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

4. Profile Module Knowledge Coin Icon: knowledge_coin_icon.svg, 14 x 16, #FFFFFFB3 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

5. Profile Module Default Avatar: student_avatar.svg, 72 x 72 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

6. Profile Module Open Navigation Button Icon Hover: open_navigation.svg, 72 x 72, #FFFFFF

7. Profile Module Open Navigation Button Icon OnClick: #FFFFFF80

8. Profile Module Navigation Menu Button Library: library.svg, 48 x 48

9. Profile Module Navigation Menu Button Leaderboard:leaderboard.svg, 48 x 48

10. Profile Module Navigation Menu Button Store: store.svg, 48 x 48

11. Profile Module Navigation Menu Button: #FFFFFF80

12. Profile Module Navigation Menu Button Selected: #FFFFFF

13. Profile Module Navigation Menu Button Hover: #FFFFFFBF

14. Profile Module Navigation Menu Button OnClick: #FFFFFF

-NOTE: Colors 11 to 14 are used for images 8 to 10 above.

15. Selection Array Navigation Arrow: story_selection_arrow.svg, 34 x 50, #FFFFFF40 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

16. Selection Array Navigation Arrow Hover: #FFFFFF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

17. Selection Array Navigation Arrow OnClick: #FFFFFFBF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

18. Selection Array Navigation Arrow Disabled: #FFFFFF1A (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

19. Profile Module Processing Animation Dot: profile_processing_dot.svg, 12 x 12, #FFFFFF

Text:

MOCKUP 1:

1. Story Title: 3.6 rem, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

2. Story Synopsis: 1.8 rem, #FFFFFFB3 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

3. Read It Button Text: 2.4 rem, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

4. Read It Button Text Hover: 2.4 rem, #FFFFFFBF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

5. Read It Button Text OnClick: 2.4 rem, #FFFFFF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

6. Read It Button Text Disabled: 2.4 rem, #FFFFFF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

7. Search Text Default: 4.8 rem, #FFFFFF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

8. Story Selection Array Title: 3.8 rem, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

9. Story Selection Array Subtitle: 2.4 rem, #FFFFFFB3 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

10. Story Category Selector Link: 2.4 rem, #FFC053B3 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

11. Story Category Selector Link Hover: 2.4 rem, #FFC053 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

12. Story Category Selector Link OnClick: 2.4 rem, #FFC05380 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

13. Story Category Selector Link Disabled: 2.4 rem, #FFC05380 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

14. Profile Module Student Name: 2.4 rem, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

15. Profile Module Knowledge Coin Amount: 2.0 rem, #FFFFFFB3 (DUPLICATE, ORIGINAL SHOWN IN "STORY LIBRARY " SPECS)

MOCKUP 3:

1. Profile Module Navigation Menu Text: 2.2 rem, #FFFFFF4D

MOCKUP 4:

1. Profile Module Sign Out Notification Text: 2.4 rem, #FFFFFF80

Objects:

1. Profile Module Open Navigation Button Background Hover: #7FB0FF

2. Profile Module Open Navigation Button Background OnClick: #7FB0FF80