Learn
More
When
a prospective user of Readingful clicks or taps the "Learn
More & Try Free" button on Readingful's homepage,
those components shall fade out, and the "Learn More"
page's component's shall fade in. I think the best marketing
pages are very simple and have limited options, as the goal
is typically to get the user to take the first step, and,
in our case, that's account creation. So, this philosophy
of simplicity I applied to this design. As shown in the
first mockup, above, it consists of Readingful's logo, with
a an introduction video below. Then, in the top right there's
a navigation menu (video, samples, contact), and of course,
in the bottom right is the "Sign Up" module. You'll
notice that this arrangement of components is very much
like the "Teacher Dashboard," albeit with a few
changes. It has a title heading, but no subheading, and
the content area is somewhat narrower, but has the same
height.
Introduction
Video
Just
like the intro video on Readagogo, this one will be a short,
2 to 3 minute introduction to the basics of what Readingful
offers. In the admin panel, the admin will have the ability
to upload/replace this video, give it a title, subtitle,
and beginning image. The play button should increase from
the 50% it begins at, to 75% on hover, and 100% on click.
The video should simply play in place.
Sample
Texts
The
second button in the right side navigation menu should replace
the video with a listing of 3 sample texts the prospective
user can try, to test drive the student reading and quiz
taking experience, prior to signing up for an account, as
shown in the second mockup above. These three sample texts
will be set by the admin, which may change according to
the month. So, we'll likely add the ability for the sample
texts to be assigned any number of months of the year, so
that they may change with the season. Never a bad idea to
show at least one seasonal text, as teachers love their
holidays. In addition to this panel showing when visited
via the menu, I'd also like it to automatically load after
the video begins playing. That way, a prospective user can
go right from watching the video, to experiencing Readingful,
straight away. In mockup, you'll see that the sample text
entries consist of an image to the left, with a story title,
genre, and synopsis beside it. On hover, the decorative
right arrow shall be replaced with the "Read It"
button, along with the story's background switching to a
highlight color. Clicking the "Read It" button
should initiate the student reading experience for said
text.
Ask
a Question
In
the third mockup above, I'm showing the module that allows
the prospective user to reach out with a question, prior
to creating an account. This module is accessible via the
third button in the navigation menu. Here, the user should
have to populate both form fields, prior to the "Submit"
button becoming active. The infoline footer should switch
from "140 characters max." to "48 characters
max." when the user clicks into the email address field.
When the user presses "Submit," let's show the
processing animation, along with "Sending your message..."
in the infoline footer. The message should simply be forwarded
directly to support@readingful.com. Upon a successful sending,
the success message shown in the fourth mockup, above, shall
be shown. When the user clicks the "Close" button,
either the video or sample texts modules shoudl replace
it (whichever state the user had been engaged with, prior
to accessing the contact module).
Success
Module Text:
Thank
you for your question. A Readingful representative will
carefully review your inquiry and respond via email—usually
within 48 hours, but often sooner. We ask that you be patient
as you await our reply. In addition, please monitor the
spam/junk mail folder of your email client, in the event
our response is misclassified.
Styling
Checklist:
Images
1.
Intro Video Play Button: play_video.svg,
136 x 136, #FFFFFF80
2.
Intro Video Play Button Hover, #FFFFFFBF
3.
Intro Video Play Button OnClick, #FFFFFF
4.
Learn More Navigation Menu Button 1: video_button.svg,
48 x 48
5.
Learn More Navigation Menu Button 2: samples_button.svg,
48 x 48
6.
Learn More Navigation Menu Button 3: ask_button.svg,
48 x 48
7.
Learn More Navigation Menu Button: #FFFFFF80
8.
Learn More Navigation Menu Button Hover: #FFFFFFBF
9.
Learn More Navigation Menu Button OnClick: #FFFFFF
10.
Learn More Navigation Menu Button Selected: #FFFFFF
-Note:
Colors 7 to 10 apply to icons 4 to 6 above.
11.
Sample Story Right Arrow: sample_arrow.svg,
28 x 40, #EBEBF7
12.
Contact Form Icon: email.svg,
48 x 48, #EBF0FC
13.
Learn More Background Image: learn_more_background.png,
2048 x 1552 (1424 x 776)
14.
Intro Video Preview Image: intro_video_preview.png,
1400 x 760 (700 x 380)
Video
1.
Intro Video: intro.mp4,
700 x 380
Text
MOCKUP
1:
1.
Learn More Section Heading: 3.6
rem, #FFFFFF
2.
Video Title: 2.8 rem,
#FFFFFF
3.
Video Synopsis: 1.6 rem,
#FFFFFFB3
4.
Sign Up Heading: 2.8 rem,
#FFFFFF (DUPLICATE - ORIGINAL SHOWN
IN "SIGN UP" SPECS)
5.
Sign Up Infoline Text: 2.0
rem, #FFFFFF80 (DUPLICATE -
ORIGINAL SHOWN IN "SIGN UP" SPECS)
6.
Sign Up Role Selection Button Text: 2.4
rem, #FFFFFF (DUPLICATE - ORIGINAL
SHOWN IN "SIGN UP" SPECS)
7.
Sign Up Role Selection Button Text Hover: 2.4
rem, #FFFFFFBF (DUPLICATE -
ORIGINAL SHOWN IN "SIGN UP" SPECS)
8.
Sign Up Role Selection Button Text OnClick: 2.4
rem, #FFFFFF80 (DUPLICATE -
ORIGINAL SHOWN IN "SIGN UP" SPECS)
9.
Sign Up Role Selection Button Backslash Text: 2.4
rem, #FFFFFFBF (DUPLICATE -
ORIGINAL SHOWN IN "SIGN UP" SPECS)
10.
Sign Up Role Selection Button Backslash Text Hover:
2.4 rem, #FFFFFF80
(DUPLICATE - ORIGINAL SHOWN IN "SIGN UP" SPECS)
11.
Sign Up Role Selection Button Backslash Text OnClick:
2.4 rem, #FFFFFF40
(DUPLICATE - ORIGINAL SHOWN IN "SIGN UP" SPECS)
12.
Learn More Navigation Menu Text: 2.4
rem, #FFFFFF80 - NOT SHOWN
MOCKUP
2:
1.
Sample Story Title: 2.2 rem,
#8087AF
2.
Sample Story Genre: 1.6 rem,
#8DA3E0
3.
Sample Story Synopsis: 1.4
rem, #97A6C6
4.
Read Story Button Text: 2.2
rem, #FFFFFF
5.
Read Story Button Text Hover: 2.2
rem, #FFFFFFBF
6.
Read Story Button Text OnClick: 2.2
rem, #FFFFFF80
MOCKUP
3:
1.
Contact Form Field Text Default: 2.0
rem, #9BA9C9
2.
Contact Form Footer Text: 1.6
rem, #BFC6DD
3.
Contact Form Submit Button Text: 2.4
rem, #FFFFFF
4.
Contact Form Submit Button Text Hover: 2.4
rem, #FFFFFFBF
5.
Contact Form Submit Button Text OnClick: 2.4
rem, #FFFFFF80
6.
Contact Form Submit Button Text Disabled: 2.4
rem, #FFFFFF80
7.
Contact Form Field Text: 2.0
rem, #5B64BC (NOT SHOWN)
MOCKUP
4:
1.
Contact Submission Success Title: 2.4
rem, #6F8AE2
2.
Contact Submission Success Subtitle: 2.0
rem, #B7C7F7
3.
Contact Submission Success Paragraph: 1.6
rem, #576082
Objects
1.
Sample Story Background: 700
x 120, #FFFFFF
2.
Sample Story Background Hover: 700
x 120, #E4E9F4
3.
Read Story Button Background: 110
x 44, #719DFF
4.
Read Story Button Background Hover: 110
x 44, #719DFFBF
5.
Read Story Button Background OnClick: 110
x 44, #719DFF80
6.
Contact Module Background: 700
x 380, #FFFFFF
7.
Contact Form Field Background: 486
x 134, 358 x 50, #EBF0FC
8.
Contact Form Submit Button Background: 120
x 50, #85A8FF
9.
Contact Form Submit Button Background Hover: 120
x 50, #85A8FFBF
10.
Contact Form Submit Button Background OnClick:
120 x 50, #85A8FF80
11.
Contact Form Submit Button Background Disabled:
120 x 50, #85A8FF80
|
