Improving the online renewal process of driver's licences and health cards.

Every five years, Ontarians must renew their driver’s licence and health card to maintain their benefits.

Ontario’s online renewal platforms were meant to provide an efficient alternative to the in-person process. Instead, the service’s incoherence and exclusion of those who do not have a driver's licence left thousands of users frustrated and confused.

I was part of an ambitious project to redesign Ontario’s renewal experience for its over 5 million annual users.­­­

Project Info


What did our weekly sprints entail?

Mondays were focused on user research, Tuesdays and Wednesdays on prototyping, Thursdays on user testing, and Fridays on presenting our findings.

To ensure thorough and clear communication, every day began with a stand-up and ended with a check-in.

RoleTeamToolsDuration
Product thinking1 lab leaderFigma, BalsamiqSept. to Oct. 2019
Prototyping1 lead designerMiro, React(5 weekly sprints)
User research2 developers
Developer handoff2 product designers (incl. me)

Defining Key Pain Points


During our team's initial meetings with the current stakeholders of the renewal platforms, we were informed that on each of the platforms, there was a Rate Our Service form that users could fill and submit.

Seeing that analyzing this direct and honest feedback would be one of the best ways for our team could begin to empathize with the frustrations of these users, our team seized this opportunity and efficiently categorized over 1,593 submissions based on topic and frequency.

Our team then identified the most prominent complaints and focused our future redesign efforts on amending these pain points.

Gather dataAnalyze feedbackIdentify pain points
1,593 feedback submissions3 pain points

Turning Suffering Into Solutions


From our discussions with subject matter experts and analysis of raw user feedback, our team diagnosed three major issues with the current service:

Difficult to find the appropriate service

"The system only works if you are renewing both [of your cards] at the same time. This means I have to go to a ServiceOntario centre for my health card just because I do not drive. I'm very disappointed."

"If you did not click the correct link at first, it was very difficult to find the option to renew just your driver's licence and not your health card."

Combine the standalone and integrated services into a universal renewal service

Can’t understand why they cannot complete the process

"After I entered my driver's licence information, I was told I was ineligible without indication of the reason. If I am considered ineligible to renew online, please tell me why."

"My renewal was denied and I was not given any reason besides 'you're not eligible'. I think the government owes more explanation when it denies a service to a citizen."

Explain the reason of all errors and clearly outline next steps

Redundant and convoluted text and questions

"Had to enter my name thrice and address at twice after I had already selected that there have been no changes. Very annoying!"

"It wasn't clear on the site when I need to get a new photo in-person. A line of added text on this topic in the instructions would be useful."

Reduce the repetitive input of information and simplify language

Understanding the User and Project


View the complete research process including site audit, journey maps, premortem, stakeholder analysis, and jurisdictional analysis here.

Defining the Challenge


Considering how one of our product owner's primary concerns when approaching this project was that our redesign's scope would be too large, our team approached our problem definition with a divergent and convergent thinking process.

How Might We's

From our initial research, my fellow product designer and I ideated a diverse set of solutions to users' current problems.

Whether it was further improving the effectiveness of help modals, reassuring the user of the information they input, or optimizing the Ontario.ca topic page's representation of renewal services, this divergence in our brainstorming then allowed us to converge upon a single problem statement:

Problem Statement

We have observed that the ServiceOntario online renewal flows are not meeting user needs, which is causing low completion rates, negative user feedback, inclusion concerns, and low uptake on digital services.

How might we design a one-window digital renewal transaction flow that promotes usability and inclusion by reducing time on task and increasing positive feedback on eligibility?

Starting With the Best Case Scenario


Especially with a renewal service, there is certainly no lack in the number of paths, exceptions, and errors that a user can take to encounter along their journey.

Thus, we first highlighted the requirements that a user would need to meet to successfully renew their driver's licence or health card.

Then, to emphasize an easy and effortless central flow in our redesign, we identified the key set of steps that a user would take to successfully renew their driver's licence or health card.

User visits platform

Selects type of identity card to renew
Enters identity card information
Answers eligibilty questions
Pays for renewal

Receives their renewed identity card!

Creating Our Concept


Ideation

Our team individually sketched user flows and interfaces in five-minute brainstorming sessions and presented our designs to the group.

Consolidating Our Ideas

We then combined the strengths of our ideas into a final user flow that represented our team’s vision of the redesigned renewal service’s golden path.

Low Fidelity Prototype

With our lead designer, my fellow product designer and I then created a low-fidelity Balsamiq prototype that simulated this ideated flow.

Clarity, Clarity, Clarity


Equipped with a low-fidelity prototype of our redesigned renewal platform's ideal user journey, my fellow designers and I traveled to the heart of downtown Toronto to conduct guerilla user testing.

TeamInterviewsPrototypeLocation
Lead designer and two product designersEight 15-minute interviewsBalsamiq prototype on iPad777 Bay St. ServiceOntario

This ServiceOntario location was the busiest in the entire province!

Did we target any specific user segments?

Yes, we aimed to talk to demographics who were less familiar with technology, such as seniors.

If our solution made sense to them, then hopefully it would make sense to everyone else!

Our team then synthesized our findings into prototype iterations to consider in next week's sprint. Here are some highlights:

01

Ensure the user is informed before they begin

"I would want to know requirements, fees, what they need to have out, possibly how long it will take to complete."
"I don’t want to go through the whole process just to realize I don’t have the funds to pay for my renewal"
Show fees for each renewal type
Display duration of transaction
Exhibit what information the user will need
02

