The mission of the CHAMP HPRC is to decrease health risks and create positive behavioral change for service members through evidence-based education opportunities and events. HPRC’s education program focuses on human performance optimization based on the Total Force Fitness (TFF) framework.

The HPRC website is an extension of the larger educational effort by CHAMP. It has been in existence since 2010 and has gone through four iterations prior to this new effort. For this next iteration, the focus was on graphical appeal, updated navigation schemes, clear information hierarchy, easily searchable and readable content, and a pleasing responsive web mobile experience. TIAG UX specialists provided a customized human-centered design (HCD) approach that aligned with an agile development environment. 

TIAG employed an agile iterative HCD process for the HPRC website. Our UX specialists created the optimal user experience by applying numerous HCD design and research methodologies to guide the design approach and meet usage goals. Research methods included analytics reviews, heuristic evaluations, user research, gap analysis, and user persona creation. Using the research as a guide, we created a series of mobile and web wireframes (or simplistic blueprints), conducted stakeholder design sessions, and built high-fidelity designs and site maps. To establish the ideal user interface approach, we conducted a comprehensive analysis based on 508/WCAG 2.1 guidelines intended for optimizing site accessibility. 

By integrating a specialized HCD approach within the agile environment, we were able to expand opportunities to keep users at the center of the design and development process and further enhance the overall HPRC website. The final website redesign and optimization work met or surpassed baseline usage rate goals for key areas of the site. In addition, this effort far exceeded client expectations, resulting in contract extensions for follow-on sustainment and feature based work. Per the CHAMP Chief of Staff: “TIAG has been better than I imagined – we didn’t know what we were missing.”

While military service members often use supplements to augment an exercise and fitness regimen, if the user is unaware of their specific ingredients, they can actually inhibit performance rather than improve it or, in some instances, result in failed drug tests. As part of the Consortium for Health and Military Performance (CHAMP), Operation Supplement Safety (OPSS) strives to provide the best evidence-based information about dietary supplements to military service members, their families, healthcare providers, and leaders to achieve human performance optimization.

CHAMP leadership and staff required an accessible web application to help service members make informed decisions on the benefits and risks of supplement usage, and they were disappointed in the existing OPSS.org web design effort. Existing site challenges included problematic navigation schemes, confusing screen hierarchy, insufficient accessibility, and an unappealing responsive web mobile experience. Plus, many of the most popular OPSS.org features and resources were not easily discoverable from the home page – a crucial design limitation.

TIAG was tasked to produce an innovative, human-centered design to alleviate existing challenges and optimize soldiers’ experience with the website. Armed with stakeholders’ in-house user research, we reviewed site analytics data to get an in-depth understanding of usage trends and user behaviors (such as page views, usage rates, and drop-out rates) and conducted a baseline assessment. From there, we created personas based on research gathered on soldiers who engage in supplement use and then a goals-driven design roadmap. We were then able to design the information architecture scheme and wireframes for both web and mobile to provide visual context for stakeholders’ review. After soliciting insights and guidance from stakeholder and subject matter experts, we were able to construct high-level web and mobile prototypes. User interface color schemes, icon assets and style guides were created that upheld accessibility standards for visual design and sight impairments. Through collaborating with user experience specialists and developers, we were able to ensure the redesign effort met accessibility and design standards for the site.

As a result of these efforts, we created a compliant, visually appealing, and soldier-friendly OPSS.org mobile responsive website offering streamlined information and resource access for supplement safety. Post-redesign, stakeholders reported a 50% to 100+% increase in usage for some of the site’s more popular pages and features.