ITS UX Prototype Directory

E-commerce Checkout Process Redesign 2024

• Base Screens:
  • Cart page Current
  • Checkout page Current
  • Thank You page Current
• Scenarios:
  • All Scenarios
  • Cart Scenarios
  • Checkout Scenarios
  • Thank You Scenarios
  • Promo Code Messages
  • Validation functionality
  • Email Scenarios

---

Edit Profile Address Verification

• MyAPA Edit Profile
• ACW Edit Profile

---

IDEM Registration Screen Mockups 2023

• ACW - Direct
• ACW - IP

---

IDEM Outage Mockups 2023

• Outage - Generic
• Outage - CoA Portal - (from 5-14-2024 request from the INDC Team)

---

GradStudy Phase 1 Mockups 2023

• Header Redesign
• Non-Logged-In FAQ
• Logged-In FAQ
• Participating Programs

---

Email Verification Phase 1 Mockups 2023

View all email verification screens, emails, and messaging:

---

E-commerce Promo Code redesign 2023

• Addresses and Payment & Review page mockups
• Thank you page mockups
• Order Email confirmation

---

One-time code Login Mockups 2023

View all one-time code login screens:

---

View IDEM mockups for the MyAPA ecommerce screens, login screens (including custom login screens), create account screens, link account screens, supplemental materials screens, CE credit screens, Academic Writer ecommerce screens, GradStudy IDEM Coupon Code screens, and more.

---

ACW–IDEM Mockups

View (older) IDEM mockups for Academic Writer (and the older APA Style CENTRAL), including screens for access codes and direct purchases, login screens, legal agreeement screens, LTI account creation screens, look up account screens, edit profile screens, and more.

View newer IDEM mockups for Academic Writer using a base of Bootstrap 5 and the IUX Pattern Library CSS. So far, this set of screens includes boilerplates and ACW marketing site login, register, and forgot password screens.

---

BS5–IDEM Mockups

Mockups in progress, includes new Convention login/registration screens...

---

NMA–IDEM Mockups

---

MyAPA Home Portal Mockups

For usability testing: MyAPA Home Portal, edit profile, research alerts, CE, and purchases screens, current as of 5-5-2022.

Other MyAPA Home Portal POCs

• MyAPA Research Alerts screen - Cross-linking changes to modal and text to mention Polaris alerts

---

Other IDEM-Related Mockups

Supplemental Materials Delivered

• Request Form - Has APA Account, no entitlement
• Request Form - No APA Account, no entitlement
• Custom Login Screen
• Email Template Email
• No Access

Email Verification (Includes Email Templates)

MyAPA Alerts (old)
• Verify Email Template Email
• Confirm Email Change Template Email
• APA Welcome Email Email

Convention / IDEM

• 2019 APA Convention Combo Login / Register Screen

Email Order Confirmation (Includes Email Templates)

• Order Confirmation Email

---

PsycNet Login & Janus

• PsycNet Individual Login - V2 DELIVERED
• PsycNet Individual Login - V1
• PsycNet Institutional Login - Top Alert
• PsycNet Institutional Login - Within Card Alert
• Email with PDF Download Link for Article

Survey Alert

• Survey Alert

Landing Page

• Landing Page
• Landing Page (Lato Font)

Journal Admin On Hold

• Add
• Edit
• Landing

NMA Thank You pages and email

• NMA Thank You page - Successful Membership
• NMA Thank You page - Ethics Review
• NMA Thank You email

Hivebrite

• Community.apa.org temporary landing page

Fellows Database

• Fellows Database Mockup

Commenting System

• Commenting System Mockup Delivered
• Commenting System Admin HTML (TinyMCE 7)
• Commenting System Welcome Page


• Old version(s):
  • Commenting System Admin HTML (TinyMCE Cloud)

Awards

• Awards - Landing
• Awards - Service All Stars
• Awards - Core Values
• Awards - Raymond D. Fowler Award
• Awards - Help

Salesforce Preference Center

• Salesforce Preference Center Mockups - Round 7 - Unsubscribe visibility changes with bottom "global opt out" text, confirmation modal, and confirmation page; "APA PsycInfo" (marketing emails) card changes (press the "Publishing" filter to see this card)
• Salesforce Preference Center Mockups - Round 6 - New designs for the top of the page (button locations); Global opt-out = true alert design
• Salesforce Preference Center Mockups - Round 5 - Iterating the designs from Round 4
• Salesforce Preference Center Mockups - Round 4 - Iterating the designs from Round 3
• Salesforce Preference Center Mockups - Round 3 - Iterating the designs from Round 2
• Salesforce Preference Center Mockups - Round 2 - Iterating the designs from Round 1
• Salesforce Preference Center Mockups - Round 1 - Unsubscribe and Subscribe/Explorer views; Quick subscribe; Save all preferences page; Unsubscribe confirm successful page; Test designs (including the "double modal" POC)

