Introduction

This website was built for the Ontario Gov’t – Invest in Ontario and is a portal for government programs and services that support and promote business in Ontario. The mission statement of the project is:

launch an online portal to help firms easily find and navigate the programs and initiatives it provides across government.

Ontario Business Portal Guide thumbnail

When I came on board, the project was already two months into the design and development of the website. It took six months to bring it from start to launch. The team met the targeted launch date of May 17, 2017.

My role involved UX/UI improvements, responsiveness, accessibility testing for AODA compliance updates and front end development.

Personas

We needed to know who our users were. By having discussions with stakeholders on who would be using the website, I was able to target our typical user. My personas consisted of three typical users. They helped with focusing what the users needs are and make a better user experience model. This aided with facilitating the design and development of the website.

example of a persona used for obpg website

Brand Identity

The color palette used was based on colors used by the ontario.ca website. All interface and link colors had to align with the Ontario.ca website, along with background colors. Typography was simplifes to one font family ‘open sans’. I used bold versions to distinguish headings from body content. The Ontario gov website was going through an overhaul of the existing style guideline to incorporate a design system. The challenges were inconsistencies in styles that had to be adhered to but weren’t implemented. I was able to clarify any branding issues with stakeholders in the organisation. ie heading typography inconsistensies.

color palette for obpg website

Responsiveness

Commencing from smallest resolution width of 320 pixels, I had to ensure that the website was functioning correctly. The main objective was to have the call to action accessible which was the search field. In the comparison graphic below, I mocked up how it currently rendered and how it should render. I wanted the call to action to be visible within the viewable screen whether it is mobile or desktop. This required css edits to the CMS in implementing the new design. Header links needed to be spaced properly as well as whitespace surrounding the content.

The mockup below was created by me, to compare the current mobile version with my proposed mobile friendly design.

mobile view of mock up for obpg

Core Experience

The accordion search app was to provide the main funtionality of the website. All program searches are acheived through it. After the first round of user testing, the feedback received indicated that the user experience needed to be improved on.

  • Using whitespace to define the section area and the outline of the content contained in each box. Whitespace allows the eye to focus on the important elements on the page.
  • Have a mouseover color change when user hovers on an accordion tab, to indicate it is to be clicked. Some users thought you had to click the arrow to expand it.
  • Change header text, size and color to guideline recommendations for H1.
  • Increased spacing between boxes from 10px to 30px to help increase readability and aligning elements in the page, so that they aren’t constrained and crowded.
  • Increased the size of the icons to fill out boxes and help portray representation of each box.
  • Changed box titles to meet guidelines for H2 markup which is required by standards for AODA.
  • Added email icon to feedback circle in bottom right. It is not a good user experience to have to mouse-over an object to find out what it is/does.