Subscription
Status
As
shown in the first mockup, above, when the teacher visits
"Subscription" content section, the "Subscription
Status" module should show. This function exists to
give teachers a very clear way to know where their current
Readingful subscription stands, to pause it, be linked to
the section they can extend their subscription access, or
cancel their subscriptions altogether.
There
are three main states to a teacher's subscription... active,
paused, and expired. In the first mockup, I'm showing the
active status. It reports how many of his or her student
accounts currently have access, and when that access expires.
"Your
Readingful subscription is currently active, with XX student
accounts enjoying full access—which will continue
until Month Day, Year. This is a non-recurring subscription.
It does not automatically renew. Nonetheless, at your convenience
you may cancel your remaining access, should you determine
you have no further use for our services."
Cancel
Button
When
the "Cancel" button is clicked, I'd like a three
second hold of the word "Processing..." in the
infoline footer, as well as the processing animation, as
shown in the second mockup, above. This is because, what
comes next is the "Confirm" button, as shown in
the third mockup, above. And, I think a good 3 second delay
will stop any accidental cancellations (the teacher clicking
twice in short succession), being that the "Confirm"
button is directly under the "Cancel" button.
The information paragraph shall change to the following,
at the "Confirm" step:
"Please
confirm the cancellation of your Readingful subscription’s
remaining access. By doing so, you agree that this action
is permanent (cannot be undone), and that no refund will
be issued to compensate you for the forfeiture of unused
access. By contrast, if you don’t wish to cancel your
subscription at this time, use the “x” button
to exit."
Confirm
Button
Now,
when the "Confirm" button is actually clicked,
we'll show the processing animation once again for a few
beats, along with the infoline footer "Processing subscription
cancellation..." as shown in the fourth mockup, above.
Cancellation
Confirmation
As
shown in the fifth mockup, above, let's show a confirmation
message that the subscription has been cancelled, along
with a "Close" button. Note that the number of
days reported in the "Subscription" content section
subtitle has become zero.
"At
your direction, your Readingful subscription has been successfully
cancelled, with remaining access forfeited. We’re
sorry to see you go, and hope you will consider using Readingful
again at some point in the future. If, at any time, you
decide that you would like to resume using our services
with your students, you may login and purchase a new subscription."
Button
Styling
The
50 rem tall button I show in most of the modules for this
design... I'm just eyeballing in terms of width, for the
mockups. Each word or phrase inside the button should have
18 rem interior padding on each side. So, that can be another
good base styling item to add to the platform, to make it
easily replicable.
Expire
Status
Finally,
as shown in the sixth mockup, above... if a teacher's subscription
becomes fully expired, we'll report this to the student
in this module as follows:
"Your
Readingful subscription expired on December 11th, 2024.
At this time, your 24 student accounts do not have access.
To renew your subscription at this time, please use the
option in the menu above, or the “Subscribe”
button below. Be advised that expired, inactive teacher
accounts are eventually automatically deleted from our system."
Free
Trial Status
As
mockups 7, 8, and 9, above, outline, the "Subscription
Status" states during the 2 week free trial will show
different verbiage, and give the teacher the option to pause
and restart the free trial at his or her convenience.
Active:
"Your
free trial Readingful subscription is currently active—which
allows you access to try the full service with your students
for up to two weeks. If you’re not ready to continue
your free trial at this time, you may pause it, and restart
it, at your convenience. To extend your students’
access beyond the trial, please use the menu above to purchase
a subscription."
Paused:
"Your
free trial Readingful subscription has been paused by you—which
means your students do not currently have access to log
in, read stories, or take quizzes. To pick up where you
left off, and continue trying the full Readingful service
with your students, please simply use the button below to
restart your trial period, at your convenience."
Expired:
"Your free, two week Readingful
trial subscription has expired—which means your students
do not currently have access to login, read stories, or
take quizzes on the platform. To extend your students’
access to Readingful at this time, please simply use the
menu above, or click the “Subscribe” button
below, to purchase a subscription."
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 9:
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 Accent Text: 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 Informational Text: 1.6
rem, #576082 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
7.
Teacher Subsection Infoline Footer Text: 1.6
rem, #BFC6DD (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
8.
Teacher Subsection Submit Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
9.
Teacher Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
10.
Teacher Subsection Submit Button Text OnClick:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
11.
Teacher Subsection Submit Button Text Disabled:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
12.
Teacher Profile Name: 2.4
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
Objects:
1.
Teacher Subsection Submit Button Background: Variable
x 50,
#6C96FF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
2.
Teacher Subsection Submit Button Background Hover:
Variable x 50,
#6C96FFBF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
3.
Teacher Subsection Submit Button Background OnClick:
Variable x 50,
#6C96FF80 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
|
