UX Design and Research

Provincial Park Online Registration Application (CAMIS)

This online application allowed campers to register a campsite if they have not created a reservation.

A draft version of the registration home page
Low fidelity mock of landing screen
a final mock of the park's online registration home screen
High fidelity mock of online registration landing screen
screen listing the parks that have availability
High fidelity mock of park availability search
a version listing a site's availability displayed on a calendar
High fidelity mock of a site’s availability displayed on a calendar
mock of site details display
High fidelity mock of site details

Shopping Cart Improvements (CAMIS)

Improvements included: highlighting the desired action by changing the Pay link to a button; combining location and site type into one field; and, also combining arrival, departure and nights into one field. This minimizes the cognitive workload by decreasing the number of fields from 8 to 5.

Updated shopping cart UI
Updated shopping cart UI
old shopping cart UI
Old shopping cart UI

 

Ontario Cabinet Office Wireframes

Wireframe for Drive Clean require a test widget
Wireframe for Drive Clean require a test widget
Wireframe for Drive Clean finding a test facility widget
Wireframe for Drive Clean finding a test facility widget
Wireframe for the Emergency Information landing page
Wireframe for the Emergency Information landing page
Wireframe for the Flood Information page
Wireframe for the Flood Information page

Digital Inclusion: Improving access to online health information for people with complex chronic conditions.

This was a Mitacs Accelerate project in collaboration between OCAD University, Bridgepoint Collaboratory for Research and Innovation, and Gravity Ltd. The purpose of this research project was to utilize innovative, interactive and user-centred approaches and inclusive design strategies to better meet the online needs of a complex patient population.

Research project: Digital Inclusion: Improving access to online health information for people with complex chronic conditions
Research project: Digital Inclusion: Improving access to online health information for people with complex chronic conditions.
User Experience Map

This is a UX map that was created for this project, which was based on a persona we created from the user sessions that were conducted .

User Experience Map of a user who visits a health website
User Experience Map
Low-fidelity Wireframe

This is one of the wireframes that was created after the initial usability testing of the original website.

Low-fidelity wireframe of a health website
Low-fidelity wireframe of a health website
Usability Testing Infographics

These are the infographics that were created to illustrate the results from the usability tests in this project.

Infographic showing phase 1 usability testing results for a health website.
Infographic for phase 1 usability testing results
Infographic of phase 3 usability testing results for health website.
Infographic for phase 3 usability testing results
Handout for Participants

We provided the participants with a quick tips card as a take away from the usability test.

Quick tips card presented to participants after health website usability testing. Shows the keyboard shortcuts for Windows and Mac, such as undo "ctrl+z" & "cmd+z"
Quick tips card presented to participants after health website usability testing

Web Accessibility Recommendation for Online Forms

This is a sample from an accessibility audit that I have conducted; A recommendation about making online forms easier to use and accessible. This example regards error recovery.

Providing form input errors on top of the form with information about error and links to each input field.
Providing form input errors on top of the form with information about error and links to each input field

User Gap Quad Drawings (MDes)

This is a drawing illustrating a feature to find a more descriptive (useful) alt tag for an image (if it is available elsewhere on the web).

A quad drawing illustrating the issue of displaying art through a non-visual form
Quad drawing used to address a problem gap (2012)

This is a drawing addressing the need for one site that a designer/developer may use to address web accessibility and AODA.

Quad drawing illustrating the problem gap of finding resources to test web accessibiity (2012)
Quad drawing illustrating the problem gap of finding resources to test web accessibiity (2012)