ITS UX Prototype Directory

A collection of prototypes and frontend mockups created by the IUX Team.

Last Updated: 07/10/2024
Go to the Newer IUX Team Index Page
IDEM
E-commerce Checkout Process Redesign 2024

Edit Profile Address Verification

IDEM Registration Screen Mockups 2023

IDEM Outage Mockups 2023

GradStudy Phase 1 Mockups 2023

Email Verification Phase 1 Mockups 2023

View all email verification screens, emails, and messaging:


E-commerce Promo Code redesign 2023

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


Other IDEM-Related Mockups

Supplemental Materials Delivered

GradStudy Coupon Codes (old, see IDEM-Ecommerce Mockups (BS3) for newer designs)

Email Verification (Includes Email Templates)

Convention / IDEM

Email Order Confirmation (Includes Email Templates)

Salesforce

Salesforce Preference Center

Course Adoption System (CAS)
Redesign (2019) Phase II (Improvements) 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 Mastering APA Style Digital Product E-Book redesign - June 2022
Network Security Engineering

Password Reset (previously SSPR)

Miscellaneous Mockups & POCs

CAS Field Tests

Membership Directory Tests

Commenting System

Academic Writer

APA PsycNet

GradStudy

Material Design

Cool Patterns for Reference

Checkbox Examples

Radio Buttons Examples

Modal Examples

Accordion Examples

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

Adding and Removing Tags Example

Adding and Removing Free-Text Input Fields Example

Attach Screenshots Example (Responsive)

Isotope Examples

Pagination-Related Examples

Feature Tour Examples

Validation Examples

Ringgold Patterns

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

Boilerplates

Proof-of-Concept Boilerplates

Email Boilerplates

Helpful Links
Have a request?

Send us an email at ux-services@apa.org