My
Account
The
fourth button in the navigational menu of the "Teacher
Dashboard" shall open the teacher's "My Account"
content area. Here, the title heading shall read "My
Account" with the subheading "Information, Settings,
and Preferences." Just like the other sections, there's
a topline menu, and in this case for the starting content
area we'll display an "Account Status" module,
as shown above in mockups one to four. The purpose of this
function is simply to give the teacher the ability to deactivate
his or her account, which must be confirmed, and, when it
is, the user is signed out after a 30 second countdown.
Subsequently, the user's account shall be automatically
purged 30 days later. If the user logs in within that probationary
period, the deactivation shall be reversed, and the account
saved from permanent deletion. Much like the "Cancel
Subscription" module, we want a bit of a delay, with
processing animation, between the "Deactivate"
button being pressed, and the "Confirm" button
showing, so as to avoid accidental confirmation. Prior to
the 30 second countdown being reached, the user may press
"Cancel" to reverse the deactivation, as well.
In addition, if the user has an active subscription at the
time this module shows, the "Deactivate" button
shall be reduced to 50% opacity, and made inactive. Users
must cancel and forfeit any remaining subscription time,
prior to closing their accounts. In the first mockup there's
a link in the infoline footer that should take the user
to his or her subscription cancellation module, when clicked.
User
Identity
The
first icon in the topline menu for the "My Account"
section leads to the "User Identity" module, as
shown in the fifth mockup, above. Here, we're simply providing
the teacher with the ability to verify or change the first
and last name he or she provided during the "Sign Up"
process. The first name field requires a minimum of 2 characters
in order for the "Save" button to function, and
should allow a maximum of 12 characters. The last name is
2 to 14 characters. No matter what the user types in either
field, the first character should be auto-capitalized, with
the remaining characters lowercase. When the "Save"
button is clicked, we should show processing animation in
its place, with the text "Updating your information..."
in the infoline footer, before returning the "Save"
button to its inactive state, along with reporting "Your
information has been saved." in the infoline footer.
Contact
Information
Mockups
six and seven, above, show the module for the second item
in the topline menu for this content area, "Contact
Information." Here is where we show the email address
the user provided during the sign up process, as well as
allow him or her to change it. Unlike the "User Identity"
area, this module begins with a "Next" button,
instead of a "Save" button. That's because here
we'll require the user to type any change in email address
twice. In order for the "Save" button to become
active, the user must type both email address entries identically.
Otherwise, the "Save" button shall remain mechanically
disabled. This will ensure an email address update can only
take place if the user has double verified the change. The
characters entered in this field shall be limited to a maximum
of 48 characters. We should also validate that the email
address entered is at least structured correctly, force
all characters to be lowercase, and only allow numbers,
letters, "@," hyphens, underscores, and periods.
Password
Of
course, the user will need a way to change his or her password,
which is what the eighth mockup, above, shows... the "Account
Security" module. Here, we'll mask the user's current
password with a series of 8 dots (regardless as to the user's
actual password length), but allow the user to click into
the form to type a new password (which should be visible,
when typed). Just like with the "Contact Information"
module, we want to use the same double confirmation process
(only allow saving when the new password has been typed
by the user identically, twice).
Background
Mockup
nine, above, shows the "Background" module, which
is the fourth icon in the topline menu for the "My
Account" section. Here you can see the starting state
for the module, which always shows the currently applied
background first, with the remainder of the background images
loading randomly in the array. In the infoline footer, we'll
report the total number of different backround images available,
which the admin will be able to upload and edit in the admin's
settings panel. The user can obviously click the right arrow
to scroll through the available background images in sets
of 3. When he or she clicks on one of the other themes,
the preview image should go from 80% opacity to 100% opacity,
and automatically change it in the background, in real time,
so that the teacher can experience it. The user must click
"Save" on a new theme, for the change to be applied.
Otherwise, when the user closes the module, the background
image should revert back to the previously chosen image.
When
a new user signs up for Readingful, the system should simply
assign one of the available background images, for his or
her teacher account, at random.
Styling
Checklist:
Images:
1.
Topline Menu User Identity Icon: user_identity_icon.svg,
32 x 32
2.
Topline Menu Contact Information Icon: contact_information_icon.svg,
32 x 32
3.
Topline Menu Account Security Icon: account_security_icon.svg,
32 x 32
4.
Topline Menu Theme Icon: theme_icon.svg,
32 x 32
5.
Teacher Account Navigation Menu Icon: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
6.
Teacher Account Navigation Menu Icon Hover: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
7.
Teacher Account Navigation Menu Icon OnClick: #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
8.
Teacher Account Navigation Menu Icon Selected:
#FFFFFF (DUPLICATE, ORIGINAL SHOWN
IN "TEACHER DASHBOARD" SPECS)
-NOTE:
Colors 5 to 8 account for images 1 to 4, above.
9.
Teacher Subsection Back Button: back_arrow_icon.svg,
20 x 30, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
10.
Teacher Subsection Back Button Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
11.
Teacher Subsection Back Button OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
12.
Teacher Subsection Close Button: close_button_icon.svg,
24 x 24, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
13.
Teacher Subsection Close Button Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
14.
Teacher Subsection Close Button OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
15.
Teacher Subsection Processing Animation Component:
processing_dot.svg, 12 x 12,
#6F8AE2 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
16.
Teacher Subsection Slider Navigation Arrow: slider_navigation_arrow_icon.svg,
24 x 36, #E2E8F7
17.
Teacher Subsection Slider Navigation Arrow Hover:
#E2E8F7BF
18.
Teacher Subsection Slider Navigation Arrow OnClick:
#E2E8F780
19.
Teacher Subsection Slider Navigation Arrow Disabled:
#E2E8F780
Text:
MOCKUP
1:
1.
Teacher Account Section Title: 3.8
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
2.
Teacher Account Section Subtitle: 2.0
rem, #FFFFFFB3 (DUPLICATE,
ORIGINAL SHOWN IN "TEACHER DASHBOARD" SPECS)
3.
Teacher Subsection Title: 2.4
rem, #6F8AE2 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
4.
Teacher Subsection Subtitle: 2.0
rem, #B7C7F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
5.
Teacher Subsection Informational Text: 1.6
rem, #576082 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
6.
Teacher Subsection Infoline Footer Text: 1.6
rem, #BFC6DD (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
7.
Teacher Subsection Informational Text Hyperlink:
1.6 rem, #4B70E8
(DUPLICATE, ORIGINAL SHOWN IN "MASS ACCOUNT CREATION"
SPECS)
8.
Teacher Subsection Informational Text Hyperlink
Hover: 1.6 rem, #4B70E8BF
(DUPLICATE, ORIGINAL SHOWN IN "MASS ACCOUNT CREATION"
SPECS)
9.
Teacher Subsection Informational Text Hyperlink
OnClick: 1.6 rem, #4B70E880
(DUPLICATE, ORIGINAL SHOWN IN "MASS ACCOUNT CREATION"
SPECS)
10.
Teacher Subsection Submit Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
11.
Teacher Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
12.
Teacher Subsection Submit Button Text OnClick:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
13.
Teacher Subsection Submit Button Text Disabled:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
14.
Teacher Profile Name: 2.4
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
MOCKUP
5:
1.
Teacher Subsection Form Field Text: 2.0
rem, #50557F (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
Objects:
1.
Teacher Subsection Form Field Background: 230
x 50, #EBF0FC (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
2.
Teacher Subsection Submit Button Background: Variable
x 50,
#6C96FF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
3.
Teacher Subsection Submit Button Background Hover:
Variable x 50,
#6C96FFBF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
4.
Teacher Subsection Submit Button Background OnClick:
Variable x 50,
#6C96FF80 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
5.
Teacher Subsection Submit Button Background Disabled:
Variable x 50,
#6C96FF80 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
|