Redesign (2019)

• Frontend - V1
• Admin - V1
• Frontend - V2
• Add to Cart Modal

Phase II (Improvements)

• Frontend - V2
• Address Verification - Suggestion
• Address Verification - No Match

Tests

Prototypes with realistic content and images. Can be used for usability testing.

• Test - V1 - Contains items discussed for Phase II
• Test - V1.1 - Different options for the book card
• Test - V1.2 - Changed "checkout" to "request" and book card layout
• Test - V2 - Explored different names for "add to cart" and "checkout"

Accessibility & Address Verification POCs

• Standard Flow
• Address Verification - Suggestion
• Address Verification - No Match

Mastering APA Style Digital Product

• Mixed Cart Delivered
• Digital Added First
• Digital Added First - Request + Edit Modal
• Print Added First
• Landing Page - Featured Book

E-Book redesign - June 2022

• Admin Interface
• Landing Page

Password Reset (previously SSPR)

• Password Reset DELIVERED

CAS Field Tests

• CAS Instructor Info POC - Checkbox that when checked displays additional fields
• CAS Google Places API POC - Note: Works well in Chrome and on an iPhone; Not working with Firefox

Membership Directory Tests

• Membership Directory - Location Fields POC - V1 - Search by Location - Dynamic Country > City with Multiselect State/ZIP Code OR Province/Postal Code OR None
• Membership Directory - Location Fields POC - V2 - Search by Location - Dynamic Country > Locator Autocomplete ZIP/City-State OR Postal Code/City-Province OR None
• Membership Directory - Location Fields POC - V3 - Search by Location - Regular Input Fields - Dynamic Country > City/State/Zip OR City/Province/Postal Code OR None

Commenting System

• Commenting System - Repeating form fields with modals (accessible)

Academic Writer

• Academic Writer - Write Center Bottom Pane POC (V2)
• PWA Grammar Check Popups (accessible)

APA PsycNet

• APA PsycNet PsycArticles full-text HTML toolbar mockups (BS3)

GradStudy

• GradStudy responsive bottom cards - 3 cards on desktop
• GradStudy responsive bottom cards - 4 cards on desktop
• GradStudy responsive pricing table
• GradStudy Multiselect Test
• GradStudy banners
• GradStudy session management POC designs

Material Design

• Material Design + Bootstrap 4 Floating Labels Form Fields Test - V1

Checkbox Examples

• CAS "Make Request" Screen - With "I am filling out this request on behalf of an instructor" checkbox that when checked, toggles open Instructor Name fields along with note alert
• IDEM Ecommerce Addresses Screen (BS3) - With "Same as shipping address" checkbox that when checked, toggles close the Billing Address fields
• Polaris User Feedback Form with Checkbox Showing Hidden Div - With "Please follow up with me" checkbox that when checked, toggles open contact fields

Radio Buttons Examples

• Form Test with Radio Buttons Dynamically Showing Checkbox Section All With Validation - V1 - "No" radio button default
• Form Test with Radio Buttons Dynamically Showing Checkbox Section All With Validation - V2 - "Yes" radio button default
• Form Test with Radio Buttons Dynamically Showing Checkbox Section All With Validation - V3 - "Other" field always exposed and optional; Validation that at least one checkbox OR input in text field
• Form Test with Radio Buttons Dynamically Showing Checkbox Section All With Validation - V4 - Same as V3 but with "switch" designDelivered
• Polaris User Feedback Form with Radio Button Dynamic Display - When "System Bug" or "Export/Email/Print" radio button options are checked, then a div is shown, otherwise that div is hidden
• Radio Button Card Design - IDEM "Choose Shipping" Fields - Note that the live site is accessible (fully), and the mockups are too (at least in WAVE), but there may be issues with the mockup accessibility that haven't been updated
• Radio Button Card Design - ACW-IDEM Choose Purchase Option Design

Modal Examples

• Older Salesforce Preference Center Design with "Double-Modal" Functionality - Click on the "Opt Out From All of These Emails" link at the bottom, then "Confirm" on the first modal to then navigate to a second modal

Accordion Examples

• Polaris Record Display Page Accordion Example
• IDEM "Look Up APA Account" Screen Accordion Example (BS3)

Adding and Removing Controlled Select List with Ability to Add Other Topic to List

• Polaris Sign-Up Form POC with using Select2 Library for Controlled List and Ability to Add Other Value to List

Adding and Removing Tags Example

• Polaris Sign-Up Form POC with Adding and Removing Tags Design

Adding and Removing Free-Text Input Fields Example

• Polaris Sign-Up Form POC with Adding and Removing Free-Text Input Fields Design

