[Epic] Navigation

[angelcardoz]

Milestone: [Link to milestone]
Add a few sentences to describe the milestone.

Epic: Navigation

Overview

• A collection of user interface components that allows visitors to navigate the platform as well as find web content and features easily.
• List item

Tasks

Use the following checklist to ensure each epic is built out properly. If needed, you can add or remove items.

• Pull together initial list of relevant user stories for this epic
• Make a list of the content requirements for this epic
• Make a list of the technical requirements for this epic
• Post current wireframes and mock-ups
• Review wireframes and mock-ups with FEWD, BEWD, Data, SBL Help, Content team members
• Refine user stories to prepare for development phase
• Identify and capture tasks for user testing
• Conduct user testing

User stories

MVP (release: 12/31/2024)

• [Story] Navigate the platform on mobile device #273

Beta (released: 8/1/2024)

Step indicator

• [Story] Step indicator with clear, concise, and consistent steps #176
• [Story] View my current step in the filing process #110
• [Story] Visual representation of the steps completed and steps that are pending #175
• [Story] Navigate between steps #177

Header

• Story (link)
• Story (link)

Footer

• Story (link)
• Story (link)

Backlog (post-MVP)

Step indicator

• [Spike] Explore navigating filing steps through the step indicator or other navigation aide #178
• As a user, I want to be notified that I will lose point of contact information entered when I click the "go back to previous step" button.

Header

• Story (link)
• Story (link)

Footer

• Story (link)
• Story (link)

User testing

Research goals

Step indicator

• Determine whether filers expect the step indicator to be navigable
• Learn whether the step indicator provides valuable information to the filer about completing the filing process.

Header

• Assess the utility of the interactive elements in the header
• Assess the utility of the non-interactive content in the header

Footer

• Assess the utility of the interactive elements in the footer
• Assess the utility of the non-interactive content in the footer

Task ideation

Step indicator

• Filer goes to the next or previous step in the filing process.

Header

• Filer goes to their profile
• Filer logs out of the system

Footer

• Filer can contact the CFPB (who do they expect this to go to?)

Current mock-ups

Updated: MM/DD/YYYY

Page name	Page name	Page name

[natalia-fitzgerald]

Discovery:

Step indicator (also called progress indicator) and navigation

The CFPB does not have a step or progress indicator component so we had initially planned to use the current USWDS step indicator as a starting point and apply CFPB styles (font, state colors, etc). The USWDS step indicator component is specifically designed/intended for a linear flow (complements a back/next navigation in a linear sequence). It is not intended for a non-linear progressions or interactions that might be completed in any order. According to the usage guidelines, the USWDS step indicator should not be used for navigation. A user should navigate using back/next or something equivalent (within the page content). The step indicator is a purely visual marker that indicates where a user is within the linear flow (as opposed to one a user can interact with as a form of navigation).

Step indicator (based on USWDS component)

• Specifically designed/intended for a linear flow (complements a back/next navigation in a linear sequence).
• It is not intended for a non-linear progressions or interactions that might be completed in any order.
• The step indicator is a visual indicator of progress and is not a navigational component. The user navigates through the flow using back/next buttons or links.

Progress indicator (Carbon Design)

• A progress indicator is a visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.
• Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.
• Logical progression: Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the direction of movement. Allow the user to return to a previous step to review their data submission.
• Indicate the current step: Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. This helps the user to know where they are in relation to where they have been, and what sections are to follow. Clear labels should accompany the progress indicator to indicate what the user will accomplish within each step. Keep labels between one to two words.
• Validation: Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, use an Inline Notification to inform them.


Stepped progression (Goldman Sachs)

• A stepped progression, sometimes referred to as a multi-step form or wizard, is an interface built to support a series of steps a user must complete in a process.
• Stepped progression is best employed for long and unfamiliar tasks that the user needs to complete once or rarely. Typically in each step a user is asked to input data and is provided feedback on their progression for the overall task.

1. Progression tracker (Steps or Progress component)
2. Content (Form, video, quiz, etc.)
3. Action buttons

Progress Indicators

• Progress is tracked in a stepped progression and displayed to the user visually and can be shown horizontally or vertically. The overall goal of the progress indicator is to show the user how far along in the process they are and how much more they have to go.
•  States: incomplete, active and completed.

Alternatives to the step indicator

Although I strongly support the idea of a linear flow for the small business lending filing flow, I did want to present some alternative components that allow a user to complete a set of tasks in any order. Neither of these alternatives provide a user with any feedback as to progress toward an end goal.

Side navigation (CFPB component)

• Intended for a non-linear flow or interactions that might be completed in any order. 


• Open: https://www.consumerfinance.gov/owning-a-home/prepare/
• Gated: https://www.consumerfinance.gov/paying-for-college/your-financial-path-to-graduation/
  


Tabs (no CFPB or USWDS component exists)

• Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
• Tabs are used to organize related content. They allow the user to navigate between groups of information that appear within the same context.
• Because tabs stack horizontally or wrap to a second line, they’re not an optimal design solution for mobile viewports.
• Tabs should never be used for primary navigation. If tabs become too complex, consider using a standard navigation pattern.
• Tabs should not be used to indicate progress. Use the progress indicator instead.


Decision: Linear flow of sequential steps

At yesterday's design/dev sync we discussed the idea of a linear (versus an open-ended flow). We decided that, for a number of reasons, a linear flow makes a lot of sense for the small business lending filing process. While there are steps within the filing process that could be completed in a different order there are certain steps that must happen before others. In deciding on a flow it is beneficial to design a system that is consistent so that a user knows what to expect. Existing steps that are not order-dependent can always be moved later if testing shows user friction. But, upload must always come before errors and warnings can be shown and before a user can view a summary and submit their filing for the year.

We did want to be able to provide the user with a way to access the "warnings" before they resolve their "errors." A user will be able to access a report of all "errors" and "warnings" by clicking a link at the top of the "Resolve errors" step.

• @angelcardoz @billhimmelsbach @dan-padgett

[natalia-fitzgerald]

@dan-padgett
Here are my initial thoughts regarding the step indicator styling.

Step indicator states

The USWDS has the following 3 states built into their Step indicator component:

• Current
• Complete
• Pending

Definition of complete (by step)

To complete the step a user must complete the action(s) and click the button to move to the next step.

• Upload file: File is uploaded and validation check is complete (no parsing/formatting errors)
• Resolve errors: File has passed validations check without errors.
• Review warnings: User has verified (checked box) the accuracy of all data fields referenced by the warning validations and clicked the button to continue to the next step. If the user has no warnings they only have to click the button to continue to the next step.
• Provide point of contact: All required fields are populated and the user has clicked the button that takes them to the next step.
• Sign and certify: User has reviewed financial institution and point of contact details (checked boxes) and has certified and signed (checked box - typed full name).

Something to figure out:

• What happens to the styling of all steps that come after the step that they've navigated back to? Do they retain their completed state or reset to pending?
• Does the USWDS code indicate what happens when a user navigates back to a "complete" step?
• Loosely related label question. Do you prefer "Review warnings" or "Validate warnings"? What seems more parallel with the others?

@billhimmelsbach