Experimental Design [Expandable Task List]

[emcruer]

What

The IIR team is working on a component that will help with the overall onboarding initiative. We have proposals for some variations of a message and steps for new users (that tie into Profile Completion). This component is intended to live on My VA. Right now, it's a message with two action links, but we hope to create something that integrates the process list, without being too overwhelming (i.e. be closed or dismissed).

Purpose

Prior to creating a new component, we tried variations with every existing component. Currently, we have an alert in our mock-ups, but we want something more flexible that adapts as the onboarding process expands into tangible steps a user can take as soon as they create their account, such as reviewing their contact information and personal information. It provides a user with welcome messaging, as well as early actions that they can do after creating an account that will create better benefit outcomes downstream. By providing 2-4 concrete onboarding steps, especially around filling in missing data, we can guide a user into a better experience from day 1.
To be honest, this is also something that might be solvable with a notification center - something that prompts the user to take action on items that need attention that could then be tailored around onboarding tasks, but right now, we don't have a solution.

Usage

After the user is LOA3*, they are given simple actions to help them integrate better with VA.gov. We're working with My VA, Profile and the Auth Team on options that ensure a user is updating their contact information, finding their local facilities, and getting connected with help, if they need it. Ideally, we'll work with more teams to determine the optimal steps to include in this component for the new user.

• Prior to LOA3, we would display just a simple action, with no tasks.

Behavior

While we looked at several variations (which you can also see in the linked file), the preferred version at the moment is essentially a combination of an accordion and process list. The component functions similar to the accordion (but we selected a darker blue color, rather than grey, in order for the component to be friendlier and more eye catching), so the user can expand and view as needed. Within it, there is a short process list with steps for a user after account creation, mostly focused on reviewing their data for accuracy or adding information to profile. Once the steps are complete, the user is "onboarded" and the component would no longer need to exist on My VA.

Examples

We did an exploration of several types of variations here, but determined the expandable process list would be the best solution to our needs (Section: For Design Council). We also looked at cards and dismissible banners, but the process list is the closest to a guided experience.

Eventually onboarding tasks might evolve onto their own page, but right now, for the simplest tasks, we want a user to be able to take action from My VA.

Accessibility

During our accessibility review for our overall onboarding work, we did describe this component in its earliest conception. The accessibility from CAIA noted that it looked fine, as long as it was coded similar to an according, ensuring that AT users have the ability to navigate it.

Guidance

This component is for short, guided experiences that a user can complete over time. It shouldn't have more than 3 steps, or 4 at the max. It almost functions as a checklist, but it's unobtrusive so that it does not interfere with page content below if the user does not wish to view it. If a user chooses to immediately apply for a benefit, that information will be on My VA and we do not want a process list that takes up real estate on the top of the page. The benefit information should always be easily accessible, so the list can be closed, instead of pushing that information further down the page.

Collaboration Cycle Ticket

We are going through in a few weeks midpoint with the existing prototype (which uses an alert with two tasks).

Your team

IIR

Research (optional)

We have a research study pending, although it's focused primarily on the proof of concept and how Veterans feel about entering information into VA.gov. Right now, we plan to test with existing components, but with approval we would swap out the alert with the process list and test it during our Onboarding / Profile completion flow. Alternatively, we could focus on the proof of concept and then iterate on it with new components in the future. Our very first MVP goal is to ensure that Veterans are welcomed to VA.gov. Second, we want to give them action items (that are not benefit related), but that will set them up for success on VA.gov.

Code (optional)

There is no code for this component yet.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[caw310]

@emcruer The next DSC meeting is Thursday, July 18 at 11:05am ET. Are you available to attend? If so, I will add you to the invite.

[emcruer]

@caw310 Yes, I can attend on the 18th, thank you!

[babsdenney]

DSC decision: Continue to experiment with different solutions and reach out for support through the office hours. There were a few options offered during the council meeting that would be worth exploring.

Council meeting notes