Mockup of redesigned AboutFace website in Laptop and Phone

U.S. Department of Veterans Affairs, National Center for Posttraumatic Stress Disorder

Empowering Veterans to Find PTSD Help & Treatment

AboutFace is a campaign ran by the U.S. Department of Veteran Affairs, which features the real stories of Veterans who have experienced PTSD, their family members, and VA treatment providers. By exploring the website, veterans can get advice from other Veterans who have dealt with PTSD themselves.

Role: Lead UX designer (Home & Topic) + Research Lead (Full Site) at CommunicateHealth

Timeline: 26 weeks

Problem

The client was eager to revamp their existing website by introducing new pages addressing critical topics that answer common veteran questions, such as "Do I have PTSD?" and "What is treatment like?". Despite hosting a wealth of interviews with veterans, therapists, and family members sharing their experiences with PTSD, these valuable resources were not effectively highlighted. Additionally, there was a clear objective to enhance video navigation, aiming to improve the exploration and filtering options for a more user-friendly experience.

Solution

My team and I proposed a comprehensive website overhaul. This included the creation of new informative pages dedicated to answering key questions that veterans often have about PTSD. I also looked for strateic ways to prioritize displaying interviews with veterans, therapists, and family members to ensure that these valuable resources are easily accessible. Additionally, I lead the redesign of the video navigation system, implementing user-friendly features for seamless exploration and filtering. These strategic interventions transformed the website into a more informative, engaging, and user-centric platform for veterans seeking support for PTSD.

Project Goals:

  • Enhance website accessibility and user-friendliness to ensure visitors can easily navigate and find relevant information.

  • Introduce new content pages addressing critical topics to provide comprehensive support and resources and refresh existing ones.

  • Optimize the presentation of video content, allowing users to efficiently access and view interviews with veterans, therapists, and family members.

Main Challenges

3 Main Challenges: Uninformative Landing Page, Outdated Content quality and Design, Video Usability Research Needed

1/3

Enhancing Homepage Accessibility and Engagement for Veterans

The homepage is the first page users see, so it's crucial that it gives them a clear idea of what they can find here. We started by replacing the image of a single white male veteran with pictures of veterans from different backgrounds and settings. This change was based on feedback from users during testing. When they were asked who the site was for, many didn't feel represented by the original image.

Following the introduction, I suggested prioritizing the three most pressing PTSD topics based on card sorting ranking. These address the primary concerns veterans may have upon entering the site. Recognizing the diverse experiences and stages of PTSD, it was crucial to provide a personalized approach rather than assuming a one-size-fits-all perspective.

We also made sure to highlight stories from veterans on the homepage. These videos are organized by popularity, showing users that there's a wealth of content available. Each video is labeled with the veteran's name and where they served which makes it easy for veterans to find someone they can relate to.

Wireframes showing initial ideas for homepage

The original wireframed concept featured all five main topics at the top, arranged numerically. However, user feedback revealed that veterans prefer a more personalized approach, rendering the numerical order ineffective.

Before

Before example of homepage

The initial landing page prominently showcases two large images of white men, and fails to provide a clear explanation of AboutFace's purpose. Additionally, videos are tucked away within specific topics, making it difficult for users to discern the content available on the site at first glance.

After

Updated Homepage mockup

The updated version of the landing page now features a diverse array of veterans, provides a clear explanation of AboutFace's mission, offers easily accessible topics for users to explore, and prominently showcases videos – a vital component of the site's offerings.

2/3

Revamping Content Quality for PTSD Topic Pages

Initially, the website had a limited number of pages, but the content lacked depth and frequently redirected users to external sources. Collaborating with a Subject Matter Expert (SME) from the Department of Veteran Affairs, my content team crafted 13 pages featuring SME-endorsed PTSD content. I played a consultative role in ensuring its seamless adaptation to the website platform. The content adheres to fundamental design principles, incorporating headers, bullet points, callouts, and videos to maintain user engagement. Moreover, it incorporates intuitive "next step" buttons, guiding users towards relevant videos or related topics.

Before

Before example of content page

Initial PTSD treatment topic page has very little content, unclear headers, and directs users to another website

After

Updated content page mockup

Updated PTSD treatment page is broken down with headers and chunks, and features videos and quotes to drive engagement

3/3

Usability Testing Insights: Enhancing Video Section for Veteran Engagement

As the lead UX researcher, I conducted usability testing on the video section, providing valuable insights for further enhancements. Through this process, it became evident that while featured playlists were relatable, their priority wasn't clearly defined, potentially causing confusion about the significance of the content. Participants expressed frustration with the lack of a helpful results page after a failed search query, which hindered task completion.

Additionally, the "and logic" in filter application, where only videos with both selected filters are displayed, was unexpected for some participants. The visual hierarchy of the search/filter bar may have contributed to its oversight by several users. Moreover, there was an expectation for topic filters to encompass symptoms and other keywords, making video selection more precise, and a need for improved scannability. Interestingly, sorting options were not utilized by any of the participants, indicating a potential area for reconsideration in the design. These insights were gathered from extensive testing involving 12 veterans and were further organized through affinity mapping in Figjam. Unfortunately the findings were not implemented yet due to contractual reasons and budget constraints.

Screenshot of Affinity Mapping in FigJam

I used FigJam to organize insights from 12 Veteran participants.

Usability Recommendation Example 1/3
Usability Recommendation Example 2/3
Usability Recommendation Example 3/3

I delivered a PowerPoint with findings, recommendations and severity levels, providing the client with clear next steps.

Testing Version

Testing version of video page

This is the version of video page I brought to testing. Users were asked to perform various tasks including finding a video of a Navy veteran talking about Insomnia

Reflection

This project was substantial and emotionally challenging due to its sensitive subject matter. Engaging with veterans and hearing their stories about dealing with PTSD was personally difficult at times as Veterans shared memories while learning about this resource.

Working closely with the client was a great opportunity. After each session with participants, I made sure to discuss my observations with them. This ensured that there were no surprises or misunderstandings when it came to presenting the results and recommendations. This direct communication helped us stay on the same page throughout the project. This experience has highlighted the power of empathy, open communication, and the meaningful impact technology can have on those facing significant challenges.

You can visit the AboutFace, it currently live on the VA website.

GIF of full site exploration
Previous
Previous

Haggard Childcare

Next
Next

Move Your Way