Military Assistance Portal
The Mission
The Virginia Beach City Public Schools partnered with the College of William & Mary received a grant funded by the Department of Defense to create a website and mobile application to support the military community in Hampton Roads. M.A.P, the Military Assistance Portal, provides information about social-emotional resources in the region.
Adopting the Agile methodology allowed the team to maintain a consistent work schedule with minimal delays. We managed our tasks using Trello, which divided our tasks into a to-do, doing, and done categories. We devised our team into a project manager, an industry mentor, a back-end developer, and myself as the front-end developer. We planned our meetings and goals on a biweekly sprint basis, which adapted after COVID began.
The Agile Methodology
Planning
Before creating any designs, our first step was to put ourselves in the shoes of our users. We spent a lot of time understanding the needs of military families to create the best user experience we could. We then began to design the website with these users in mind. This intentional style helped transform our application and help many families.
Developing
From there, we decided on the platforms we wanted to use to host our project. To ensure the longevity of the project, we decided to use Google Sites to house our website and Thunkable for our mobile application. This was to allow for the project manager to be able to maintain upkeep after the grant, with minimal coding involvement. I created designs for each page of the website, along with the brand designs to market brand recognition.
Problem Solving
We overcame a lot of roadblocks throughout our project (thanks to Agile). As first-time developers, and restricted to certain platforms to ensure the longevity of the resource, we devoted ourselves to creating a platform easy for users, and easy to maintain after the grant. I reassured that any problem had a solution, and that was certainly the case. I found workarounds for any issue that occurred and developed a product that met all of our goals.
Publishing
We beta and field-tested M.A.P. with military-affiliated officials and families for feedback before publishing. This ensures the usability of the product and helped with minor adjustments. VBCPS created an advertising video to get the word out to military families in need of our resources. After publishing, we began the transferring of ownership to the project manager to ensure the longevity of the product by creating tutorials to maintain upkeep after the grant ended.
-
![The original designs of M.A.P. from 2019. The designs show various layout designs for the opening page with a logo image, catchphrase, email input, and more. We also designed a table of contents page with various layouts.]()
Initial Design
The project began by designing the main page and determining the essential features of the application. We focused on user accessibility and seamless navigation.
-
![Our inspiration was the Virginia Beach City Public Schools GRIT Resource Guide. This image shows the main page with the following categories: FFSC Contact Information, Hampton Roads Resource Guide, Grief Support, Mental Health, and more.]()
Inspiration
We based the categories of resources available on M.A.P. from our partner’s, the STEM Education Alliance at the College of William & Mary, original design for the application. They created a Google Site that housed all the resources in Hampton Roads that are vital for military families.
-
![Alexis and her coworker presenting in front of the VBCPS School Board regarding Academic Support for Military-Affiliated Students.]()
School Board Presentation
During the VBCPS Board meeting regarding academic success for military-affiliated students, we presented our application to demonstrate the importance of making resources easily accessible for military families in Hampton Roads. Our presentation helped garner support for the development of M.A.P. as academic officials notified the schools to recommend our application to military families.
-
![The M.A.P. logo shows two flip flops, red and blue ombre, next to "Welcome to M.A.P. Military Assistance Portal". The flip flops and text appear flowing upwards to the center of the screen with a pastel red, white, and blue background.]()
Brand Recognition
Creating the brand identity streamlined the website and mobile application. We united both parts of the project with a theme and logo to build brand recognition with the audience.
Accessibility was our foremost priority when creating M.A.P. We ensured every aspect of the website was A.D.A. compliant and easy to use for all users. From choosing the text size to help our older audience, to adding alt text for screen readers, we aimed for the most optimal experience possible.
Our resources are divided into educational, family, grief, and mental health categories with separate pages based on location. This personalized the experience for the user and made navigating through the resources more accessible.
