Teacher
Dashboard
When
a teacher successfully signs into the platform, the background
artwork from the homepage, and its elements, shall fade
out, and the "Teacher Dashboard" shall fade in.
As shown in the first mockup, above, this initial view consists
of the Readingful logo and subtitle, with the actual content
section directly below, that changes depending on which
function the teacher is working with at any given time.
In the upper right we have the main "Navigation Menu"
and in the lower right a welcome greeting for the teacher.
Welcome
Greeting
Upon
sign in, this greeting shall show in the lower right of
the "Teacher Dashboard," and hold for a count
of 10 seconds. The greeting begins with the standard salutation
of "Hello" followed by the teacher's first name.
Directly underneath is the sentence "Welcome to Readingful."
After that 10 second count, the greeting shall fade out,
and be replaced with the teacher's avatar, and name, as
shown in the second mockup. When hovered over, the avatar/name
combo shall be replaced with the "Sign Out" phrase/icon.
Clicking that button, should sign the teacher out, first
reporting "Signing you out..." along with processing
animation, in that lower right corner, as shown in the fourth
mockup, above.
Content
Section Default
The
content section to show for the "Teacher Dashboard"
upon sign in should be the "Students" section,
by default. Teachers will be vising Readingful to work with
student accounts, and review student data, more than any
other task. As such, we want to hit them with this most
important area, right up front, when they sign in. However,
there is one exception... and that's when there are 5 or
fewer days remaining in the teacher's subscription. If the
teacher's students have 5 or fewer days of access remaining,
the "Extend Access" of the "Subscription"
section of the "Teacher Dashboard" shall show
upon successful sign in.
Navigation
Menu
The
"Navigation Menu" for the "Teacher Dashboard,"
in the upper right, shall consist of a stack of 5 icons,
with their fill color controllable via CSS, that allow the
teacher to navigate through the dashboard's various main
content sections. When the teacher hovers over any menu
item, it's title shall display beside it, as shown in the
third mockup, above. The buttons should go from 50% opacity,
to 75% on hover, 100% onclick. This menu's icons each exist
in a 48 x 48 rem space, separated by 36 rem.
Background
Images
For
the "Teacher Dashboard," we'll be providing the
teacher with different options for background images. In
the "Settings" section, we'll allow the teacher
to make this selection. Each new teacher account shall be
assigned one of the options, randomly, upon creation. The
admin will have a setting for uploading these background
images collectively, in a ZIP file.
New
Users
When
a teacher first joins Readingful, and signs in, we don't
want to simply present the teacher with an empty "Students
Table." As such, we'll instead display the message
shown in the fifth mockup, above. This message instructs
the teacher that he or she should first watch an introduction
video, to help familiarize him or her with the teacher account.
After that, the message contains direction that to get students
started with Readingful, the teacher should create an account
for each student.
The
"Introduction Video" hyperlink here should open
the "Getting Started" video for Readingful using
the same viewing dimensions, and player, as in the "Learn
More" section. Even though the videos are different.
The
"Create an Account" hyperlink should open the
"Student Account Creation" module.
There's
also a link titled "Ask a Question," which should
simply open the module from the "Helpbook" that
allows the user to contact Readingful directly.
This
message should only display by default until the teacher
creates his or her first student account. After that, while
it should no longer display by default to the teacher, on
sign in, there shall temporarily be a sixth icon in the
topline menu (heart symbol) that lets the teacher revisit
this message (until such time as either the free trial expires,
or the teacher purchases a subscription). With either of
these conditions met, this sixth icon shall be permanently
redacted from the topline menu for the teacher.
Also
in the fourth mockup, you'll note that the "Leaderboard"
link in the subtitle is missing. This is because without
at least 2 student accounts created, there's no reason for
the "Leaderboard" view option to even display.
So, until the teacher has at least 2 student accounts created,
it should not display.
Styling
Checklist:
Images:
1.
Teacher Account Navigation Menu Students: students_icon.svg,
48 x 48
2.
Teacher Account Navigation Menu Stories: stories_icon.svg,
48 x 48
3.
Teacher Account Navigation Menu Subscription: subscription_icon.svg,
48 x 48
4.
Teacher Account Navigation Menu Settings: settings_icon.svg,
48 x 48
5.
Teacher Account Navigation Menu Helpbook: helpbook_icon.svg,
48 x 48
6.
Teacher Account Navigation Menu Icon: #FFFFFF80
7.
Teacher Account Navigation Menu Icon Hover: #FFFFFFBF
8.
Teacher Account Navigation Menu Icon OnClick: #FFFFFF
9.
Teacher Account Navigation Menu Icon Selected:
#FFFFFF
-NOTE:
Colors 6 to 9 account for images 1 to 5, above.
10.
Teacher Account Topline Menu Button: #FFFFFFBF
11.
Teacher Account Topline Menu Button Hover: #FFFFFF80
12.
Teacher Account Topline Menu Button OnClick: #FFFFFF40
13.
Teacher Account Topline Menu Button Selected: #FFFFFF
14.
Teacher Account Topline Menu Button Disabled: #FFFFFF40
-NOTE:
Colors 10 to 14 account for all Topline menu button icons
across all 5 teacher account sections.
15.
Teacher Account Default Avatar: teacher_avatar.svg,
72 x 72
16.
Teacher Account Sign Out Button Icon: teacher_sign_out.svg,
72 x 72, #FFFFFF
17.
Teacher Account Sign Out Button Icon OnClick: #FFFFFF80
18.
Teacher Account Processing Animation Component:
processing_dot.svg, 12 x 12,
#FFFFFF
19.
Students Section Topline Icon Welcome: welcome_message.svg,
32 x 32, #FFFFFF
Text:
MOCKUP
1:
1.
Teacher Account Section Title: 3.8
rem, #FFFFFF
2.
Teacher Account Section Subtitle: 2.0
rem, #FFFFFFB3
3.
Teacher Account Section Subtitle Hyperlink: 2.0
rem, #FFBC36BF
4.
Teacher Account Section Subtitle Hyperlink Hover:
2.0 rem, #FFBC36
5.
Teacher Account Section Subtitle Hyperlink OnClick:
2.0 rem, #FFBC3680
6.
Teacher Account Welcome Message Title: 2.8
rem, #FFFFFF
7.
Teacher Account Welcome Message Subtitle: 2.4
rem, #FFBC36CC
MOCKUP
2:
1.
Teacher Account Nagivation Menu Title: 2.4
rem, #FFFFFF80
2.
Teacher Profile Name: 2.4
rem, #FFFFFF
MOCKUP
3:
1.
Teacher Account Sign Out Text: 2.4
rem, #FFFFFF
MOCKUP
4:
1.
Teacher Account Sign Out Notification Text: 2.4
rem, #FFFFFF80
MOCKUP
5:
1.
New Teacher Account Splash Title Text: 2.4
rem, #2D303D
2.
New Teacher Account Splash Paragraph Text: 2.0
rem, #2D303D
3.
New Teacher Account Splash Hyperlink: 2.0
rem, #5794FF
4.
New Teacher Account Splash Hyperlink Hover: 2.0
rem, #5794FFBF
5.
New Teacher Account Splash Hyperlink OnClick: 2.0
rem, #5794FF80
Objects:
1.
Teacher Account Section Area Background: 814
x 380, #FFFFFF
2.
New Teacher Account Splash Background: 754
x 320, #D9E2FF
3.
Teacher Account Sign Out Button Background: 72
x 72, #5395FF
4.
Teacher Account Sign Out Button Background OnClick:
72 x 72, #5395FF80
|
