Extend
Access
By
clicking the first icon in the top menu of the "Subscription"
content section of the "Teacher Dashboard," the
teacher shall be presented with the option to "Extend
Access" to Readingful for his or her students, as shown
in the first mockup, above. I've decided to title this section
"Extend Access" because that's literally what
a teacher will be doing, every time. A new Readingful teacher
account automatically gives him or her a full, free, 2 week
(14 days) trial (essentially a time-based subscription to
the service). So, from the very beginning, as the teacher
starts to use Readingful with his or her students, he or
she will be deciding whether or not to extend that access
further, into the future. And, on Readingful, the teacher
should be able to do so, at any time. Which shall be a succinct
3 step process.
Step
1
The
first step of the purchase process, as shown in that first
mockup, is to select the number of months of access. In
this module, we have an array of 9 buttons and are simply
asking the teacher to decide how many sets of 30 days of
access for his or her students, to add to the subscription.
One of the biggest issues I had with Readagogo when I first
launched it years ago was that it charged for an annual
membership. The pricing was literally "$1 per student,
per year." This was an intentional gambit, at the outset
of the service, to try to get a lot of users with super
low pricing, from the jump, and then increase the fee, later
on. So, if the teacher had 23 students, he or she was paying
$23.00 for the use of 23 student accounts for an entire
year, starting then. This was obviously a very cheap price,
for the service, that the teacher was getting. And yet,
the number of complaints I received along the lines of...
"Well, there are only 3 months left in the school year
at this point. I don't want to pay for an entire year!"
were staggering. Even when I explained, "Hey, this
is really cheap. Just think of access during the summer
months as a bonus." Ooooh, boy. That did not go over
well. Teachers literally prefer paying 12 times as much
over the course of a school year, when their students actually
use the service, than they do a small, annual fee that covers
an entire year. People just don't have the ability to remove
that feeling of "I'm paying for something I'm not using!"
even when a monthly fee costs them a lot more. So, this
is why we will use a monthly fee structure (as Readagogo
uses now), and make the maximum purchase 9 months. This
is because even teachers who purchase access right at the
beginning of the school year... 9 months access is the maximum
they need. There's no sense in even offering the ability
to purchase a full year's access. Even if it were discounted,
teachers don't want it.
The
text underneath the button array directly references the
number of student accounts the teacher currently has created.
"Please
select the number of months of Readingful access, to add
to your current subscription, for your XX students."
And
then, in the footer information line of this module, we'll
always quote the current price for the service: "$9.99
per month for up to 10 students. $1 per additional student."
Step
1: Selection Made
In
the second mockup, above, I'm showing what should occur
when the teacher actually selects the number of months.
The button shall highlight, and the text below the button
array shall change to quote the price for that number of
months, along with the "Next" button becoming
active.
"This
selection will extend Readingful access, for your XX students,
until Month Day, Year, totaling $XX.XX."
In
the mockup's example, the teacher is selecting to add 3
months (90 days) of access to Readingful for 24 students.
So, that's a base fee of $9.99 per month to cover 10 students,
and then an additional $1 each for 14 students = $23.99
x 3 = $71.97.
Step
1: Selection Made (With New Student Accounts)
Sometimes,
teachers will be extending their subscription access, after
just adding new student accounts that aren't part of their
current subscription (such as when they get new students
partway through a school year). In these instances, we'll
add an asterisk after the instruction text, and in the infoline
below, reference proation, as shown in the third mockup,
above:
"*Includes
proration of X new accounts to your current subscription."
Must
be sure to change the text to the singular "account"
if only 1 account is being prorated.
In
the mockup's example, note that the teacher has 12 days
of access remaining on her current subscription and, that
when she selected 3 months of access, we're telling her
that it's for 24 students, but also that this includes proration
for 2 new accounts she's created. That means her current
subscription had 22 students, and she's just created 2 new
student accounts that aren't yet active. So, to purchase
3 months more of access for all of these accounts, the teacher
still has to pay for the 12 remaining days of her current
subscription, for those 2 new student accounts, in order
for those 2 new accounts to become immediately active. Thus,
in this example, we have the same rate as before... 24 students
for 3 months will be $71.97. But, we have to add on the
equivalent of 12 days access for 2 accounts. Mathematically
a student's access costs $1 per month (30 days). So, that's
approximately 3.33 pennies per day. Which means 12 days
is $0.3996, rounded up to $0.40 per student. So, in this
example, we have to tack an additional $0.80 on to the $71.97,
a total of $72.77, in the end. We'll always round up, when
computing proration.
In
short, the goal is to always prorate the addition of new
student accounts on remaining subscription time, when the
teacher has both created new student accounts, and wants
to extend subscription access, at the same time.
Step
2: Payer Identification
In
the fourth mockup above, I'm showing the beginning state
for "Step 2" of the payment process, after the
teacher clicks the "Next" button during "Step
1." For this step, we're asking the teacher to identify
who will be paying for this subscription. The teacher can
either click the "Me" button to proceed to pay
personally, or the "Benefactor" button to have
another party make the payment. Also in this module, note
that we move the number of students, and the price being
paid, to the infoline footer.
Step
2: Payer Identification (Personal)
If
the teacher clicks the "Me" button, both buttons
should be instantly replaced with the "Name" and
"Zip Code" form fields, along with a change to
the instructional text, below, as shown in the fifth mockup,
above. From what I can tell looking at Stripe payment forms
is that they really only need 5 bits of data to be collected
to process a payment: name, billing zipcode, card number,
expiration date, and cvv. Thus, as soon as the teacher indicates
he or she will be paying personally for the subscription,
it just makes sense that during this "Payer Identification"
step, we immediately have the teacher provide his or her
name and billing zip code. When these fields are filled,
the "Next" button should become active.
Fingers
crossed Stripe won't force us to collect a billing address,
city, and state/province, as well.
Step
3: Payment Information
The
third step of the payment process is shown in the sixth
mockup, above. Here, we simply need to collect the credit
card number, four digit expiration date, and cvv code. Would
be a good idea to automatically add the slash, when the
user types the expiration date. Also, break the credit card
number up into chunks of 4 digits, with a bit of space between
each set, and limit all 3 of these fields to numbers only.
Expiration date and cvv fields should be limited to 4 digits,
credit card field to 19 digits.
Just
like on Learningful, we'll put the word "Pay"
on the button itself, along with the total dollar amount
being paid, and make it become active when all fields have
been populated correctly. The seventh mockup, above, shows
the "processing" state that should display once
the user clicks the pay button.
Successful
Payment
If
payment is processed successfully, we show the teacher the
eighth mockup, above, the payment success module. This construct
reports to the user the amount paid, the description under
which the payment will be reported on his or her financial
statement (readingful.org), and quotes the number of days
of access added to the account, as well as providing the
teacher the ability to click a quick link and have the receipt
of purchase show as a PDF in a new browser tab or window
(just like we do on Learningful). Note in the subtitle for
the "Subscription" section, the number of days
has been correctly added to the total remaining. We want
that to update instantly. The goal here is to hopefully
be able to process payments without the teacher having to
go to Stripe, and then back to Readingful (even via a redirect).
Payment
Error
If
a payment error is encountered, the notification shown in
the ninth mockup, above, shall show. This screen simply
tells the user that an error has been registered, that it's
usually caused by mistyping, and gives the user a "Continue"
button that, when clicked, should take the user back to
"Step 2" showing the name and zip code as were
populated. Ideally, it would be a good idea to hold the
payment information provided by the user so that he or she
can visually verify if an error has taken place, as he or
she goes through steps 2 and 3 again.
If
the payment fails a second time, we may let the "Continue"
button take the user to Stripe's website to complete payment,
instead. Just to see if that solves the issue.
Step
3: Benefactor Payment
If
the teacher selects the "Benefactor" button during
"Step 2," the "Next" button shall highlight,
which shall then take him or her to an alternative Step
3, which automatically gives the user a custom payment link,
as shown in the tenth mockup, above. With this module, the
goal is simple. The user clicks or taps the link, we show
"Your link has been copied successfully!" in the
footer text, and the teacher then provides said link to
the individual who will be paying on his or her behalf.
I'd like the guest checkout to be located at /payment via
a 7 digit alphanumeric code, as shown in the above example.
This,
in a nutshell, will be Readingful's payment process. It's
a pretty concise 3 step process.
No
Student Accounts Warning
As
shown in the eleventh mockup, above, an alternative message
should show when the teacher visits the "Extend Access"
panel while having no student accounts created.
"This
is the section of your account that will allow you to purchase
additional months of access to Readingful for your students,
at your convenience. However, at this time, you do not have
any student accounts created. Please use the navigation
menu to your right, to visit your “Students”
panel, and create a reader account for each of your students."
Styling
Checklist:
Images:
1.
Teacher Subsection Back Button: back_arrow_icon.svg,
20 x 30, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
2.
Teacher Subsection Back Button Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
3.
Teacher Subsection Back Button OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
4.
Teacher Subsection Close Button: close_button_icon.svg,
24 x 24, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
5.
Teacher Subsection Close Button Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
6.
Teacher Subsection Close Button OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
7.
Teacher Subsection Processing Animation Component:
processing_dot.svg, 12 x 12,
#6F8AE2 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
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 Selection Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
6.
Teacher Subsection Selection Button Text Hover:
#FFFFFFBF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
7.
Teacher Subsection Selection Button Text OnClick:
#FFFFFF80 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
8.
Teacher Subsection Selection Button Text Selected:
#FFFFFF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
9.
Teacher Subsection Informational Text: 1.6
rem, #576082 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
10.
Teacher Subsection Infoline Footer Text: 1.6
rem, #BFC6DD (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
11.
Teacher Subsection Submit Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
12.
Teacher Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
13.
Teacher Subsection Submit Button Text OnClick:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
14.
Teacher Subsection Submit Button Text Disabled:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
15.
Teacher Profile Name: 2.4
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
MOCKUP
5:
1.
Teacher Subsection Form Field Text Default: 2.0
rem, #9BA9C9 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
MOCKUP
7:
1.
Teacher Subsection Form Field Text: 2.0
rem, #50557F (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
MOCKUP
8:
1.
Teacher Subsection Informational Text Hyperlink:
1.6 rem, #4B70E8
(DUPLICATE, ORIGINAL SHOWN IN "MASS ACCOUNT CREATION"
SPECS)
2.
Teacher Subsection Informational Text Hyperlink
Hover: 1.6 rem, #4B70E8BF
(DUPLICATE, ORIGINAL SHOWN IN "MASS ACCOUNT CREATION"
SPECS)
3.
Teacher Subsection Informational Text Hyperlink
OnClick: 1.6 rem, #4B70E880
(DUPLICATE, ORIGINAL SHOWN IN "MASS ACCOUNT CREATION"
SPECS)
MOCKUP
10:
1.
Benefactor Payment Hyperlink: 2.0
rem, #7095F2
2.
Benefactor Payment Hyperlink Hover: 2.0
rem, #7095F2BF
3.
Benefactor Payment Hyperlink OnClick: 2.0
rem, #7095F280
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)
6.
Teacher Subsection Selection Button Background:
50 x 50,
#E2E8F7 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
7.
Teacher Subsection Selection Button Background
Hover: 50 x 50,
#E2E8F7BF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
8.
Teacher Subsection Selection Button Background
Onclick: 50 x 50,
#E2E8F780 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
9.
Teacher Subsection Selection Button Background
Selected: 50 x 50,
#94B8FF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
|
