Academic Writer logo

ACW & APA Style CENTRAL IDEM Mockups (BS3)

Go to ACW-IDEM BS5 Mockups

Last Updated: 1-30-2023

Newest Mockups

Access Codes & Direct Purchases Sections - Displaying Both Direct Pay Options

Older Access Codes & Direct Purchases Mockups

Access Codes & Direct Purchases Sections - Displaying Both Direct Pay Options

Access Codes & Direct Purchases Sections - Revised Access Codes Text Section

Mockups #1: Access Codes & Direct Purchases Sections

  • Access Codes & Direct Purchase - Details of changes from V2: Changed the light blue background to the light gray used in other AW/IDEM screens; Changed the info-light alert at the top to a blue info alert; Made the metatitle "generic" with just "Access Options - Academic Writer" to accomodate the access codes + purchase now vs. just access codes views of the screen; Took out the "note" alert about having to create an account first before using access codes/direct purchase, since the flow will be set that users will only see this screen if they are new and don't have an account at all or has expired access -- The lti-register page will only be in the flow if we know they don't have an account. Sometimes they'll have a free trial period and go right to the product. When free trial is over, they will go to "access code" screen. It's not that every single time the flow is lti-register > access codes page, sometimes they'll go right to the access codes page. During free trial, they bypass the access code screen.; Changed the "purchase now" section to say "for the full semester" to clarify the pricing; Took out the contact info in the intro text since it's the user's bookstore that would be fixing access issues; The jQuery validation runs first on the Access Codes form, then if validation passed, a modal shows with a link over to Academic Writer; Several CSS changes (e.g., welcome container font-size and alignment with headings)
  • Access Codes & Direct Purchase - Invalid Access Code Server-Side Alert - Note: This mockup is showing the invalid access code server-side alert

Mockups #2: Access Codes Section Only

Mockups #3: Purchase Expiration Alert

Past Versions

  • Access Codes & Direct Purchase - V2 - Note: This mockup is showing many variations (e.g., error messaging) and scenarios just for reasons of discussing; The mockup matches the style of the current AW IDEM screens (e.g., the same h1 style, and the same button style as the lti-register screen, where the users would be coming from); Need to consider having the blue background or not - the blue background doesn't match other AW IDEM screens, but does match some IDEM screens, but it does help with using a "light alert" for the "You have X days left of access" messaging; The "Purchase Now" button links over to the AW Cart mockup (discuss whether showing the price in the button is helpful, and if we need any supporting CTA text by the button); The mockup also has a single Access Code field now, with minimal frontend validation that it's required, triggered by pressing the "Redeem Access Code" button for a form submit.; This mockup also shows server-side error messaging for an invalid code entry, and also shows a "note" that would appear if the system could tell the user did not already have an account (if possible).
  • Access Codes & Direct Purchase - V1 - This screen is the first iteration, using an accordion design, with the thought that this screen would come before the account creation step (the lti-register screen). After discussing the user flow, it made more sense to have the user enter their Access Code or link to a direct buy cart page on a screen after they create an account. This mockup also shows how the ChargeLogic iframe fields would look like in the purchase section. Also, 2 Access Code fields are used here, with validation that their values match at form submit—but, having the user only enter the code once would be a better experience. There is also an autofocus on the first Access Code field.

Boilerplates

Past Mockups (Note: These may have changed; Keeping for reference)

Changelog

  • 1-11-2020: Second revision of Educator Trial Access screen, now with redesigned fields, JavaScript for hiding all fields when "Student" is chosen as User Type, and showing an "Other" text field when "Other" is chosen for Type of Institution/Organization. Also, putting in the dagger symbols for the footnote.
  • 1-11-2020: Changes to the redesigned "trial" screen changing the order of the fields, putting First Name and Last Name fields up top to associate all the fields with this field, and fixing the display of the conditional "Collegiate-level" and "Area of Study" fields which show up when "Student" is chosen in the "I am a(n)" field. Also, an "autofocus" attribute was put on the First Name field to speed up form input.
  • 1-10-2020: First drafts of the "temporary access" AW screen and the redesigned "trial" screen with vertical form fields and improved alert box accessibility labels.
  • 8-20-19: Took out modal for AW Legal Agreement screen and also changed button to "Continue to Academic Writer".
  • 8-19-19: Verbiage changes for the AW Legal Agreement screen.
  • 8-12-19: Finished the first draft of the AW Legal Agreement screen.
  • 4-3-19: Finished the first draft of the AW LTI student ecommerce screen.
  • 3-22-19: Fixed the hide/show password JS on the AW Ecommerce Login screen.
  • 3-21-19: Put back the 3 checkboxes from AW Ecommerce Create Account screen per AW/IDM team feedback.
  • 3-20-19: Removed 3 checkboxes from AW Ecommerce Create Account screen per AW team requirement.
  • 3-18-19: New login and create an account screens for AW ecommerce flow.
  • 3-6-19: New Login Page (IP Authenticated) with OpenAthens login section.
  • 11-26-18: All create account screens changed to have textarea be readonly. Also, JavaScript modified for enabling button and switching alert for better functionality with scrollHeight. Specifically, this part of the code was changed [per Neil]:
    checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
    to this:
    checkReading.read = this.scrollHeight - this.scrollTop <= this.clientHeight+5;
  • 11-20-18: New Academic Writer Create Account page with No Google Sign-In. [Done by Luis]
  • 11-16-18: Fixed an IE bug with flexbox and the footer not showing correctly on IE11. Specifically, changed these styles in all AW mockups with the green footer:
    body{display: flex;min-height: 100vh;flex-direction: column;}
    #backgroundContainer{flex: 1;}
    footer{background-color:#198731;width: 100%;}
    to this:
    body{display: flex;height: 100vh;flex-direction: column;}
    #backgroundContainer{flex: 1 0 auto;}
    footer{background-color:#198731;width: 100%;flex-shrink: 0;}
  • 11-9-18: New Academic Writer pages for login with IP, login without IP, "Student" selected on the trial register form, and the page you see after a student submits the trial register form. [Done by Luis]
  • 10-9-18: First draft of "Academic Writer Trial" page, making form responsive and using new responsive header and footer. [Done by Luis]
  • 10-4-18: First draft of "Academic Writer Login Page" page, using new AW logos and green footer design.
  • 6-15-18: First draft of "no access" page, which is the the page users see if their institution does not have access to the ASC application. This page gives the option for the user to log in as an individual. The only changes with this page and the login.html page is a different <title> tag, and the top alert.
  • 12-15-17: After OPD/stakeholder review meeting, text updates have been made to the Login screen and Look Up Account screen (using "APA Style CENTRAL" instead of "APA" or "MyAPA"), and a "Retype Email" field has been added to the Edit Profile screen, which will need validation that it matches the Email field on form submission.
  • 12-8-17: First deliverable of Login, Create Account, Look Up Account, and Edit Profile screens given to developers. Note that customCSS.css file has been modified from the original LTI Account Creation deliverable, so now this single file works for styling all 5 forms.
  • 11-29-17: Note to developers about LTI-account-creation.html mockup: I have moved the main headings outside of the form tags for better accessibility (even though WAVE did not pick up on this). If screenreaders enter "form" mode, the headings may be skipped.