VP Redesign

Vets Prevail Redesign

Screen Shot 2018-08-09 at 1.25.14 PM.png
 

Sponsored by the US Dept. of Veteran Affairs, VetsPrevail.org provides programs to veterans.

Goal

  • Improve the initial experience of a mental health platform for veterans, an oft stigmatized subject matter.

  • Encourage potential users to sign up for the service by conveying a sense of anonymity and security, while remaining lighthearted.

  • Introduce a site-specific pattern library

Role

I lead the UX work, producing all major deliverables and presenting these to our dev team, our Program Managers, and our stakeholders.

 

Experience Flow

Initial Screens

 

User research

I conducted research analysis of sites veterans often frequent and surveys veterans both offline and online to get a sense of what they enjoyed browsing online, the tasks they do, and what their expectations of a mental health platform would be.

Sense of agency
Research showed that veterans want the choice on how they would explore this subject. They were more likely to stick to something if they thought they had agency.

Mental health stigma
One of the project's challenges was the subject matter. We understood that mental health stigmas existed strongly with this user base, and that symptoms often isn't easy for many people, let alone veterans, to face. This is the reason why our entry points were presented through different mediums: taking the standard health assessment, casually chatting with another veteran, or joining on the basis of community.

 
User Persona for UHC

User Persona for UHC

 

Design decisions

To ensure our users' continued interaction after acknowledgment the stigmatized subject matter, the flow of the site bended to each user's exploration.

Health assessment entry
Default flow of being shown a registration page, their results, their program enrollment page, and then be ready to explore their custom program on the Program dashboard.

Chat entry
Throughout their chat session, Veteran Peers follow guidelines to ease the user to take the assessment by careful informative language.

Community entry
Directed to simply create an account to interact with the community members. Still given a global menu and can travel to any section of the site to explore features. On their Program dashboard, they receive info on how to obtain their own program. 

 
 
section-cta-chat.png

Navigation & CTA

We opted for an easy navigation system with clear CTAs. Each landing page served as various entry points into the flow, as each landing page is used heavily in marketing and recruitment.

The navigation and CTAs work on desktop, mobile, and tablet, letting users have the same experience regardless of their device. During the development phase, we user tested our CTA buttons. From testing, we found that users understood each button's message and could accurately predict what would happen next if they clicked on it.

 

Home Landing

The final round wireframes were translated into the final product. On the landing homepage, I wanted to use a photo of a veteran that was relatable, while indicating that we offered an online product.

To build product credibility with users, I included the logos of major publications covering the product at the peak of the fold.

An outcomes section was added to highlight our program successes, as well as our Scientific Advisors section (In reality, they range from Northwestern professors and tenured PhDs, not the cast of The Office).

Clear sections with previews regarding what one could expect if they enrolled also populated a section immediately after the fold, since trust is best built with full transparency.

VP Landing.png
VP Landing - Mobile.png
 
VP Program - Mobile.png
VP Program.png

Program Landing

Since our Program landing page is often used in standalone acquisition campaigns, this page had to be designed to be fully informative.

From this landing page, the entry point leads to the standard assessment flow, so the information was set to showcase each step clearly. 

To lighten the subject matter, I also created visuals that depicted clear each step lightly.

 

Chat Landing

From this landing page, the entry point leads to chatting with a veteran Peer, whose objective is to guide the user into the standard flow. 

Here, I wanted to again showcase the Support features of the site, and how they can be valuable. Users are also able to browse our available Peers and find one relatable to chat with.

VP Chat.png
VP Chat - Mobile.png
 

Contact Us page

There were additional supporting pages that needed redesigning with the landing redesign overhaul.

One of them was including a clear and concise Contact page, where users can either view emails, use a contact form, or be directed to our FAQ page.

 
VP - FAQ.jpg
VP - Conditions.jpg
VP - Resources.jpg
 
 

Illustrations

I created illustrations to complement the redesign's objective of making the site convey a trustworthy but lighthearted approach. 

The illustrations depict components of the site, such as our Program dashboard, messaging system, assessments, and resources.

icon-programs.png
icon-messaging 2.png
img-plant.png
icon-assessments-2.png
img-resources-plant.png
 

Outcomes

As of 2019, the site continues to provide free mental health services for and has helped thousands of veterans as they reacclimatize to civilian life. It is still funded by the VHA.

See Vetsprevail.org