Before
Disconnected tools and fragile drafts
- Upload images in a separate shared media manager
- Leave the content management system to search other military websites
- Risk lost changes or conflicting draft versions
Defense Media Activity · 7-month pilot
Creating an accessible, reusable publishing system for more than 1,000 defense websites
I led research, interaction design, and accessibility work for an Adobe Experience Manager (AEM)-based publishing pilot serving five military stakeholder groups.
- UX research
- Interaction design
- Accessibility
14
Stakeholder sessions
5
Publishing environments
17
Reusable components
3
Site themes prototyped
Project overview
A shared platform had to support distinct publishing teams
The challenge
Defense.gov, Marines, Navy, Army, and Coast Guard teams used different components and authoring patterns. The pilot needed to standardize the experience without erasing each site’s identity—and it had to meet Section 508 accessibility requirements.
My role
As part of a four-person experience team working in an Agile pilot, I planned and synthesized research, designed and prototyped components and templates, documented decisions, and partnered with Adobe accessibility specialists, stakeholders, developers, and testers through iterative delivery.
Research
Researching five publishing environments
Across 14 stakeholder research and walkthrough sessions, I captured the notes, organized the minutes, and synthesized patterns across five stakeholder groups.
Groups represented directly in research
- Defense.gov
- Marines
- Navy
- Army
- Coast Guard
This order reflects how frequently we met with each group, not an alphabetical list.
From research to requirements
Reducing friction in the authoring workflow
Research revealed avoidable tool switching, weak image discovery, and version conflicts that could cause authors to lose work.
After
Proposed AEM authoring flow with Defense Visual Information Distribution Service (DVIDS) integration
- Choose DVIDS images within the authoring flow
- Search relevant imagery without leaving an article
- Use AEM version controls to reduce lost or conflicting work
Reusable publishing architecture
Building governed, reusable foundations without flattening each site’s identity
Using the U.S. Web Design System (USWDS) as a foundation, we established shared interaction, accessibility, documentation, and governance rules while allowing each site to retain a distinct visual theme.
Article carousel
Shared behavior, themeable presentation
Tabbed content
Responsive navigation patterns
Search + filters
Consistent query and result behavior
Interaction + focus states
Documented accessible states
17 reusable components
Designed for the pilot.
2 publishing templates
News lists and articles.
3 visual themes
The same underlying news components supported Marines.mil, Defense.gov, and a branch-neutral direction.
Architecture example
The carousel shows how shared governance scaled across five sites
Rather than treating the carousel as an isolated UI fix, I used it as one example of the platform’s broader governance model: research identified inconsistent behavior, shared accessibility and UX rules defined the core component, and themeable presentation preserved each site’s identity.
One governed component, two content variants
- Shared interaction and accessibility rules across sites
- Image + text and text-only variants for editorial needs
- Theme tokens preserve each site’s visual identity
- Documented behavior supports authors, developers, and testers
The reusable architecture separated governed behavior from themeable presentation—a pattern applied across the broader component library.
Research translated into reusable requirements
Comparative analysis across five publishing environments produced a configurable capability model rather than one fixed presentation.
Content model
- Title, up to 59 characters
- Description, up to 422 characters
- Call to action, date, photographer credit, and sharing controls
Image behavior
- No link, gallery-page link, or lightbox
- Details available on hover and keyboard focus
- Large-background-image variant
Navigation and state
- Supports 3–18 items
- Previous and next controls
- Total items and current position
- Selectable indicators, thumbnails, or headlines
- Direct links and optional continuous navigation
Responsive behavior
- Swipe navigation on mobile
- Visible previous and next controls
- Selectable position indicators
- Content and controls adapt to the available width
Playback and accessibility
- Optional slideshow with a 5–10-second interval
- Visible pause and play controls
- Keyboard-operable navigation
- Accessible control names and visible focus states
- Hover information also available through keyboard focus
Iteration under constraints
Balancing usability, accessibility, and feasibility on mobile
We compared three approaches to dense tab navigation. The decision weighed user comprehension, keyboard and touch behavior, and what authors could reliably build in AEM.
01
Accordion
Usable, but difficult for authors to build
02
Expanded menu
Easier to build, but confusing in use
03
Horizontal scrolling tabs
Usable and feasible—selected direction
Section 508 accessibility
Accessibility was part of design and delivery—not a final check
I incorporated automated and manual testing across desktop, tablet, and mobile, including keyboard and screen-reader evaluation. We collaborated with Adobe accessibility specialists and tracked Web Content Accessibility Guidelines (WCAG) issues through Jira.
- Design with accessible patterns
- Review with Adobe accessibility specialists
- Test keyboard and screen-reader behavior
- Track WCAG issues and retest in Jira
Pilot outcome
Pilot work accepted for continued development
The pilot produced reusable AEM components, publishing templates, accessible interaction patterns, and three themed prototypes: Marines.mil, Defense.gov, and a branch-neutral, USWDS-like theme demonstrated with synthetic Smoky Mountain National Park content. The work was accepted for continued development under a follow-on contract. Because another contractor assumed the next phase, I cannot verify whether the public sites currently use the pilot’s AEM design system.
Reusable foundation
Shared news-list and article components support three distinct site themes.
Reduced-step workflow
The proposed AEM and DVIDS workflow was designed to reduce tool switching and duplicate entry.
Follow-on continuation
Pilot work was accepted for continued development under a follow-on contract.
“Stephanie is a 508/accessibility SME [subject-matter expert], a great UX Designer, a tester, and a developer. Stephanie’s willingness to jump in is very valuable when staffing a small project.”
Contact
Need a researcher-designer for a complex public-sector system?
Let’s talk about enterprise modernization, accessible workflows, or responsible AI.
snaggums@gmail.com