Design Overview
HOME » TECHNICAL DOCUMENTATION » Design Overview
PAPUA places the user at the center of design decisions. This section covers the processes and reasoning behind the application's look and feel.
When a private company designs an app, they focus on a specific target audience. When government designs an app, the audience is every citizen - excluding users from design considerations is tantamount to denying access to critical services. PAPUA's design is centered around providing easy access to the most users possible.
While many existing design systems were considered for implementation, the team ultimately decided upon Grommet, a React framework that was built from the ground up to be WCAG 2.0 compliant. The color palette was carefully considered and constrained to a minimal set with ample contrast to support people who may experience colorblindness in the form of protanopia, deuteranopia, or tritanopia.
Sizing of typography, and UI were slightly magnified from standard practice to provide better readability, as well as easier touch/click targets. Component states for all functional UI utilized across the form were also specced out to provide clearer affordances as well as support keyboard accessibility.
We've found that over 50% of users access government websites from their mobile devices. Many government websites are not designed with this kind of browsing in mind. PAPUA works well no matter how you're using it! The form was specced for 12, 8, and 4 column treatments (2 breakpoints) to accommodate desktop, tablet, and mobile experiences.
A lot of unemployment forms we reviewed shared a common flaw - they're very confusing! PAPUA's form clears up the interface to provide a more intuitive and seamless experience:
- Form sections flow logically from one to another.
- A progress bar helps the user understand how long it will take to finish.
- Persistent section links orient the user within the form, as well as provide easy access to prior sections.
- Conditional questions are hidden to cut down on clutter, and only populate the form when necessary.
- The form can be toggled between English, Spanish, and Chinese languages to further accessibility.
- Built in file uploader to help users easily and quickly include required documentation.
- Contextual inline error messages ensure users' answers are correctly formatted for submission.
- Our review and submit page provides a validation UI that ensures users have full visibility into their answers, and are confident in their submission before sending it off. This cuts down on the incidence of incomplete or erroneous submissions which can delay the delivery of crucial benefits!