A new design system library was needed in order to facilitate the Squad Bay app redesign and enable three new features: Enhanced Recruiter Profile, Digital Command Recruiter, and Social Forum. An audit of the previous app confirmed the team’s assumptions that Squad Bay was outdated and needed a new visual and functional design system to create a consistent, seamless, scalable product.
To begin this project, I met with the product and engineering team to discuss potential limitations, understand client needs, and align on a vision.
- One cohesive theme (previously recruiters and aspiring Marines had different themes – light and dark)
- Translate existing brand guidelines into a new design library
- Mobile app and Desktop responsive
- Create a shared library in Figma to ensure accurate color, typography, and reusable components for both the engineering and design teams
The Marine Corps has an iconic brand. Using their brand book, I tested their approved brand colors and typography to ensure accessibility and establish the new component’s look and feel. Veering away from their current black, white, and red color scheme, I focused on using “dress blues” as the primary background color giving the app a whole new look.
Following discovery, research, and internal stakeholder discussion, we decided on Google’s Material Design M3 system as our guide in creating our own framework, as it is a familiar format and offers comprehensive guidelines, components, and tools.
I found an opportunity to test the new color scheme and build out concepts for the component library by taking the wireframes I created during the Enhanced Recruiter Profile to the next level of fidelity. After internal testing and feedback, we unveiled the methodology for the new design system and demonstrated its application using updated profile screens during a scheduled review with the client.
The client feedback was overwhelmingly positive and resulted in approval for the new design direction. We then established a process to add new library components identified from the existing Squad Bay audit.
A new design system library was needed in order to facilitate the Squad Bay app redesign and enable three new features: Enhanced Recruiter Profile, Digital Command Recruiter, and Social Forum. An audit of the previous app confirmed the team’s assumptions that Squad Bay was outdated and needed a new visual and functional design system to create a consistent, seamless, scalable product.
To begin this project, I met with the product and engineering team to discuss potential limitations, understand client needs, and align on a vision.
- One cohesive theme (previously recruiters and aspiring Marines had different themes – light and dark)
- Translate existing brand guidelines into a new design library
- Mobile app and Desktop responsive
Create a shared library in Figma to ensure accurate color, typography, and reusable components for both the engineering and design teams
The Marine Corps has an iconic brand. Using their brand book, I tested their approved brand colors and typography to ensure accessibility and establish the new component’s look and feel. Veering away from their current black, white, and red color scheme, I focused on using “dress blues” as the primary background color giving the app a whole new look.
Following discovery, research, and internal stakeholder discussion, we decided on Google’s Material Design M3 system as our guide in creating our own framework, as it is a familiar format and offers comprehensive guidelines, components, and tools.
I found an opportunity to test the new color scheme and build out concepts for the component library by taking the wireframes I created during the Enhanced Recruiter Profile to the next level of fidelity. After internal testing and feedback, we unveiled the methodology for the new design system and demonstrated its application using updated profile screens during a scheduled review with the client.
The client feedback was overwhelmingly positive and resulted in approval for the new design direction. We then established a process to add new library components identified from the existing Squad Bay audit.