MilMove Design System

a living pattern library of React components for a large scale, complex government system.

Background

MilMove is a new system from United States Transportation Command to support the relocation of families in the services during a change of station. Something we learned in our user research that has always stuck with me, is that most service members and their families cite these change of station moves as the second most traumatic thing they experience in their enlisted time, second only to active combat. I was allocated to this project for 24 months, spanning January 2020–December 2021.

Our purpose on this project is to make this process easier for folks. Our design team felt that is is really important for this platform to be as easy to use as possible. High usability needs a strong foundation, which is how the MilMove Design System came to be.

Impact

Design System Engineering

Built and styled components to align to components built by teammates in Sketch
Owned project Storybook and built stories/CSF files for inital set on design system components
Revised css modules for components that were not mobile-responsive to ensure service members could use them on mobile devices
Served as the face and voice of our design system on a 40+ member project team
Paired with UX Designers to provide input on what considerations they needed to make in their component designs to ensure they were scalable and practical for use in our design system
Front End Standards & Tech Debt\
Built the design-engineering handoff process, and improved it by creating a process that required designer code owner approval for a PR to merge with front end changes, triggered by automated visual regression testing
Paired with engineers to educate them on correct CSS usage
Demoed any large scale front end changes to the project team in our monthly team meeting to advocate for correct usage of our design system and front end processes
Held a quarterly bug bash where project team members and client stakeholders would test the new features in the system and find front end bugs and accessibility issues
Hosted team-wide front end working group where members of all cross functional teams from design and engineering could align on our front end architecture decisions and strategies
Participated in an overhaul of the frontend application structure, moving jest and cypress tests, stories files, and CSS modules under their respective components in a src/components directory
Accessibility
advocated for accessibility with the client to ensure it could be prioritized in our work
logged components in a central location with connected automated testing, which also laid the groundwork for manual testing to be possible in the future
Key Learnings
I learned about the United States Web Design System and how to use it as a base to build out a design system for a complex software project. The USWDS is a wonderful tool that the GSA builds for federal government web development projects, but it is primarily focused on informational, documentation based, site content. We created MMDS as an expansion of it to create components specific to our needs and that of a large scale software project.

I learned about working on large scale teams, and that I actually prefer it, as I got time to focus on my specialization in design engineering.
I learned about visual regression testing in Happo, automated interface testing in Cypress, and unit testing in Jest and React Testing Library. I don’t consider myself a software engineer, but I think these are good skills to have when you work with code as much as I do, and are working with so many software engineers. I learned so much about best practices in a repo this size, best practices around pull requests, and dependency management at this scale. It was a great