Attach Screenshots Example (Responsive)

• Polaris User Feedback Form with "Attach Screenshots" functionality

Isotope Examples

• Polaris "Explore All Notifications" Isotope Screen - With active sort option only showing fontawesome icon scriptLABS Bucket
• Salesforce Email Preferences Screen

Pagination-Related Examples

• Polaris "Cited By" Fullscreen Modal with Pagination Controls - Using Flexbox to responsively order the "Results per page", results count, and pagination controls

Feature Tour Examples

• Highlighting New Features - POC - Version 3 - Top, Dismissable Alert on Small Devices - Bootstrap Tourist on Large Devices - Note that on devices with a viewport width <767px, a top, dismissable alert will be displayed, while on devices with a viewport width >767px, the Bootstrap Tourist will be initiated and the top-right "restart tour" info icon will be displayed. When testing this on a browser, you will have to clear out the Local Storage for the Bootstrap Tourist at each breakpoint when checking, as there is a media query approach to initializing the Bootstrap Tourist script only on larger devices.
• Highlighting New Features - POC - Version 7 - New Features Carousel Modal - Highlighting New Features - POC - Version 7 - New Features Carousel Modal

Validation Examples

• Validation that all 3 checkboxes need to be checked to pass (jQuery Validate)
• US phone field validation example (jQuery Validate)

Ringgold Patterns

• Ringgold Design on CAS (button group to first choose US or Canada, then dynamic State > City > Institution Name fields)
• Ringgold Design on ACW Educator Trial Access screen (with US as only Country option, then dynamic State > City > Institution (Name) + Department field)

Datatables

• Public Commenting System Admin Portal - Welcome Page - Datatable with Month-Day-Year sorting (due to moment.js integration) - Responsive Bootstrap 5 example (Bootstrap 5 datatable CSS with PL2.0)
• Participating Programs (GradStudy) - AJAX/JSON driven datatable with "Degree Level" dropdown filter, sortable columns, "Reset All" link; (Bootstrap 4 datatable CSS with PL1.0)
• Datatable within page (Polaris) - AJAX/JSON driven datatable with 2 columns not sortable, moment.js month and year sorting, "Unfollow" button in an "Actions" column that launches a modal to unfollow a journal row which then deletes that rows; (Bootstrap 4 datatable CSS with PL1.0)
• Datatable within page (Polaris) - Shows datatable with numerical date, all columns sortable, datepicker, "Content Type" dropdown filter, tools (Copy, CSV, Excel, Print, Column Visibility), "Reset All" link; (Bootstrap 4 datatable CSS with PL1.0)
• Full-screen Modal with Datatable (Polaris) - Click on the "View All Updates" button to launch the modal; Shows datatable with numerical date, all columns sortable, datepicker, "Content Type" dropdown filter, tools (Copy, CSV, Excel, Print, Column Visibility), "Reset All" (might not be working within modal); (Bootstrap 4 datatable CSS with PL1.0)

Miscellaneous Patterns

• Polaris Date Picker Example - Example date picker with day, month, and year LABS Bucket
• "Tree List" Design for Year Directory Listing - Click on the "Past Notifications List" LABS Bucket
• Salesforce Email Preferences Center - Floating "Save" Button - Top-right floating "Save" button on desktop and centered bottom button on mobile LABS Bucket

Proof-of-Concept Boilerplates

• Bootstrap 5-based Simple Branding Boilerplate - Using the IUX PL 2.0

Email Boilerplates

• Vistaprint responsive email templates - Newsletter, promotional, and personal notification email templates in blue, green, orange, red, and violet themes; View documentation Email - Directory
• Cerberus Fluid Boilerplate - Good for simple layouts such as transactional and single column emails.; View documentation Email
• Cerberus Responsive Boilerplate - Good for more complicated, shape-shifting email layouts that work on some mobile clients.; View documentation Email
• Cerberus Hybrid Boilerplate - This template uses a hybrid approach to reconfigure the layout for different screen sizes for email clients regardless of media query support.; View documentation Email
• Responsive Email Template - Email Inlined - A simple responsive HTML email template with a clear call-to-action button.; View documentation Email
• HTML Email Boilerplate - With Comments - Use this code example as a guideline for formatting your HTML email to avoid some of the major styling pitfalls in HTML email design. You may want to create your own template based on these snippets or just pick and choose the ones that fix your specific rendering issue(s).; View documentation Email
• HTML Email Boilerplate - Without Comments - Use this code example as a guideline for formatting your HTML email to avoid some of the major styling pitfalls in HTML email design. You may want to create your own template based on these snippets or just pick and choose the ones that fix your specific rendering issue(s).; View documentation Email
• Resource: Collection of Responsive Email Patterns - Includes email components such as accordions, grid blocks, layouts, lists, media, and navigation