This application was based on a pitch to a senior manager looking to find a way to improve the online services and benefits for Ontarians to complete transactions online. It was to enable them to be able to choose between a multitude of services and use a “one payment process” to complete all online service transactions, in one event. Ie: update address information for health card and drivers license. This would solve the problem of having to login and out and fill out countless forms and simplify the process. There aren’t any mobile screens as this was a prototype being pitched to upper management and they ony required a desktop version.

Through Google analytics research, we found that users were dropping off early in the submission process. This was an indicator that the process is difficult for users to complete and needed to be addressed.

Depending on the service, there was from 10 to 15 steps in the form process to complete a transaction. It needed to be shortened. Working with the team, we were able to create a process that would be reduced to 6 steps. There weren’t any design look and feel changes, as it was to align with the current branding, color schemes, form elements, icons and typography.

Step 1. The user would answer 4 questions that would determine what services they would be eligible for. I added an accordion hint link, as it was better for accessibility. When clicked it opened and displayed the information. I improved the design by creating more whitespace between radio buttons and content within the page.

step 1 personal information

Step 2. This page would display what services the user qualified for. All services were provided and simplified the whole process. The user could check off what they wanted and chose the continue button. I used customized check boxes so they were larger and easier to click.

Step 2 eligibility with check marks in boxes

Step 3. On the example mock up the user would fill in appropriate information and receive a green check mark to confirm all data was correct. The date of birth form field was improved by using a select menu rather than have the user type in the info.

step 3 information filled in

Step 4. This step shows an example of the “Healthy Smiles”, a benefit that the user could apply for. It was simplified by allowing the user to only have to click check boxes and refrained from requiring any input text fields.

step 4 detail information filled in

Step 5. The original payment field was a 3 step procedure. I simplified it by having all the required information on 1 page. The program information, user data and credit card information all contained in one place, to make it a good user experience.

step 5 Credit card payment form

Step 6. The confirmation page contained all the information from the order page and allowed the user to download there temporary drivers licence in pdf, so that they had it immediately. An email with the information would also be sent to the user.

step 6 order confirmation page

The mock-up screens were well received as a solution to the current process. The hope is to build a prototype to test on users and then implement into production for the public to use.