Statutory Holiday Pay Calculator
Disclaimer
Information presented is for personal portfolio purposes, all expressed opinions are my own.
Summary
A series of calculator tools were to be developed over time for a provincial government client, one of them being the Statutory Holiday Pay Calculator. The final design accounted for this long-term adaptability through use of a mobile-friendly Bootstrap UI framework, a very simple and expandable navigation and a straightforward accessible user experience. The user flow was fleshed out on paper and then turned into wireframes with Balsamiq Mockups. High-fidelity clickable prototypes for multiple screen sizes were created in Abode XD.
Background
The Calculator tool was intended for employees and employers in British Columbia to determine the amount of money owed for work on a statutory holiday. The design had to incorporate web accessibility guidelines, accommodate expandability, work on mobile screens, and cover multiple legal use cases.
My role
I participated in this project as a UX and UI designer, providing wireframes and mockups to be developed into the online tool. Legal requirements were translated into calculator logic and research through stakeholder and subject matter expert feedback yielded multiple user scenarios to constantly check the design against.
Details
The development team proposed the use of certain technologies, including the mobile-ready Bootstrap framework for the front-end UI, which the client approved. It’s responsive grid worked well for the interactive form and supporting pages which were designed for use on different device screens.
Legal requirements and use cases became task flows. Designed iteratively, the final UI revolved around a two-part form and a results screen, mocked up for mobile and desktop viewports. To adhere to accessibility guidelines, the color contrast of visual elements was increased and the layout designed to supported assistive technologies like keyboard navigation.
To cover eligibility requirements, the first part of the form was designed as a progressively disclosed set of questions. User’s selections affected the display of the second part of the form, which is the actual wages calculator.
The calendar-like simple grid design for the desktop version covers a span of dates necessary for functionality. In the mobile versions the grid and spacing were re-fitted for easier use. The wage input grid had to accommodate complex working schedules, including shift work, overtime, and averaging agreements.
The subsequent results screen was designed to be a transparent explanation of the calculated amount and be printable. Depending on the particular inputs of the user, the text content of the results interface would change. Since all input values and selections were preserved, the user could go back to edit the form.
