Marine Online
STACK · Figma · Adobe Creative Cloud · Sketch§ 01Context
Marine Online is the day-to-day administrative and self-service portal serving over 750,000 active-duty Marines, retired Marines, and support personnel worldwide. It runs on government infrastructure and is used in garrison and deployed environments, frequently on phones, frequently on variable connectivity.
§ 02The problem
The platform had remained largely unchanged for over a decade. Fragmented architecture, inconsistent navigation, and outdated visual design created friction in mission-critical tasks: personnel management, leave requests, family readiness, secure messaging. The redesign had to modernize the platform while preserving DoD security compliance and full functionality across both garrison and deployed contexts.
§ 03Approach
- 01
Conducted onsite UX research at a Marine Corps I&I station with active-duty Marines and senior enlisted personnel. Used the findings to reframe the product around tasks Marines actually run, not the org chart.
- 02
Built journey maps and flows for realistic operational scenarios: drill weekend, deployment prep, post-PCS family settlement. Validated wireframes against operational conditions.
- 03
Restructured information architecture around mission-readiness tasks rather than departmental groupings.
- 04
Established a comprehensive design system, including typography, color, and components, to keep the redesign consistent across surfaces and durable across future scope.
§ 04Selected artifacts
Artifacts shown below are placeholders. Cleared, sterilized screens will be supplied for each.
HI-FI
HI-FI
PATTERN
DESIGN SYSTEMThe Marine Corps Technology Services Organization (TSO) adopted the design system as the standard for current and future Marine Online digital initiatives, extending the impact well beyond the original program scope.
§ 06Reflection
Designing for service members is a clarifying constraint. Latency, glove use, sun glare, and operational stress are not edge cases. They are the design surface.
