Content Design for Military One Source

One of my favorite projects this year is Military One Source. I’ll continue updating this page as time goes on.

Social Media Icons

I was tasked with creating a new social media icons that will be located in the article pages at the bottom. The following icons where made:

  • New Email Icon
  • New Print Icon
  • New Print to PDF Icon

The original icons felt rigid and uninviting as they were more detailed, while I was aiming for simplicity. These icons had to be responsive for both desktop and mobile devices, show better contrast, visibility, and consistency across the site.

Site Audits

Site audits are a great way to find inconsistencies within your site. I’m currently doing that now to help find inconsistencies between each site so that we can begin to standardize the brands styling. The site audit consists of finding the following:

  • Typography
    • Headlines
    • Bodycopy
  • Colors
  • Use of the proper layout grid

This is just a small sample of what is done, and below you can see the variation of colors found through a variety of pages. The next step will be to slim the color styles down and standardize the typography.

The current process being used is the Atomic Design System method of finding elements that are categorized as Atoms and molecules. Organisms will be the next phase of the audit as that will consist of full layout designs for cards, buttons, lists, featured content etc.

Design System

Currently in it’s early stages, I’ve been able to draft up the future home of all the assets my team will be using for creating and sharing Military One Source prototypes.

The design system will utilize the Atomic Design System process were we will be able to categorize all of our assets in one place. As the site undergoes the rigorous audit process, this will undoubtedly be a challenge as Military One Source has multiple sites that all share a variety of different design assets, and all will be collected to begin building an amazing library for years to come.

The design system will consist of a few building blocks using some science terminology while still being used as a design tool. The following items will explain the Atomic Design System that will be put in place:

  • Atoms: Basic HTML elements (typography, colors, icons, etc.)
  • Molecules: Grouped Elements (Buttons, Inputs, etc.)
  • Organisms: Complex UI Components that merge Atoms and Molecules (Headers, Forms, Dropdowns, etc).

It’s exciting in being able to put these assets together. Check out some of the items in the Design System Draft.