Army.mil Design System
The Army.mil Design Standards provide guidelines and code to help Army-related entities quickly create accessible, and consistent digital products while accurately representing the Army brand.
BACKGROUND
One issue that came up in our very first initial discussion of the army.mil redesign was determining whether there were already pre-existing online digital brand standards that needed to be abided to while implementing a new design. Shockingly, the answer to this question was No.
The old army.mil site was designed with a page driven approach, meaning a designer develop a template and then individually designed each page. To force huge volumes of content into cookie cutter templates is much too limiting. And, on a large scale site, trying to go through and custom-design each page would be an unbearable undertaking.
With that said, I reached out to the agency of record that was completely overhauling the Army brand identity and ask if my team could be in charge of setting those standards. We received an overwhelming amount of support, and soon enough, I started defining/mapping out the visual elements and developing a pattern library of reusable components.
Our strategy for the army.mil redesign was to take a modular development approach, which means designing and producing a component-based user interface that creates a sustainable technical architecture. (Think of components as Legos: interchangeable building blocks you can assemble into pages)
WHY?
1) Using a component-based UI approach supports iterative, agile development. Components will be hosted in a library from which our team can access, integrate and modify them throughout the development process.
2) One of the major challenges for our organization is that we have a portfolio of websites/applications that don’t provide consistent user experiences and interactions. (I am not referring to the “look” of the site; I am referring to the fact that not everything that looks like a button performs like a button.) The component library acts as a point of governance for the business, designers, and quality assurance teams. It will eliminate discrepancies and help define rules that will boil each component down into a standardized model.
RESULTS:
In modular web design, the quality of the pages produced is still important. It’s just that the focus of effort shifts away from agonizing over a handful of individual pages (at the expense of all the others) and toward a smart system of reusable design patterns, interchangeable components, and well-planned system logic. This leads to a more scalable infrastructure, better adherence to design standards, cleaner code and better performance times.
The styleguide is a collection of HTML, CSS, and JS snippets that are leveraged throughout the wwww.army.mil site.
Due to a non-disclosure agreement, I am unable to share/elaborate further information on this project via online. Please contact me for follow-up questions.