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.

View Example Wireframe Presentation >

View Current Website > 

Original Site

Original Site

The 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 Brief

Content Strategist Brief

The Content Strategist on the team identified the key issues with the original version of the site.

Original Site

Original Site

The original site was not well organized, not very mobile friendly, and had various other big issues.

Functional Specs

Functional Specs

Using 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 Filters

Wireframe Mobile Filters

After 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 Profile

Wireframe Mobile Profile

I created mobile wireframes for each page.

Desktop Filter Page Designs

Desktop Filter Page Designs

The Designer on the team created final mockups of the website based on my wireframes.

Mobile Filters Designs

Mobile Filters Designs

The Designer on the team created final mockups of the website based on my wireframes.

Desktop Profile Designs

Desktop Profile Designs

The Designer on the team created final mockups of the website based on my wireframes.

Mobile Profile Designs

Mobile Profile Designs

The 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. 

RELATED

jaime.fraina@gmail.com | 845-445-7430