The Project
Veterans needed a simple way to learn if their income could impact the health care they receive.
As seen in the image below, the experience on the site at the time was confusing. Veterans answered two questions about their number of dependents and their location, then were taken to a results page containing a table they had to decipher. The wording on the table was confusing and often led to misinterpretations of income limits.
A new experience needed to be created that would clearly state income limits. It also needed to encourage Veterans to apply for health care even if their income was over the limit, because they could still be eligible for different services.
As seen in the image below, the experience on the site at the time was confusing. Veterans answered two questions about their number of dependents and their location, then were taken to a results page containing a table they had to decipher. The wording on the table was confusing and often led to misinterpretations of income limits.
A new experience needed to be created that would clearly state income limits. It also needed to encourage Veterans to apply for health care even if their income was over the limit, because they could still be eligible for different services.
The Challenges
A new design pattern needed to be created for this because the design system team wanted to updated how forms wizards functioned on the site.
In the past, form wizards on the site dynamically populated questions. For example, the answer to the first question would determine the second question that was shown. This sometimes led to confusion if a user needed to change their answer to a previous question because all questions displayed on the same page.
The design system team was looking for ways to reduce cognitive load, make the forms more accessible by improving the experience for screen readers, and reduce clutter on one page.
I worked with the design system team to create a new version of an existing pattern that would only show one question per page. We called this the subtask pattern because it helps users complete a shorter task before, or within, a larger process or flow. Ideally, these income limit questions would be asked before a Veteran applied for VA health care.
Multiple user flows needed to be created for this. The image below shows the main flow, which will show results for the current year income limits.
In the past, form wizards on the site dynamically populated questions. For example, the answer to the first question would determine the second question that was shown. This sometimes led to confusion if a user needed to change their answer to a previous question because all questions displayed on the same page.
The design system team was looking for ways to reduce cognitive load, make the forms more accessible by improving the experience for screen readers, and reduce clutter on one page.
I worked with the design system team to create a new version of an existing pattern that would only show one question per page. We called this the subtask pattern because it helps users complete a shorter task before, or within, a larger process or flow. Ideally, these income limit questions would be asked before a Veteran applied for VA health care.
Multiple user flows needed to be created for this. The image below shows the main flow, which will show results for the current year income limits.
The Solution
Using some existing designs that had already been implemented across the site, I expanded on the subtask pattern by making the question the main header of the page, refined the review screen functionality, and worked with the content team to come up with a comprehensive results page.
A prototype was created in Figma to test the new version of this pattern and determine if it worked better for users. Participants were observed navigating through the question flow and were asked to perform actions on the results page to test the layout.
After testing with Veterans, the subtask pattern flow was concluded to be easier to navigate. Showing one question per page made the content easier to comprehend and improved the experience.
I created both mobile and desktop versions of this design. This pattern can now be used in other locations across the site.
