Summary

A web portal application for community members of the Richmond Centre for Disability to renew their accessibility parking passes; product design and user research.

• Used by 500+ community members annually
• Replaced 100 of hours in manual document processing

Overview

Located in Richmond, British Columbia, the Richmond Centre for Disability is a non profit representing issues and barriers faced by people with disabilities to local government, businesses and community.

RCD offers a range of services and programs to their community, one them being the processing accessibility parking permit applications, renewals and replacements.

Problem

Community members needed to collect forms in person, fill them out and submit them manually to begin the application process for a new permit. At the time RCD processed all permit applications manually, which also took a lot of time to search through.

Getting a new permit was a slow, manual process, both for RCD and their community members.

Solution

My team created a web-based application management portal, made of two parts:

#1: An external portal where community members can:

• Apply for, renew or replace a permit online from home
• Receive updates on the processing

#2: An internal management system where RCD's administration can:

• Validate and review permit applications
• Track and search community members’ profiles and applications

As 1 of 3 designers, I worked on the part of the application portal used by RCD's community members to apply for, renew and replace their parking permits.

Big Takeaways

• Co-designing with RCD's team
• Intelligible form design
• Usability testing

Co-designing with RCD's team

From meetings with their internal team we mapped the experience registering new users, issuing parking permits and managing their renewals.

We started the design process with a strong understanding of their current process, and tested our prototypes against their current user flows.

Intelligible form design

Since 50%+ of the user base had low tech literacy, I prioritized making the experience easy to use and as familiar as possible. Early in the form design, I considered these 3 alternatives;

1. Full form page

2. Paginated sections + progress bar

3. Accordion sections

Usability Testing

To make better choices on the form design options, I ran usability tests, asking users to vocalize their train of thought, decision making, and frustrations as they attempted to navigate the permit renewal process.

From the tests, I observed more users consistently navigated through the accordion form with accuracy to the given task. The page-by-page granted better focus for users to centre their attention on 1 form group at a time.

I refined this design into higher detail, using components from our design system, Chakra UI, and creating custom ones where needed.

The final (and current) version uses a stepper component in place of the dropdown bar. It gives the user a clear view of their progress in the form and the flexibility to edit at any point

Conclusion

There was a lot to learn in the process for me, these were some particular lessons I'm taking from this project into my future designs;

• People find it easier to digest smaller groups of information at a time. Creating the initial wireframes, I found it helpful to think from "how do I make it easy for people to identity what to do next"
• For responsive experiences, start with mobile design first. It's easier to adapt from smaller to larger screens. Some layouts and components that appear functional on desktop don't necessarily translate.
• Test early and often. This applies with respect to any type of design/product process. It matters most when you're creating a service that's new to the people who would use it.