Military OneSource Design System Audit

To build a design system, we need to understand that it’s not just a project, it’s a living funded product with a roadmap and backlog, serving an ecosystem. The purpose of our Design System is to build Military OneSource and Relocation sites visual styles, components and accessibility.

Project Type

  • User Interface Design (web + mobile)
  • Research
  • Prototyping
  • Cross-functional Collaboration
  • Design System

Role

I was tasked to create a roadmap, research, document feature-by-feature, and build out the visual styles and components for Military OneSource and Relocation sites.

The brief

Military OneSource didn’t have a design system when it was being developed. Over the years, the development went through several iterations and the site become riddled with inconsistent visual styles and components. A strategy was created to build out a roadmap to audit the many sites, document feature-by-feature in the production environments and build the visual and component styles that need to be available for future designers, developers and contributors. 

The Challenge

Military OneSource wasn’t just one site, it has sister sites as well: Plan My Deployment, Plan My Move, Military Installations and Military State Policy Source. These relocation sites are also part of the Military OneSource family, and needed to be audited as well. 

The plan

The biggest site was Military OneSource. The plan was to begin on the grid, colors, typography, buttons and links.

The findings

The site was riddled with inconsistent stylings. Some headings were in rem, while others where in px, some buttons had padding while others didn’t. What was for sure was that now that we see the issues, we can have discussions on having a smaller color palette (found over 50+ colors), standardize our typography, and begin to find ways to fit the components to the proper grid.

design system: a work in progress

There is much to accomplish before the audit is completed, but so far the following has been audited: Grids, Navigation, Colors, Typography, Buttons/Links, Forms, Accordions, and Cards. One thing is for sure, the audit can be completed, but the design system is an ever evolving system. Now that’s exciting to see where this goes! Stay tuned.