Benefactor
Checkout
For
the "Benefactor Checkout" process, I'm hopeful
we'll be able to limit it to just 2 quick steps, only 5
fields to populate, as shown in the above three mockups.
This design uses many of the same elements as the "Teacher
Dashboard." However, we're of course removing the menus
and "sign out," button while referencing the name
of the beneficiary in the subtitle, and including a copyright
notification in the lower right corner (just to have some
sort of design element to fill there).
Two
Steps
The
two steps of this process mirror those used in the "Extend
Access" module for a teacher's personal purchase, albeit
with slightly different language in the titles and subtitles.
In "Step 1" we'll collect the payer's name and
postal code, while showing the details of the subscription
being purchased in the infoline footer. And, in "Step
2" we'll collect the payer's account number and security
verification. When the benefactor clicks the "Pay"
button, we'll show the same processing beats, and then transition
to the "Payment Success" notification.
Payment
Success Notification
This
message references the amount paid, the subscription details
once again, and gives the benefactor a button to open the
receipt of purchase in a new browser tab or window. The
infoline footer at this final stage reads "Thank you
for supporting Beneficiary Name." as shown in the third
mockup, above.
"We
have successfully processed your payment of $XX.XX, which
has instantly added XX days of access, for XX students,
to your beneficiary’s Readingful account. Your payment
will appear on your financial statement as charged by readingful.org.
You may download and access a receipt for this payment now,
or obtain a copy from your beneficiary at any time in the
future."
Error
Notification
This
can be the exact same error panel that the teacher sees
when trying to make a personal payment, yet mistyping a
key detail of his or her payment information. We simply
want the "Continue" button to route the payer
back to the first step, so that he or she can attempt making
the payment again. Similarly, if the payment fails twice
on Readingful, let's have the "Continue" button
route the benefactor to Stripe's website for the third attempt.
Receipt
of Payment
Even
with the benefactor payment, when it's successful, we still
want to place the receipt for access in the beneficiary's
Readingful account "Payment History" section,
so that, if needed, he or she can retrieve an additional
copy of the receipt for the benefactor at a later date and
time. This often happens with school secretaries and financial
officers. They get distracted while making a payment, and
then only realize six months later they don't have a receipt
for their records.
Revisiting
the Benefactor Payment Link
Let's
make it so that if anyone visits a benefactor payment link
for a subscription that has already been purchased (an invalid/expired
payment link) that the user is simply redirected to Readingful's
homepage.
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:
MOCKUPS
1 to 3:
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 Account Section Subtitle Beneficiary Name:
2.0 rem, #FFBC36BF
4.
Teacher Subsection Title: 2.4
rem, #6F8AE2 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
5.
Teacher Subsection Subtitle: 2.0
rem, #B7C7F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
6.
Teacher Subsection Form Field Text Default: 2.0
rem, #9BA9C9 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
7.
Teacher Subsection Informational Text: 1.6
rem, #576082 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
8.
Teacher Subsection Infoline Footer Text: 1.6
rem, #BFC6DD (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
9.
Teacher Subsection Submit Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
10.
Teacher Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
11.
Teacher Subsection Submit Button Text OnClick:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
12.
Teacher Subsection Submit Button Text Disabled:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
13.
Benefactor Checkout Copyright Footer: 2.4
rem, #FFFFFF4D
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)
|
