Explore IUX Mockups
AI Tools - AI POCs
- CARE Prompt Builder - Generated by Claude
APA Labs Connect Forms
ASM/ACW Janus Login Screens for IDEM
Auto-Renew POCs
Awards
C3/C6 E-commerce Updates
CAS Accessibility & Address Verification POCs
CAS E-book Redesign
CAS Mastering APA Style Digital Product
- Mixed Cart
- Digital Added First
- Digital Added First - Request + Edit Modal
- Print Added First
- Landing Page - Featured Book
CAS Redesign Phase 2
CAS Tests
Commenting System Admin
Commenting System Portal
Commenting System Welcome
Continuing Education (CE) BeaconLive to Docebo IDEM email
Continuing Education E-commerce Checkout Updates
- Cart Scenario 1 - User adds item and then bundle
- Cart Scenario 2 - Not Logged In User adds items, logs in and has entitlement to all items in cart
- Cart Scenario 3 - User adds items and then the Unlimited Plan
- Cart Scenario 6 Option 1 - User had a Live event in their cart but it is after the event start time, so we remove the item
- Cart Scenario 6 Option 2 - User had a Live event in their cart but it is after the event start time, so we replace the Live item with the On-Demand version
- Checkout Scenario 1 - Not Logged In User adds items, logs in and has entitlement to some items in cart but not all (includes additional On-Demand/Webinar questions)
- Checkout Scenario 2 - User who has previously purchased a CE product and answered the required questions
- Thank You Scenario 1 - Include required questions and answers
- Email Scenario 1 - Include required questions and answers
- Messages to send back to Tridion
- Additional Potential Scenarios:
Council Policy Manual Chatbot - AI POCs
Course Adoption System (CAS) Redesign
E-commerce Checkout Process Redesign
- Base Screens:
- Cart page Current
- Checkout page Current
- Thank You page Current
- Scenarios:
E-commerce Promo Code redesign
Edit Profile Address Verification
- MyAPA Edit Profile - Note that this mockup is also showing the link to Salesforce "Manage Print Subscription Addresses"
- ACW Edit Profile - Note: Press the "Save Changes" button to see the address verfication modal
Elected & Appointed Leaders (EAL) Database Redesign (aka, "Governance Database")
Elections Portal Redesign
Email Verification Phase 1 Mockups
Event Registration E-Commerce
- Cart
- Checkout
- Thank You
- Order Confirmation Email
- Live Event Order Confirmation Email
- Live Event Followup Email
- Multiple Events within a single order confirmation email
Fellows Application
Fellows Database
GradStudy Phase 1 Mockups
Hivebrite Landing Page
IDEM 5-Free CE Credits (CE Corner Enroll) redesign
IDEM Lookup Account Screen Mockups
IDEM Outage Mockups
- Outage - Generic
- Outage - Planned Maintenance
- COA Portal Outage - Note that the CSS file here is all internal to the page
IDEM Registration Screen Mockups
IDEM/ASM (PMI) Login Screen Mockups
Mockup File Directory - Boilerplate
- Mockup File Directory Link (Note: Directory will only show when "local".)
MyAPA - AI POCs
- MyAPA Home Portal AI POC - 3 - Claude - Generated by Claude; Includes a collapsible left menu; "Explore APA" changes; Order History page; etc.
- MyAPA Home Portal AI POC - 2 - Claude - Generated by Claude; Includes an apps page, working search bar, and links to the sites; Click "Explore APA" in the left nav
- MyAPA Home Portal AI POC - 1 - Claude - Generated by Claude; Note: Click "Sign In" to see CE, Recent Orders, Research Alerts, and Quick Links
- MyAPA Home Portal AI POC - Figma Make - Generated by Figma Make
Organization: I work for the APA and I need a site to manage members
Project Background: membership portal
Current Task: to show the benefits of membership
Audience: members and the general public
Research Findings: most users are non-members
ASK:
Role & Expertise: I am a senior UX designer with 20 years of experience
Type of Output: an interactive prototype with HTML, CSS, and JS
Goals: a place where a user can manage their relationships with APA, see their order history, see their continuing education courses, set up research alerts, and more
Steps: make an accessible responsive portal site
Requirements: coded prototypes
RULES:
Best Practices: WCAG 2.2 AA compliant, responsive, using Bootstrap 5
Style Guide (Content): professional
Style Guide (Visual): use patterns from https://pattern.apa.org
Limits (Design): try to use Angular
Format: the format should be an interactive clickable prototype
MyAPA Mockups (circa 2017) Used for Usability Testing
- MyAPA Home Portal - Member View - Used for usability testing
- MyAPA Home Portal - Non-Member View - Used for usability testing
NMA Thank You pages and email
One-time code Login Mockups
Password Reset (previously SSPR)
PPD Demographics Questionnaire
Pre-Order E-commerce Messaging Improvements
- Cart with Pre-Order item
- Checkout with Pre-Order item
- Thank You page with Pre-Order item
- Email after purchase with Pre-Order item
Print Journal Subscription Address Changes
PsycInfo (Polaris)
Polaris Email Templates - Initial Designs (2020)
- Consumer v1 Email
- Consumer v2 Email
- Consumer v3 Email Delivered
- Professional v1 Email
- Professional v2 Email
- Professional v3 Email
- Professional v4 Email Delivered
Polaris Email Templates - Notification Email Redesigns (10-2021)
- Professional v5 - Light Notification Theme Email
- Professional v6 - Purple Notification Theme Email
- Professional v7 - Purple Ads Theme Email
- Professional v8 - Gray Alternating Sections Email
- Professional v9 - Branded Color Sections with White Text Containers - v1 Email
- Professional v10 - Branded Color Sections with White Text Containers - v2 Email
- Professional v11 - Branded Color Sections with White Text Containers - v3 Email
- Professional v12 - White Theme - Older Header and Footer Design Email
- Professional v13 - White Theme - Newer Header and Footer Design Email
- Professional v14 - White Theme - Newer Header and Footer, Smaller Hero Email
- Professional v15 - White Theme - Newer Header and Footer, Smaller Hero, Ad Up Top Email
Polaris Email Templates - Ads Email Redesigns (10-2021)
- Ads v1 - Light Theme Email
- Ads v2 - Branded Colors Theme Email
- Ads v3 - Simple with New Footer Design - Larger Top Section Email
Polaris Email Templates - Integrating in PubMed Content (6-2022)
PsycNet 4 POCs
- Mockups Landing Page - Includes AI Insights designs, Semantic Search ideas, Search Results page, etc.
PsycNet Epub Button Placement
PsycNet Journal Admin
PsycNet Landing Page
PsycNet Login & Janus
- PsycNet Individual Login - V2
- PsycNet Individual Login - V1
- PsycNet Institutional Login - Top Alert
- PsycNet Institutional Login - Within Card Alert
- Email with PDF Download Link for Article
PsycNet Search Results Page
PsycNet Survey Alert
Salesforce Preference Center
- Salesforce Preference Center Mockups - Round 7
- Salesforce Preference Center Mockups - Round 6
- Salesforce Preference Center Mockups - Round 5
- Salesforce Preference Center Mockups - Round 4
- Salesforce Preference Center Mockups - Round 3
- Salesforce Preference Center Mockups - Round 2
- Salesforce Preference Center Mockups - Round 1
Basic BS5 PL2.x Boilerplate
- Basic BS5 PL2.x Boilerplate (Note: Used for sending to vendor about our basic styles, all with internal CSS and SVG logos.)
Council Policy Manual Search Widget POC
- Council Policy Manual Search Widget POC - Search widget from Council Policy Manual page on www.apa.org along with a Browse link for the Council Policy Manual
Boolean Search Toggle POCs
- Boolean Search Toggle POC - V1 - Generated by Claude
ACT Training Emails
- ACT Training Certification Approved
- ACT Training Certification Denied
- ACT Training Re-Certification Approved
- ACT Training Re-Certification Denied
Additional Information
IUX Links
Mockup Directory (old directory.html)
Beadams Labs Bucket files (old mockups) - Note: Directory will only show when "local"