Remove ambiguous language

"What is a trillium number? (not a single user knew what or where their trillium number was)"
"What 9 characters is this referring to? Is that my social insurance number?"
Replaced government terminology with description
Always display the number’s location on the card

Designing Alternate Paths


For our second iteration, our team considered a more realistic approach for our redesign - it was time to integrate in error states and eligibility complexities. Thus, we once again collaborated with stakeholders to ensure that our solution would be able to encompass all of the necessary technical requirements of the previous platform.

Extending a Helping Hand


It was time for our second round of guerilla user testing sessions! This time, having gained more confidence and practice for the user research methodology, my fellow product designer and I went by ourselves.

TeamInterviewsPrototype
Two product designersEight 15-minute interviewsBalsamiq prototype on iPad

Equipped with a much more comprehensive prototype, we were able to gather a richer understanding of the end users' reactions to our newly designed ineligibility errors and transaction summary page.

03

Include next steps after errors

"Okay so I’m clearly ineligible, but could you give me a bit more explanation on next steps now?"
"Please show more next steps in the error, I would not not how to proceed from here."
Direct them to the nearest location to complete the in-person process
Provide an alternate path to continue their online renewal
04

Allow users to edit previously entered details

"I should be able change the information and then hit “save” and come back to the review page."
"I should be able to edit my contact information directly on this page."
Edit buttons allow users to fix their mistakes
Can edit contact information directly on the page

Transitioning to High Fidelity


Halfway through our engagement, it was time for our team to translate our Balsamiq prototype to Figma.

Content is Key


With ten facilitations of guerilla usability testing sessions under my belt, it was time to help a developer teammate learn these key user research principles during our third round of user testing!

Whoa, a developer?

Yes! After two rounds of guerilla user testing, my fellow product designer and I were expected to train the lab's developers

TeamInterviewsPrototype
One product designer and one developerNine 15-minute interviewsFigma prototype on iPad

Once again, one of our dominant issues was a lack of clarity in the content used in our design. Now with a month of experience in the problem space, our team likely had become so familiar with government terminology that we had not considered how confusing its use would be to our user base.

We noted these findings, and after presenting them at our weekly show and tell, we were able to work with our content designer to implement their feedback.

05

Clearer ineligibility states

"This error would greatly disappoint me, but I guess I’d just have to deal with it."
"Can you provide me with more explanation on why I’m not eligible for online renewal?"
Specifically state the issue(s) that caused the error
Inform the user about the necessary resources they will need to complete the process
06

Describe complex terminology

"Full class portion? That’s very ambiguous and unclear."
"I’ve had my licence for over twenty years and I’ve never heard of the term ‘full class portion’ before."
Provide a detailed description with example scenarios of applicability
Supply optional links for further explanation

Implementing Inclusivity


In our discussions at the beginning of this engagement, one of the most urgent requests brought up by stakeholders was for us to integrate the renewal of the Ontario Photo Card into the platform.

Once again, our team collaborated with stakeholders to define the ideal user journey and document the complexities of the in-person renewal service to effectively translate this process into a efficient online process.

Here was our Figma prototype in our fourth weekly sprint:

Polishing the Prototype


Though only my fellow product designer and a developer conducted this final set of guerilla user tests, I was nevertheless was instrumental in integrating the gathered feedback into our prototype.

For this iteration, our team learned the importance of taking the vertical restriction of a mobile user interface into account in our coded prototype.

07

Starting above the fold

"Where is the start button?"
Segmented information onto another page for a gentler introduction to the platform
Ensured that the 'Start' call-to-action button was visible above the fold
08

Surface helpful information first

"I don't know where my 7 digit number on my driver's licence is"
Placed the hint image before the input field to ensure that the user views the explanation first

Results and Recommendations


Though we were unable to present our final prototype to the executives of the Ministry of Transportation and Ministry of Health that we were partnering with, we still were able to summarize our reasoning and display our prototype to our product owners.

After our presentation, one of the product owners stated:

Jayden understands complex nuances quickly and thinks in a user-centric way. He is excellent at trying something, getting valuable input from real users, iterating, and documenting findings. Beyond great results, it's a pleasure to work and collaborate with him. He's a quick study and also a collaborative partner with subject matter experts.

Learning and Growing, One Project at a Time


Working in the Ontario Digital Service Kitchener-Waterloo Lab was an unforgettable experience. Not only did projects such as this allow me to exponentially grow my skillset through exposure to unique, enterprise-level opportunities, but this small but mighty team of six taught me how to enjoy every second of it!

Despite this growth, I still recognize that my designs and process are far from perfect. In the spirit of our team's weekly retrospectives, here are my three areas of future improvement:

07

Talk to users directly

No matter how confident I felt in my assumptions about the problem space, that's all they were - assumptions. This project reinforced my belief in the importance of user feedback to ensure that our prototype met real-world expectations and needs.

08

Be comfortable with being uncomfortable

Despite my extroversion, I remember how uncomfortable I was during our first guerilla user testing session. However, once I approached that first stranger and successfully conducted an interview, I recognized the situation as an opportunity to learn. While it will be frightening, I hope to approach future situations with a similar eagerness to explore.

09

Challenge my capabilities

When our team was told that we had a week to create a prototype with Balsamiq, an application that I had never used before, I knew that I was up for a challenge. After experiencing rapid growth in my skillset as a result of this short time frame, I have recognized that learning thrives in difficulty.