Marines.mil Website

UX / UI for the official website of the USMC

Marines Website in Desktop and Mobile Devices

The Challenge

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.

*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
Marines Color Swatches
New Icon Set
New Text Style
Marines Typography — Colossalis and Arial Fonts

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.

  • Next ProjectID.me

Talk
Join
Find
Connect

Let’s talk about your next big idea.
Come by and say hi! Coffee’s on us.
Join our team of talented creatives.
Stay connected with Punch.


703-721-3933
2700 S. Quincy Street, Suite 220
Arlington, VA 22206