My Role
• UX/UI Design
• Form Design
• Design System Contribution
• Usability Testing
• Developer Handoff
• Form Design
• Design System Contribution
• Usability Testing
• Developer Handoff
The Impact
Created a new flow for editing questions on forms with branching logic. This was contributed back to the VA design system for other teams that work across the site to use.
The Project
The Discharge Upgrade Wizard on the site needed to be updated to follow new design system guidelines. Wizard forms used conditional logic to dynamically populate questions—the answer to the first question would determine the second question that was shown. All questions in the wizard would show on one screen. This was no longer recommended because previous research at the VA indicated that showing one question at a time reduced cognitive load for users.
A new pattern needed to be implemented that only showed one question per page. This is called the sub-task pattern. This pattern has a review page at the end of the flow that allows users to check and edit their answers. While implementing this pattern, the team realized that there wasn’t an existing design that allows users to edit their answers on questions that contained complicated branching logic.
A new pattern needed to be implemented that only showed one question per page. This is called the sub-task pattern. This pattern has a review page at the end of the flow that allows users to check and edit their answers. While implementing this pattern, the team realized that there wasn’t an existing design that allows users to edit their answers on questions that contained complicated branching logic.
The Challenges
While creating a new edit flow, I identified a gap in our documentation. Before quality assurance testing or usability testing, we needed to understand all of the branching logic in the wizard. This would help us ensure that the wizard was correct and would help up properly test it with Veterans. I created documentation that showed all of the possible question branches—which became pretty complicated!
The Solution
The new edit flow that I proposed allowed users to select which question to edit from the review screen at the end of the flow. Once a question was edited, the user would go back through the flow and answer any new questions that appeared as a result of changing their answer. Alerts were strategically placed throughout the editing experience to inform users that they may have new questions to answer.
After I proposed the new edit flow, the next step was to conduct usability testing. We wanted to verify that users could navigate the edit flow with ease and understand why new questions may appear. I lead this effort by writing a research plan and conversation guide, conducted moderated research sessions with 10 participants, and compiled research findings in a report. Usability testing showed that participants were able to navigate the edit flow, making the new design an overall success.
