Apply Design Principles & Best Practices to your Journey

Modified on Wed, 6 Aug at 5:29 AM

This article outlines best practices for designing accessible and consistent journeys in Momenta. Following these principles ensures your programs are inclusive, structured, and easy to manage — for both participants and content authors.



Accessibility Guidelines (WCAG 2.0 AA)

Momenta adheres to WCAG 2.0 AA standards to ensure accessible design for all users. You should follow these when building your content:

  • Color Contrast: Must meet a minimum 4.5:1 ratio – check using WebAIM Contrast Checker
  • Alt Text: All uploaded images must include descriptive alternative text
  • Keyboard Navigation: All components should be fully navigable and closable via keyboard
  • Heading Hierarchy: Use structured H2/H3 headers to guide screen reader flow
  • Form Fields: Inputs like radio buttons and selection blocks should include descriptive labels
  • Disable Autoplay: Avoid auto-playing videos for accessibility and user control
  • Non-text Alternatives: Include captions or descriptions for any visual-only content


Mobile & Print Optimization

Mobile Use:

  • Not all blocks are fully mobile-optimized (e.g., Carousel backgrounds)
  • Test journeys on mobile to confirm layout and readability
  • Design with vertical stacking in mind for smaller screens

Print Styles (Jul 2025 Update):

  • Accordion blocks now automatically expand when printed
  • Navigation menus and UI elements are removed in print view
  • Use print-ready pages (e.g., for Micro Video Guides or Summary Sheets)

Assignment Table (Jul 2025 Update):

  • Assignment table now supports responsive formatting for mobile
  • Improves mobile usability for team leads and cohort managers


Continuity Best Practices

Consistency helps participants understand structure and anticipate flow. Use these practices:

  • Mirror page structure across similar activities (e.g., all videos use same header layout)
  • Use templates when possible — makes reuse and revisions faster
  • Establish naming conventions for folders, content objects, and themes
  • Reuse layouts and structure when cloning or scaling programs

Wireframe Templates: Coming soon — this section will link to downloadable layout kits for rapid journey setup.


Workflow Tips & Authoring Efficiency

  • Replace images via Media Library: Navigate to the Media tab, find the asset, and upload a replacement — faster and cleaner than uploading in-place
  • Copy blocks or multi-column structures: Use the copy button to quickly duplicate layouts, especially when templating
  • Copied blocks go to the bottom of the page: Drag them into position as needed
  • Use Nav/Page Builder early: Plan your menu layout before content is finalized


Visual Aids

  • Alt Text Field in Image Upload


  • Print-Optimized Accordion Expansion


  • Assignment Table - Mobile View Update



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article