build
Leveraging an existing design system
Our PoC exists within WSIB Online Services—the WSIB's dedicated portal for claim management. In creating this PoC, fostering an understanding of its existing design system allowed my team and me to visualize edge cases when proposing new components and design assets to accommodate the structure of the form design.
Landing page
In completing the hearing assessment form, audiologists have the option to start a new form from scratch or submit a scanned copy of a physical form. This was achieved by my developer colleagues, who created an OCR model that extracts text from the audiogram form and stores the data to be displayed on the frontend.
An external link to the original PDF has been included on this landing page to ensure continuity between both methods of form completion.
Form navigation
In utilizing progressive disclosure to break down form content into steps and substeps, form navigation required additional explorations into navigational controls and visual cues to ensure audiologists can seamlessly move between sections with as few actions as possible.
Currently, the WSIB uses a step tracker to indicate users' progress on a form and navigation buttons to move backward and forward:
Visually displays which section of the page the user is currently on
Not inclusive of non-sequential forms like the hearing assessment
Does not visualize form substeps that exist within a broader section
In consultation with our project manager, we designed a collapsible sidebar that allows audiologists to toggle between sections and substeps as they scroll through form pages:
Visually displays which section of the page and substep the user is currently on
Reduces click count on sections with multiple substeps
The sidebar becomes the only element on the form that displays substep progress
To accommodate form sections with multiple substeps, we designed an additional progress bar to visualize within-section progress:
Though these approaches reduce page density and accommodate the non-sequential structure of the hearing assessment, they are deviation from the existing navigational components and require additional testing to validate their usability.
Audiogram chart
In facilitating the hearing assessment digitally, I designed an audiogram chart that updates in tandem with the corresponding threshold values selected through form fields. This was later developed using React and Chart.js:
Validated through A/B testing, 4 of 5 audiologists preferred the chart situated to the right of form fields rather than above.
To reduce page density, we introduced a toggle component to separate otoscopic tests between the left and right ears:
Contextual validation
As the hearing assessment form is non-sequential with several optional form fields, users may be more prone to skipping information integral to diagnosis and claim evaluation. Upon review, audiologists are provided with a list of sections and substeps with incomplete fields and are prompted to review them if needed: