An accessible website to apply for BC’s Property Tax Deferment Program, guided by research and usability testing
Designed during the first half of my 8 month co-op at LandSure Systems, a subsidiary of the Land Title and Survey Authority of British Columbia (LTSA) that develops and operates the LTSA’s technology enabling land-related transactions.
My Roles
User Interface
Usability Testing
Developer Communication
My Tools
Axure 9
Jira
Timeline
May - August 2019
4 months
Note - This website was never released to the public, as the client decided to go in a different direction. As such some content has been removed, namely in the mockups.
intro
The Brief
Improve the current Property Tax Deferment Program online information repository, eligibility check, and application process. This was part of the Ministry of Finance's Revenue Transformation Initiative (RTI), a multi-million dollar project.
When I joined the team a skeleton of the website had been laid out in Axure 9, but it had no refined design system.
My roles were to:
Create a simple design system
Communicate design changes to developers
Refining the information architecture through usability testing
Why
The original process for checking your eligibility and applying to this program were disconnected and arduous. Checking for eligibility could be done online through a disjointed calculator, while applying had to be done on paper.
Also, it was critically important for the components to be accessible as this website would be used by the general public, with a focus on parents and people aged 55+. We knew it would be highly likely that people with, for example, vision impairments would use this website.
early designs + research
Research + Begin Designing
I began by researching the Web Content Accessibility Guidelines (WCAG) 2.0, focusing on meeting Level AA requirements. I also researched government design systems that heavily focused on accessibility, like the UK Government design system.
I would begin by sketching a few variations and then designing the most promising one in Axure 9. Throughout this process I would show the design lead my progress, and receive feedback for constant iteration and improvement.
Communicate Design Changes to Developers
As we updated the Axure wireframes with the new components, I would communicate these changes to our developers through Jira, a software development tool for tracking projects. I would create structured ‘issues’ that outlined these changes and their interactions.
I would also go through the websites dev environment when new changes were added. If I found any inaccuracies or bugs I would report these in Jira directly to the developer who had worked on it.
As this project had an agile development, it was an iterative and incremental design and development process where we had open communication with the developers. I often communicated with them to receive suggestions and feedback that I would iterate on and incorporate into the design to further improve it.
Conducted a Usability Test
The design lead and I conducted an internal usability test with 6 participants. I designed the test plan and script, and during the usability tests my role would alternate between facilitator and note taker.
After the usability test I compiled all our findings in a spreadsheet, and translated this into an easy to read poster of the main insights that we could reference throughout the remainder of the project. This influenced how we could improve the flow of the application process, and how to improve the interface.
view full usability test results poster
BC Design System
Up until now BC had no Design System or Style Guide. Two thirds through the project a work in progress version of the BC Design System was released. Only a few components had been created, and the guidelines were sparse.
Due to the limited nature of the BC Design System we decided to not fully commit to it, and use it only as an inspiration.
Alerts were not included in the Design System, so we used my designs that utilized colour and icons to convey meaning. Some of the components in the BC Design System have low opacity coloured backgrounds, however this can present contrast issues, so I decided to keep our body text against a high contrast white background
Form field errors were included in the clients Design System, but we found them to not convey an error as clearly as they should. Taking inspiration from the UK errors, I included an attention grabbing bar to clearly convey the error state. This way all users have an opportunity to see the error.
final designs
Design System
All accessibility requirements were met for level AA accessibility. For example all colours and fonts have a high contrast for readability, even the disabled buttons.
Screen readers were kept in mind, as all field help text is given context by starting with ‘For example,’ and placed above the field to situate the help. This way, regardless of the screen reader being used, it can easily read the help text.
Checkboxes and radio buttons were enlarged compared to the BC Design System to be easy to select and understand.
A date selector and help dialogue had not been created in the BC Design System, so they were designed by myself. I made sure both components have an appropriate spacing of their parts to create a strong overall relationship.
Home Page
Due to the usability test conducted earlier we were able to improve the information architecture of the site. For example, originally the ‘Start a New Application’ call to action used to be below the fold. Many participants had trouble finding this, so we moved it to a prominent position at the top of the page.
The copy for the left menu also changed after testing, by incorporating actions words to better convey to the user what they can accomplish in each page.
The main page sections are listed at the top, so users have a quick overall understanding of the information on each page, and can select the specific section they want to skip to.
It was my job to convert all the desktop layouts to mobile, and to clearly convey how the site would be responsive to our developers.
Application Process
The top progress bar is clearly segmented with a ‘Check Eligibility’ and ‘Apply’ section, as influenced by usability testing when participants were confused about the overall process without it.
I designed question cards to explain important information and definitions on the page, as opposed to before when there would only be a link to a different page with the needed information. Similar to the alert components it has a meaningful question mark icon, and a high contrast white background for the body copy.
Each page has only one question, which usability test participants enjoyed the clarity and ease of. They also enjoyed the sticky navigation buttons that were consistently present and the bottom of the page.
Reflection
Accessible Design
From this project I learned about the importance of designing accessible UI, and I’m looking forward to bringing this knowledge to all my future projects to contribute towards a more accessible world.