Soldier Stories
Client: U.S. Army
PROCESS
The old version of the page had a long lists of profiles with thumbnails sorted into two main categories: Active Duty and Reserve profiles with no explanation what the differences were between them.
I started out by determining what filters would be most useful for users. After researching with our Content Strategist, we determined the best way to organize the profiles was by Career type and allowed users to filter by service type and/or gender.
Using Sketch, I created detailed wireframes and functionality specs for the Development and QA teams to use as reference as they built and tested the new pages. I worked closely with the Designers to ensure their designs match the wires well.
The website has not been set live yet, but the clients have been very happy with our progress so far. Everyone that has tested the site is able to find relatable profiles right away with our new organization and filtering system. I am very excited for this update to go live and see how it performs.
Click the images for more details.
 Original SiteThe original site had thumbnails for each profile separated into two lists based on Service Type. It was difficult for users to find relatable profiles. |
|---|
 Content Strategist BriefThe Content Strategist on the team identified the key issues with the original version of the site. |
 Original SiteThe original site was not well organized, not very mobile friendly, and had various other big issues. |
 Functional SpecsUsing Sketch, I created detailed wireframes and functionality specs for each page. In the new version, the profiles are categorized by career with optional filters for service type and gender. |
 Wireframe Mobile FiltersAfter researching best practices for mobile filters that other sites use, I determined that a full screen filter screen was the best option for users to filter profiles on mobile. |
 Wireframe Mobile ProfileI created mobile wireframes for each page. |
 Desktop Filter Page DesignsThe Designer on the team created final mockups of the website based on my wireframes. |
 Mobile Filters DesignsThe Designer on the team created final mockups of the website based on my wireframes. |
 Desktop Profile DesignsThe Designer on the team created final mockups of the website based on my wireframes. |
 Mobile Profile DesignsThe Designer on the team created final mockups of the website based on my wireframes. |
OVERVIEW
The U.S. Army's website is a very bloated website with a lot more content than it really needs. At MRM, one of my major responsibilities was to fix up various sections of the site to make the content more digestible, organized, and increase our KPIs.
For this particular project, I was tasked with redesigning the structure and layouts of a section of the site that told the stories of various soldiers. The objective of the pages were to give users relatable soldier profiles so they can easily see how they could fit into the U.S. Army themselves.
