Marines.mil is the official website of the USMC. It’s one of only a handful of .mil properties, managed by Defense Media Activity (DMA), a branch of Defense Information Systems Agency (DISA). For active duty Marines, their families, and former Marines, the Marines.mil website is the primary resource for news, updates, administrative announcements and information from Marines across the world. As opposed to the Marines.com website, which is focused on recruitment, Marines.mil directly serves current and former Marines and their families. Prior to the refresh, the site presented serious UX challenges, and offered a dated, web 2.0 design. It was time for a change, and DMA leaders turned to Punch as the partner to design the site’s next generation.
Marines.mil Website
UX / UI for the official website of the USMC
The Challenge
*Note, the “lorem” text in designs above is intentional to demonstrate font style.
The Backstory
Punch worked as a subcontractor to the prime PnAutomation on the project. We led user experience (UX) and user interface design (UI) with the prime contractor handling front-end code, and DMA personnel providing development and integration with DoD’s enterprise content management system.
Our approach was iterative and process-driven. First, we worked through a comprehensive wireframe prototype to ensure every user flow was planned and documented, and every experience was tested for ease of use. Then, we proceeded to design an experience that conveyed a modern, high-tech aesthetic. We designed all variable pages, interactions, empty states, as well as a sandbox system for the developers as a resource. In addition, while working through design, we had the opportunity to create video intro/outro content that is now used daily on the “Marine Minute” series – a web series viewed thousands of times a day.
Quick Facts
- Design strategy and planning
- Website UX and UI design
- Interaction design
- Creation of design prototypes
- Video production
Completing the Vision
The Marines brand is very well defined and documented. Yet even so, we were able to introduce new elements that have since become a part of the visual identity, such as new icons and photographic style. The result is an evolved identity that is still true to the iconic brand.
New Color Palette
New Icon Set
New Text Style
Results
Marines.mil highlights DMA’s commitment to digital innovation
The revitalized Marines.mil website launched in the summer of 2019, providing Marines with a massively improved user experience, a streamlined and modern design, and a far more versatile resource for staying up to date on Marines life. The site – like the Marines it serves – leads the way with a cutting-edge design and interactivity far beyond the .mil sites of the other branches. The step forward marks an important advancement for the USMC in embracing digital media as a powerful internal communications tool. The Marines.mil website launch follows Punch + PnAutomation’s successful partnership on the MarinesMobile(r) app, further highlighting DMA’s commitment to digital innovation.
”The revitalized Marines.mil delivers an improved user experience, a streamlined and modern design, and a far more versatile resource for Marines and their families.
