IDEM & Ecommerce Refactoring Mockups (Last Updated: 3-14-2022)

* Note: These mockups are based off of the Bootstrap 3 library and are not using the IUX Team's Pattern Library stylesheet.

Ecommerce - Standard Main Screens (first deliverable, 2-13-19)

Ecommerce - Scenario Designs (second deliverable, 3-4-19)

Screen 1: Cart — Scenarios

Screen 2: Addresses — Scenarios

Screen 3: Payment & Review — Scenarios

Payment & Review Screen with Promotional Code pricing display

Screen 4: Thank You Screen — Scenarios

Guest Checkout Screen

Additional IDEM Screens (Note to developers: These designs below are all works-in-progress. Please do not start development on these designs until the IUX Team has solidified them. Both the HTML and CSS may change extensively.)

Login Screens: "Regular" Login Screen & All Dynamic Custom Login Screens - Note that this is the only login screen HTML which will be updated with ALL custom login screen sections moving forward.

NOTE: All of the login screens have the same HTML, except for the classes within the <body> tag. The dynamic display of the regular vs. custom login screen(s) content is all done via styles within idemcss.css and with dynamic JS based on classes in the body tag.

Here are the classes in the body tags which control the appearance of each screen:

"Regular" MyAPA login screen: <body class="loginScreen regularLoginScreen">
Custom login screen for Journal Order/Subscription: <body class="loginScreen customLoginScreen customLoginScreenJournalOrdering">
Custom login screen for Join Divisions: <body class="loginScreen customLoginScreen customLoginScreenJoinDivisions">
Custom login screen for Locator: <body class="loginScreen customLoginScreen customLoginScreenLocator">
Custom login screen for GradStudy: <body class="loginScreen customLoginScreen customLoginScreenGradStudy">
Custom login screen for the Membership Directory: <body class="loginScreen customLoginScreen customLoginScreenMembershipDirectory">
Custom login screen for Supplemental Materials: <body class="loginScreen customLoginScreen customLoginScreenSupplementalMaterials">
Custom login screen for OPL-Student: <body class="loginScreen customLoginScreen customLoginScreenOPLStudent">
Custom login screen for OPL-Educator: <body class="loginScreen customLoginScreen customLoginScreenOPLEducator">
Custom login screen for FDA Network of Experts: <body class="loginScreen customLoginScreen customLoginScreenFDA">

Older Login Screens Keeping for Reference - Note: These are not being updated after 8-5-2021.

Login Screen - "Regular" my.apa.org login screen
Custom Login Screen for Journal Order/Subscription
Custom Login Screen for Joining Divisions
Custom Login Screen for GradStudy
Custom Login Screen for Locator
Custom Login Screen for Locator - Example of Top Error Container for Server-Side Error Display
Custom Login Screen for Membership Directory
Custom Login Screen for Membership Directory - Top Alert for Non-Active APA Member Access Denied - Note: Not being used, being separated into two scenarios below, also may be done on the SF side.
Custom Login Screen for Membership Directory - Top Alert for Non-Active APA Member Access Denied - RENEW Scenario - Note: Not part of the dynamic custom login screen styling - hardcoded alert would be dynamically displayed.
Custom Login Screen for Membership Directory - Top Alert for Non-Active APA Member Access Denied - JOIN Scenario - Note: Not part of the dynamic custom login screen styling - hardcoded alert would be dynamically displayed.
Custom Login Screen for Supplemental Materials - Dynamic CSS Version - Note the JS in this file for replacing content areas specific to this screen.
Custom Login Screen for Supplemental Materials - Hardcoded "one-off" screen - NOT USING
Custom Login Screen for OPL - Student Login - Note: Not originally designed by the IUX Team
Custom Login Screen for OPL - Educator Login - Note: Not originally designed by the IUX Team

Login-Security Screens

Create an Account Screen

Create an Account Screen - "Regular MyAPA" skin

Log in or Create an Account Screen

Error Screens

Payment & Review Screen - with credit card error alert (multiple line error alert pattern, with icon, heading, and unordered list)

Cart Screen

Cart Screen - with tax listed in the cart

Addresses Screen

Payment & Review Screen

