The U.X. of A

User Experience Insights from the Home Pages of Our U.S. Military

By: Marc Acton, Associate Creative Director

You think it’s tough for you to attract new customers? What if signing up for your product or service meant that your customers could potentially have to move across the country at the whim of the government, possibly leave home for a year or more at a time, and maybe even get shot at one day? Now THAT is a challenge!

That makes a case study of military service marketing fascinating. Today, we’re taking a look at some User Experience (UX) elements from the best home pages of our military branches, with a little bit of discussion about User Interface (UI) thrown in for good measure.

And while we’re at it, we’ll identify four principles that you can take from these sites—no matter what you’re selling.

Marines.com—Differentiate with Aggression

Screen Shot 2018-03-27 at 12.29.57 PM.png

Marines are alpha types, almost without exception. These men and women have some relentless thing inside that drives them. It’s a defining characteristic, not just of the people who serve, but of the organization itself. So, while much military advertising shies away from references to war, fighting or even shooting, the Marines own it. Why? Because they understand a marketing truth: If we don’t embrace our differentiators, we look like everybody else—and then why would we be the exciting choice? Giving someone a reason to be excited about your product is vital. Then you’re almost sure to have a sale, sooner or later.

The Marines’ home page celebrates this differentiator—flaunts it, even—through copy and with uber-aggressive imagery. Here are a few lines of their copy:

"To live and serve as a Marine means never failing to win any battle…"
"Marines are trained, structured and equipped to do one thing—win battles."
"…it is the fighting spirit within that ensures victory."

These lines are paired with references to honor and sacrifice. And the page is pleasantly sparse, with large, distinct content sections—so each message shines without distractors. This makes the overwhelming message of the page clear: If you want to be a winner, be a Marine.

UX tip for business: Have your messaging accentuate a complimentary differentiator, and you will find your most engaged—and lucrative—customers.

 Military

AirForce.com—Match UX to Your Value Proposition

If the Marines are the military alphas, then the Air Force are the undeniable tech leaders. While all branches of the military are trying hard to land STEM (Science, Technology, Engineering, Mathematics) recruits, the Air Force uses almost their whole home page to showcase how high-tech their brand is.

What’s especially great about their UX execution is the way they match the small details of their page to the tech theme. Ornamental graphic elements have a very futuristic feel to them, with simple, line-based art—like you’d see in a Tom Cruise sci-fi flick.

The page also features a slick, interactive element that asks you to fill in a few blanks—literally—to receive content curated just for you based on your answers. Like the rest of the page, the styling of the form is ultramodern and exceedingly mobile-friendly, with huge typography and a tap-friendly interface.

Altogether, the whole thing reads and plays like it might have been crafted in a Lucasfilm studio.

UX tip for business: Pair your content strategy with your design strategy, and you’ll craft an experience for your user that ushers them exactly where you want them to go.

Navy.com—Spotlight Content and Varied Content Blocks

My favorite thing about the Navy’s site is this humongous video they have right at the top. While a couple other services (including our own NationalGuard.com) have shifted to an autoplay video background, the Navy has kept a more traditional hero-style video placement, which pops in a windowed YouTube video. While this isn’t normally my favorite video implementation, it works in this case, because the content is so spotlight-worthy. Normally, I don’t like to get a hard stop on a media play, because I usually want to keep scrolling. But here, it forces me to stop and watch, and the quality video delivers. It’s engaging, fast-paced but not choppy; the music is perfect for the demographic; the piece shows a wide range of jobs; and the clever theme (from the depths to the stars) ties it all together.

UX tip for business: If you have one killer piece of content—a video, a download, a 360-degree office shot—whatever it is, don’t be afraid to put it front and center for all to see. 

NationalGuard.com—Path Users by Persona

One of our team’s projects that I’m most proud of is our recent NationalGuard.com home page redesign. It wasn’t a complete overhaul, but nearly every content block was changed in some way—and UX was at the forefront.

One of my favorite changes was the addition of some user-pathing elements. Together with our contract partner, we had completed a major UX analysis project. In that project, we found that while our target market could find the information they needed very easily, some disparate audiences were feeling frustrated.

To address the issue, we created three distinct user paths for three very different audiences. Each user path walked a visitor through the content they were most likely to want, using a variety of inline and button-based links, specially curated sidebars, and additional CTAs.

 User pathing is a great way to address audience types with very different needs.

User pathing is a great way to address audience types with very different needs.

In our case, we spoke directly to those three audiences: those ready to join right now, individuals who have served in the military before (and have an entirely different set of eligibility criteria), and parents and spouses.

Aside from the fact that this was an elegant (and cheap!) solution to a very big problem, my favorite thing about it was this: It worked. Our user pathing resulted in a 48 percent reduction of the page’s bounce rate, an almost 10 percent increase in pages per session and 13 percent more time spent on the site per visitor.

UX tip for business: If you have disparate groups in your target market with different motivators, questions or information needed, don’t make them do a menu shuffle to look for content that speaks to them—give each of them a very easy to way find the info they need.


User Experience and User Interface (UX/UI) design is just one of the seemingly endless list of services iostudio offers with any of our platform development projects. Click here and find more.


 Marc Acton

Marc Acton was born at a very young age in a moderately old town in Florida. Some other stuff happened, and then he became iostudio’s Associate Creative Director. For us, he proudly pokes and prods projects for the Army National Guard including social media and web, writing and strategizing content that converts. He is a fan of the Oxford comma, saying more with less, and helping write bios for extremely talented iostudians. He also flies helicopters for the Army National Guard. Which reminds us, how can you tell if a helicopter pilot is at your party? (He’ll tell you.)