Student
Account Creation
Upon
clicking the first icon in the "Students' content area
of the "Teacher Dashboard", the main content block
shall fade out the table of student data, and replace it
with a 7 step process for creating a new individual student
account, as shown, beginning with the first mockup, above.
I typically don't like multi step account creation processes,
and did play around with designs to do this on one screen.
But, in the end, it didn't look good or feel right. So,
instead opted for this multi-step process, as it's especially
helpful for a new teacher who is creating a student account
on the platform for the first time.
The
basic anatomy of each step consists of a static title "Create
a New Student Account," followed by a subtitle that
counts the step in the process the teacher is currently
on, then either a form field, or selector buttons, instructional
text for completing the step directly below, and then any
limitations or requirements in the bottom left infoline
footer. At the top right we have an "x" button
for closing this process during any step, to return to the
student data view, and then a submit/next button in the
lower right to allow the teacher to move through each step.
Step
1
The
first mockup shows Step 1 of the "Student Account Creation"
process. Here, we're asking the teacher to provide the student's
first name. At least 2 characters are required, with a 12
character max. The first character of the name should be
made uppercase, with the letters that follow, be made lowercase.
Let's keep it simple and disallow spaces and any special
characters. Letters only. The "Next" button begins
inactive at 50% opacity, and should come to 100% opacity
when the second character is typed.
Step
2
You'll
see Step 2 in the second mockup, above. Here, we'll allow
the teacher to provide the student's last name (for cases
in which said teacher has more than one student with the
same first name, and therefore requires the differentiation).
However, for this input, we'll also give the teacher the
ability to not provide the last name at all, or to abbreviate
with a single initial. Thus, for this step, the "Next"
button begins in the active state. Also, for this step,
you now see a back arrow icon beside the button. This is
to allow the teacher to navigate backward, in terms of steps,
if so desired. This field will be limited to a maximum of
14 characters, letters only. Like the first name field,
the first character here should be made uppercase, as well.
Step
3
For
step 3 (third mockup, above), we're asking the teacher to
identify the student's grade level that the student is either
currently attending at school, or will attend, by selecting
one selector button, from among nine choices. Although this
array of grade level selector buttons shall begin with none
selected, the teacher clicking or tapping any one choice
should turn the previously selected button, in the even
there is a selection, at the teacher is making a change.
Readingful is for established readers to practice reading
skills. It's not intended to teach students how to read.
So, it's not really going to be very appropriate for most
Kindergarten and 1st grade students. Yet, there are always
advanced students at these levels who are already reading.
So, we will make room for the possibility there may be limited
use of the program for these students, as well. The teacher
must make a selection for the "Next" button to
activate for this step.
Step
4
In
the fourth mockup, above, I'm showing Step 4 of the process.
This is the step that allows the teacher to identify the
group to which he or she would like to assign the student.
Here, the teacher has 8 selector buttons, and therefore
may assign the student to any one of eight different groups.
For this step, the "Next" button shall be active
from the start, as the teacher will have the option to skip
this step. If the teacher skips the step, the student shall
be assigned to group "1" as the default.
Step
5
The
fifth mockup, above, shows Step 5. The only inputs for this
step are 3 selector buttons: at, above, or below. The teacher
may also skip this step, which begins with the "at"
button pre-selected, and notes in the infoline footer that
"This student will begin reading text at grade level."
With the creation of each student account, the student in
question needs a beginning "r-level" or "reading
level" in the system. The grade level set will determine
this. For example, 3rd grade students will begin at 3.50,
4th grade students at 4.50, and so on. The halfway point
for the 100 point span for a grade level, in other words.
This is the number that should be set if this field is populated
with "at." This is also the number to use if the
teacher skips the step. However, if the teacher selects
"below," the student shall begin 100 points lower
than grade level. So, for example, a 3rd grade student will
begin at 250, instead of 350. Similarly, if the teacher
selects "above," the student shall start out 100
points above for his or her grade level. Basically, this
is a quick and dirty way to more accurately start the student
off at a more appropriate reading level, given the teacher's
knowledge of the student's current skill. If "above"
or "below" are selected, the infoline footer should
change to note this.
Step
6
When
the teacher gets to step 6, we'll begin the form field populated
with the username that has been generated for this student,
based on the student's first name, and the next, lowest,
available number to append after it. So, for example, the
first "Josh" will be "josh1" the next
"josh2" and so on. However, when "josh1"
is inevitably deleted, that username should become available
again for assignment, just like it worked on Readagogo.
Here, the teacher can also override the username assignment
with his or her own choice. We will allow as few as 3 characters,
and as many as 18 characters, letters and numbers only,
for the student username. If the teacher enters a username
that is taken, we'll use the limitation line for error handling
to report "This username is currently unavailable."
We can perform this check when the teacher taps the "Next"
button, and if the username is taken, make the button inactive,
along with showing the error message, forcing the teacher
to try another username.
Step
7
The
last step in the "Student Account Creation" process
is to assign a password to the account, shown in the seventh
mockup above, which Readingful will choose randomly from
a list of the following 50 words:
school,
homework, classroom, friends, recess, study, pencil, read,
reading, story, book, crayon, think, play, listen, learn,
learning, teacher, student, classmate, paper, grade, knowledge,
kickball, library, playtime, storytime, quiz, tutor, textbook,
notebook, snack, backpack, bookbag, assignment, lesson,
principal, music, artwork, computer, words, speak, desk,
ruler, folder, lunch, science, history, math, locker
Alternatively,
the teacher can provide his or her own password, between
4 and 16 characters, which are not case sensitive.
Results
When
the teacher clicks or taps the "Save" button on
the last step, the results panel shall show (the eighth
mockup, above). This stage shows the student's username
and password, as well as directs the teacher to give the
credentials to the student, to have him or her login. In
addition, we'll use the bottom line text here to notify
the teacher that the icon menu above provides the ability
to print student credentials.
Probationary
Accounts
During
the 14 day (two week) free trial, the teacher can create
up to 240 student accounts that all function. However, either
during the trial, or after the trial has expired, the teacher
may then purchase a subscription—the price of which
is determined by the number of student accounts the teacher
currently has created. This places a limitation on the total
number of functioning accounts the teacher may create. Yet,
we of course must consider what happens when a teacher attempts
to create another student account, in the middle of using
a subscription for a specific number of student accounts
to access Readingful. Well, in such a scenario, the teacher
can still create the account, but will be met with the message
that is shown just prior to account creation, as shown in
the ninth mockup above.
In
other words, the login credentials for the most recently
created student accounts that exceed the teacher's current
subscription limitation, shall not function. This only applies
to accounts above 10, however, as each Readagogo subscription
for $9.99 per month will allow up to 10 accounts.
Styling
Checklist:
Images:
1.
Teacher Subsection Back Button: back_arrow_icon.svg,
20 x 30, #E2E8F7
2.
Teacher Subsection Back Button Hover: #E2E8F7BF
3.
Teacher Subsection Back Button OnClick: #E2E8F780
4.
Teacher Subsection Close Button: close_button_icon.svg,
24 x 24, #E2E8F7
5.
Teacher Subsection Close Button Hover: #E2E8F7BF
6.
Teacher Subsection Close Button OnClick: #E2E8F780
7.
Teacher Subsection Processing Animation Component:
processing_dot.svg, 12 x 12,
#6F8AE2
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
4.
Teacher Subsection Subtitle: 2.0
rem, #B7C7F7
5.
Teacher Account Section Subtitle Hyperlink: 2.0
rem, #FFBC36BF (DUPLICATE,
ORIGINAL SHOWN IN "TEACHER DASHBOARD" SPECS)
6.
Teacher Account Section Subtitle Hyperlink Hover:
2.0 rem, #FFBC36
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
7.
Teacher Account Section Subtitle Hyperlink OnClick:
2.0 rem, #FFBC3680
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
8.
Teacher Subsection Form Field Text Default: 2.0
rem, #9BA9C9
9.
Teacher Subsection Informational Text: 1.6
rem, #576082
10.
Teacher Subsection Infoline Footer Text: 1.6
rem, #BFC6DD
11.
Teacher Subsection Submit Button Text: 2.2
rem, #FFFFFF
12.
Teacher Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF
13.
Teacher Subsection Submit Button Text OnClick:
2.2 rem, #FFFFFF80
14.
Teacher Subsection Submit Button Text Disabled:
2.2 rem, #FFFFFF80
15.
Teacher Profile Name: 2.4
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
MOCKUP
3:
1.
Teacher Subsection Selection Button Text: 2.2
rem, #FFFFFF
2.
Teacher Subsection Selection Button Text Hover:
#FFFFFFBF
3.
Teacher Subsection Selection Button Text OnClick:
#FFFFFF80
4.
Teacher Subsection Selection Button Text Selected:
#FFFFFF
MOCKUP
6:
1.
Teacher Subsection Form Field Text: 2.0
rem, #50557F
MOCKUP
8:
1.
Teacher Subsection Data Inset Prefatory Text: 2.0
rem, #CDD6E8
2.
Teacher Subsection Data Inset Text: 2.0
rem, #546A96
Objects:
1.
Teacher Subsection Form Field Background: 230
x 50, #EBF0FC
2.
Teacher Subsection Submit Button Background: Variable
x 50,
#6C96FF
3.
Teacher Subsection Submit Button Background Hover:
Variable x 50,
#6C96FFBF
4.
Teacher Subsection Submit Button Background OnClick:
Variable x 50,
#6C96FF80
5.
Teacher Subsection Submit Button Background Disabled:
Variable x 50,
#6C96FF80
6.
Teacher Subsection Selection Button Background:
50 x 50,
#E2E8F7
7.
Teacher Subsection Selection Button Background
Hover: 50 x 50,
#E2E8F7BF
8.
Teacher Subsection Selection Button Background
Onclick: 50 x 50,
#E2E8F780
9.
Teacher Subsection Selection Button Background
Selected: 50 x 50,
#94B8FF
|