Thank You Screen

Thank You Screen - with tax listed in the cart

Look Up APA Account Screen

Look Up APA Account Screen

Account Screens

Link Account Screen

Link Accounts Screen: No Email Match; Yes Name Match

Unauthorized Screens

Continuing Education (CE) Screen

Free CE Credits Screen - V1

Supplemental Materials Screens

Academic Writer Ecommerce Screens

NOTE: All of the AW-ecommerce screens have the same HTML as the "regular" ecommerce screens, but with classes of `.hideForAW` and `.showForAW` applied to different sections to affect the display. This is all controlled with `<body class="academicwriter">` being used on the AW-ecommerce screens. If this <body> class can be applied programmatically when there is an AW product in the cart, then the CSS will handle all of the display you see on the current AW Cart Screen.

Screen 1: AW Cart Screen

Screen 2: AW Addresses Screen

AW Addresses Screen - V1

Screen 3: AW Payment & Review Screen

AW Payment & Review Screen - V1

Screen 4: AW Thank You Screen

AW Thank You Screen - V1

GradStudy IDEM Coupon Code Screens

Redeem Coupon Code Screen

Redeem Coupon Code Screen - V1

Redeem Coupon Code Screen - Invalid Coupon Code Server Error

Redeem Coupon Code Screen - Invalid Coupon Code Server Error - V1

Redeem Coupon Code Screen - Valid Coupon Code Thanks

Redeem Coupon Code Screen - Valid Coupon Code Server Thanks - V1

Redeem Coupon Code Email Template

GradStudy Coupon Code Redemption Email Template - (all internal, standalone frontend code, except for images in the /images directory) - V1

Notes to Developers (e.g., Changes to already-delivered mockups)

General

The idemcss.css file is being modified as the new screens are being worked on, but in specific cases the HTML has been modified in the already-delivered mockups. Such changes are documented in the list below.
The ecommerceCustomJS.js file is being modified as the new screens are being worked on.
All of the image paths from the old https://www.apa.org/images/* URL has been changed to https://www.apa.org/Content/images/* since this changed with the Tridion DXA upgrade. Affected links are in the global3.css, rwd.css, and in the <head> of each of the mockups for the favicon and iTouch icons. This is just something to keep in mind when coding the actual pages—to make sure the image paths referencing www.apa.org images are either intact, or hosted locally within my.apa.org with relative links.
We "fixed" the progress meter completed/active state colors on the Payment & Review mockups (HTML change).

6-16-2021

Adding new custom login screen for the Salesforce-based Membership Directory.

5-14-2020

Updated all of the horizontal and stacked APA logos to the newer versions on all mockups (in the headers).

12-12-2019

The idemcss.css file has been added to with a "btn.dismiss" class and also modal-body styling for anchors (underlining anchors in modal body's by default, and text decoration of "none" on hover, for improved legibility of links within modals.

9-20-2019

Changed all instances in all files of "ecommerceCustomCSS.css" to "idemcss.css" since the scope of this batch of mockups has grown to include more than just ecommerce screens.

9-18-2019

Fixed all of the HTML validation errors with the "choose address" screens (e.g., the issues with block elements (div's) inside inline elements (the labels used for the "radio button cards"), the form labels inside form labels validation error, the html tag valdation errors, etc.).
For the HTML validation fixes described above, this code has been added to the idemcss.css file: label.fullWidth span.block{display:block;}

8-19-2019

For all of the Addresses screens (address-#-#.html), the jQuery validation for the Zip Code field has been changed with error message text of "Select your..." to "Enter your...".

5-6-2019

New sections added to all customized login screen mockups to accommodate conditional display of the "Create an Account" button and text for customized login screens which need this functionality: The customized login screens for Joining Divisions and Subscribing to Journals.

3-18-2019

I changed all the internal page JavaScript for the jQuery validate "highlight" and "unhighlight" codes, after experiencing an issue with the <span> wrap in the customization of the code, which I have taken out since it was manipuating the DOM in a way that made the Privacy Policy checkbox validation hide the custom styled checkbox.

3-8-2019

I added in the "Privacy Policy" box to all Addresses screens, including modified jQuery validation to give an error if the form is submitted without the checkbox being checked.
Slight margin change on all bottom gray sections on the minicarts, so that the "total" lines line up with the prices on top better.

3-7-2019

On all ShoppingCart-1-x.html mockups, an ID was added to the <div> surrounding the "Calculate Shipping & Taxes" link, which will allow us to more easily run an A/B test later on with hiding this feature and seeing how it affect purchase conversions. Essentially, the code of <div style="text-align:right;margin-top:5px;"><a href="#">Calculate Shipping & Taxes</a></div> was changed to <div style="text-align:right;margin-top:5px;" id="calculateShippingTaxesLink"><a href="#">Calculate Shipping & Taxes</a></div>. Also, an id of "editShippingTaxesLink" is used for the "Edit Shipping Address" link which appears after using the "Calculate" link. For the AB test, we will hide this ID also just to make sure it doesn't show up on the screens for that experiment variation.

3-1-2019

There are a few changes to the "Address" screen 2: You will need to remove the First Name/Last Name Shipping/Billing jQuery validate rules of "field: "lettersonly" (in both the "rules" and "messages" part of the internal page script), as I noticed it won't allow special characters in the names, which may be preferable (e.g., Sebastián). I also added to the "emailAgain" validation with defining the "email" rule to keep a consistent error message between the two email fields. Note: The validation is flexible to account for additional strictness if needed (e.g., no numbers?).
Change from initially delivered mockup: For consistency with other form fields, I added placeholder text to the two email fields on the Addresses screen.

2-18-2019

The HTML has been modified for the "alert" bubbles on the Cart page (taking out the inline fontawesome icon color styling and doing all coloring via the main custom CSS file).

Changelog

9-28-2021

Added in the simplified application footer to all the custom login screens (via the main CSS file).

12-2-2020

Changed the Update Password screen to have the required fields asterisk notice and asterisks for both fields.

11-6-2020

Added a Payment & Review mockup using a popover (instead of a tooltip) for the tax line information message, which will be a combo message for all types of products (not dynamic due to technical limitations).

Payment & Review Screen - with tax listed in the cart using a popover design with a combo message for tax information

5-14-2020

Created version 2 of the locked out of account after 10 failed attempts mockup, after revisions were made to all the design ideas from the version 1 mockup.

1-23-2020

On the Free CE Credits screen: Added "title" attributes to the buttons for ENROLL and ENROLLED to help users (and screenreaders) know what actions the buttons do. I also changed these from divs to actual buttons in the HTML for better accessibility. Also, an "aria" accessibility issue was corrected for this code: <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h5 class="modal-title" id="successfulrEnrollmentLabel">Enrollment Successful</h5> where the <h5> ID had a misspelling.

1-21-2020

Third draft of the Free CE Credits screen. Planning now to link the green ENROLLED button to the actual CE course, new modal for successful enrollment that automatically closes after 5 seconds (or when the user clicks "OK"), added a statement about how many complimentary programs the user has enrolled in and how many they have left (#/5), and some minor text updates to say "CE" programs.

1-17-2020

Second draft of the Free CE Credits screen. This version proposes a screen alert for when the user reached the max 5 CE program limit, with the "disabled" enroll buttons. This way, the user won't have to click a button to see this message in a modal.

12-12-2019

First draft of the Free CE Credits screen.
Additions to the idemcss.css file to include the "dismiss" button (e.g., the "cancel" button used in modals) and also underlining anchors in modal body's (with text-decoration of "none" on hover) for improved legibility of links within modals.

10-1-2019

Tweaked the idemcss.css file to give a bottom margin to the .selectedAddressButton on the choose Address mockups.

9-23-2019

Final tweaks to International Addresses - Shipping Method screen.

9-20-2019

First draft of the International Addresses - Shipping Method screen. The mockup shows/hides either a US/US territories shipping or international shipping "Shipping Method" card based on what is selected in the Shipping Address Country dropdown. Extra jQuery validation has been added for these radio buttons to enforce a selection is made (something to think about is if we should default "Economy" to be selected, or do we want the user to consciously choose between "Economy" and "Guaranteed"?). And, for the purposes of the mockup, when you press the "Go to Payment & Review" button, the modal is triggered that would show up if "Economy" for international shipping is selected. This modal has validation that the checkbox is checked (additional tweaks to the jQuery validation on the page).
Note that the idemcss.css has been modified, especially for the radio button styles (the first time these have been used in this batch of mockups, similar to the custom CSS checkbox).

9-19-2019

Fixed CSS for .deliverButton on Addresses screens for mobile margins. Gave .modal-dialog some bottom margin (40px) so bottom buttons are more reachable on iPhone/mobile. (these changes were all done in idemcss.css)

9-18-2019

Fixed all 3 "choose address" screens to improve HTML validation of "radio button cards". (see the "Notes to Developers" comment above)

9-11-2019

First drafts of Link Accounts (no match on email, yes match on name) screen, which is 1 of 3 "older" screens and the only one needed in the new link account flow.

9-5-2019

First drafts of Shopping Cart Promotional Code Valid/Invalid Alerts screen, as well as showing promo code pricing on Addresses screen, Payment & Review screen, and Thank You screens.

8-21-2019

First drafts of "Link Accounts" screens.

8-20-2019

Reference page made for different "container card" sizes - middle container designs used for many IDEM screens. [UX Team container card examples found here.]

8-8-2019

New mockup to show options for Edit and Delete Shipping Address - If you click on the "Delete" buttons, there will be a confirmation prompt; if you click on the top "Edit" button for John Doe, you navigate to an Edit Shipping Address screen (now hidden in a folder for any future reference); and if you click on the "Edit" button for Sally Smith, a modal is launched to edit the specific shipping address.

8-8-2019

New mockup for Thank You screen for Guest Checkout with option for user to create an account.

7-30-2019

New mockup for Addresses screen where user logged in and alerted that they have access to the electronic products already, but can continue with their physical product purchase.

7-2-2019

Added the GradStudy IDM Coupon Code screens (input screen, invalid coupon code error screen, and valid coupon code thanks screen).
Also, added the GradStudy Coupon Code Redemption Email Template to this AWS bucket.

6-4-2019

Updated customized login screen mockups with new text/image for the Join Divisions custom login screen.

5-28-2019

Updated customized login screen mockups with new text/image for the Journal Ordering custom login screen.

5-20-2019

New mockup to show top error container for server-side error displays on (customized) login screens, using the Locator customized login screen as an example of a failed login attempt by the user.
New text for GradStudy customized login screen top description.

5-10-2019

More tweaks with styling of custom login screens (removed the line between the heading and custom text, made the image container smaller height, changed the HTML accordingly, including putting in placeholder images and changing headings to h2's since the h1 is the "Log In or Create an Account" link, whether displayed (DNA and JoF screens) or not displayed it should still get picked up by search engines, and either which way, the DOM will start with an h2 and be hierarchical.

5-6-2019

New sections added to all customized login screen mockups to accommodate conditional display of the "Create an Account" button and text for customized login screens which need this functionality: The customized login screens for Joining Divisions and Subscribing to Journals.

5-3-2019

New customized login screen for GradStudy.

4-17-2019

Took out the "check order status" link and sectioni on the AW Thank You page mockup.
First draft of AW Empty Cart screen.
First draft of AW Empty Cart - Already Have Access to AW screen.

4-10-2019

First draft of Log In or Create an Account screen.
Changed top nav on the Create an Account screen to be the "thin" header, and also removed the redundant heading within the form, as well as changed the "Register" button to "Create Account".

4-8-2019

Updated the Locator Custom Login Screen top section (image).

4-5-2019

Took out the ".hideForAW" class for the "Remove" link for the AW product on the AW Cart mockup. This is so the user is able to remove the product from their cart (essentially giving them an empty cart).
First draft of the customized Locator login screen. Note: This entailed changes to the idemcss.css screens, as well as the regular login screen, DNA custom login screen, and JoF custom login screen, all which have all the code but dynamically being shown sections via CSS.

3-26-2019

Initial drafts for the Check Order Status, Create Password, and Update Password screens.

3-25-2019

New "infoLightAlert" style added to MyAPA Alerts page.
Tweaks made to Create an Account screen.

3-22-2019

First draft of Create an Account screen ("regular MyAPA" skin).
Took out the APA Privacy Policy checkbox and label from the AW Address screen per Sree's input.

3-21-2019

Tweaks made to Look Up APA Account screen based on user tests.
Took out the "Academic Terms of Service" modals from all AW ecommerce screens and instead put in target blank links to https://academicwriter.apa.org/about/terms.

3-20-2019

Adjustments made to core CSS file for styling alerts. [UX Team alert examples found here.]
Second round of AW ecommerce screen changes completed.

3-18-2019

Finished templates for Academic Writer ecommerce screens. Next up: Need input from developers about these designs and if anything else is needed from the UX Team.

3-15-2019

Finished template for Academic Writer ecommerce screens. Next up: Will enrich HTML of the screens to hide/show elements as needed, after we hear of requirements from business.

3-14-2019

Finished cart screen with top alert for a logged-in non-member.
Started on Academic Writer ecommerce screens.

3-13-2019

Finished with the "Look Up APA Account" screen (includes new accordion pattern and initial jQuery validation, as well as "scroll to active panel" jQuery).

3-8-19

Initial screen designs ready for when taxes are listed in the Cart, Addresses, Payment & Review, and Thank You screens.
I added in the "Privacy Policy" box to all Addresses screens, including modified jQuery validation to give an error if the form is submitted without the checkbox being checked.

3-7-19

Proposed design posted for Payment & Review screen credit card alert—icon, heading, and multiple line error in unordered list.
Working on the screen variations for when after the "Calculate Shipping & Taxes" link is run.

3-6-19

Finished initial dessigns for customized my.apa.org Login screen template.

3-5-19

Working on customized my.apa.org Login screen template (join divisions and journal order custom login screens).

3-4-19

Working on regular my.apa.org Login screen.
Note: Frontend code for first round of scenario screens delivered to IDM team.

2-14-2019 to 3-4-19

Working on Cart and Address scenario designs.
First draft of "Guest Checkout" screen.
"Choose Shipping Address" radio button card design POC.

2-13-2019

Small tweaks: Took out text-transform (capitalize) on card captions, so "stop words" weren't capitalized; Fixed bottom margin on Thank You page; Double-coded the tax message on the Addresses screen like on the Payment & Review screen; Added favicon to all pages
Initial screen design for APA PsycNET Combo Package upsell card on Cart page design.
Note: Frontend code for 4 initial screens delivered to IDM team.

2-12-2019

Fixed all accessibility errors indicated by WAVE, including frontend form usability issues and color contrast issues.
Reconstructed the book donation sections on the Cart and Thank You pages.
Refined all screens per visual designer input, including new custom checkbox design, smaller progress indicator numbers, consistency with headings between screens, smaller bookcover images on Cart screen, closer book cover and item description alignment, etc.

2-11-2019

Finished POC with 4 major screens, including putting in all jQuery validation for Addresses screen. Next: Go through design critique with UI/visual designer.

2-10-2019

Began working on Addresses screen redesign.

2-9-2019

Beginning of complete UI redesign, including new fonts (Lato used for most text, ProximaNova for buttons, QuattroSlab for headings, etc.), new layout of Cart page, new responsive styles, "book donation" section, new alert styles, modified progress bar, etc. Note that the "Free Shipping" note in the gray part of the cart is failing color contrast accessibility. To be fixed in next design sprint.

2-1-2019

Changed the lighter green on the progress bar ("completed" class) to a darker green to pass color contrast accessibility.

1-30-2019

Changed the progress meter to have numbers inside the bubbles, and also have the labels disappear at screen widths 760px and below. (changes to both CSS and HTML)

1-22-2019

Fixed all color contrast accessibility errors (e.g., new CTA button colors), as well as all accessibility errors identified through WAVE (e.g., form label issues, alt text, empty table header errors, etc.).
To make mockups ready for user testing: Commented out the real "submit order" button on the Payment & Review screen and put in anchor link for button to link to Thank You page.

6-26-2018

Changed button text to describe checkout flow better.
Changed Norton trust seal to a local image so it shows on mockups better.

3-6-2017

Initial 4 screen proof-of-concept.