Product designer
@ Government of Ontario
For my product design internship, I worked on a multidisciplinary team to design an appointment booking system, which could be used by millions of Ontario residents to expedite their visits to government offices.
4 product designers
2 product managers
1 project manager
2 front-end devs
5 weeks
Sep - Oct 2020
Miro
Figma
ServiceOntario is a government office where Ontarians can process any provincial services, such as renewing drivers licence. Recently, the long wait times from walk-in visitors became a major health and safety concern amidst the COVID19 pandemic. As such, ServiceOntario requested our team to design an appointment booking system.
To streamline people's visits and reduce wait times, we used the Ontario Design System to create an appointment booking tool. With a focus on clear error messaging, it leads the users through all the steps from choosing a service to editing their details.
Select reason for appointment:
Possible to address multiple topics per visit
How many visitors:
Provide flexibility to bring multiple people per visit
Review details page:
Clear error messaging that prompts editing on the same page
Research: recruited for and conducted semi-structured user interviews, developed personas with their empathy maps and user journey maps, and explored possibilities from competitor analysis.
Design: ideated solutions via crazy 8s, developed user flows, created lo-fi to high-fi prototypes, conducted cognitive walkthroughs, and collaborated with developers to create a working prototype.
Stakeholder interviews (6)
Semi-structured user interviews (14)
Competitor Analysis
Observations
The usual long lines outside of ServiceOntario is not just a source of frustration anymore; it is now a health and safety concern during the COVID19 pandemic.
We interviewed:
• 14 public users
• 2 ServiceOntario location managers
• 3 appointment booking system admins
• 1 call center representative
Through an affinity diagraming session, we identified four main actionable insights.
Only 10% of the people book an appointment. People don't know that they can book appointments by calling.
Not all services are offered at every ServiceOntario locations.
People get turned away often for not having the correct documents.
People dedicate half a day for a visit because they don't know how long the visit would take.
We discovered common features for an appointment booking system:
• progress bars
• client-side validation
• address list with map
• prominent error messages
• appointment confirmation screen
To help guide our design decisions, we also created two personas with their empathy maps and user journey maps.
They proved to be invaluable in helping our stakeholders empathize with the users. Meet John and Alex!
.png)
.png)
Putting ourselves into the place of our users is the best way to understand their frustrations!
For a comprehensive service design project, we mapped out the entire journey of people visiting ServiceOntario.
People are often frustrated by not knowing what to bring and waiting in line.
We have observed that the ServiceOntario appointment booking service is not common knowledge and doesn't provide important visit details, which is causing long line-ups, increased call volume to call centers, and customers to be turned away at the counter.
How do we bridge the gap between user goals and business goals?
We discussed the overlapping goals with the product managers to get alignment on the metrics. These success metrics will be used to evaluate the project success.
This evaluates the discoverability of appointment booking and uptake on it.
This evaluates the effectiveness of the appointment booking system at reducing wait time/lines.
This evaluates the effectiveness of the appointment booking system at directing users to complete transactions online (Ex: renew health card online).
By sketching wireframes, creating user flows, stating assumptions, and exploring different designs, we arrived at our mid-fidelity prototypes!
Everyone on the team sketched potential screens in a crazy eight brainstorming session.
Through discussions and critiques, we converged to a key set of features by highlighting them with stars in the sketches.
How can we integrate the appointment booking system into the existing Ontario.ca website while making it easily discoverable?
Using Google Analytics and Google Trends, we assumed that users would search for a specific service they need to complete or a specific ServiceOntario location they wish to go.
For our first design sprint, we created our prototype with a mobile-first approach. Using the Ontario Digital Services design system, we quickly built a mid-fidelity prototype.
We explored many layouts and interactions. The map view exploration is highlighted here.
After conducting an internal design review with a senior designer, we chose option 2.
Great designs come from stating all assumptions and validating them.
We created this list to validate in our subsequent user interviews and stakeholder discussions.
1. People are finding their visit information by searching for a specific service or specific ServiceOntario location.
2. People are not bringing the right documents for their visits because they don't know where to look.
3. Not many people book appointments because they don't want to call or they don't know about this option.
Using Google's weekly design sprint format, we completed 3 sprints from mid-fidelity wireframes to high-fidelity prototypes! During this process, we conducted usability testing with 15 users.
In the following three weeks, we underwent a vigorous cycle of analyzing insights from the previous week, exploring different designs, iterating on the prototype, conducting usability testing, and presenting our findings to our clients.
We first tested and validated assumptions about the users. One of our assumptions was incorrect: people also search for "ServiceOntario" and "ServiceOntario locations" when they are looking for information for their visits.
We created two additional user flows.
We conducted 15 user tests. I helped facilitate many of these sessions and took notes on Miro.
Together, we collaborated on pulling actionable insights from our interviews in affinity diagraming sessions for each sprint.
With these insights, we made improvements throughout our sprints, with some highlighted below.
Case scenario guide for this prototype:
1. Alex wants to renew her driver's licence and health card. Her husband wants to renew his health card on the same trip.
2. Alex wants to go to the Centennial and Burton location in Hamilton, Ontario.
3. Alex is available at 1:45pm on October 14th, 2020.
4. On the review page, Alex remembered that she wants to renew her outdoors card too.
5. As an alternative location, Alex can go to the King and McNab location.
As part of our final designer to developer hand-off, we designed a desktop version to reflect all the screens and error messages.
The alpha phase of the project is complete! Next, the findings and prototypes will be passed on to the beta phase team, who is responsible for further examination and implementation. Some immediate next steps are:
The alpha phase of the project is complete! Next, the findings and prototypes will be passed on to the beta phase team, who is responsible for further examination and implementation. Some immediate next steps are:
To cancel or edit appointment features, the production team needs to examine the back-end system first to identify what is feasible for the front-end experience.
What are the logistical implications for internal business processes if there are significantly more appointments booked? How will resource planning be affected at each location?
When the system is in the live phase, the identified metrics will be used to evaluate the effectiveness of the appointment booking using tools such as Google Analytics, internal appointment tracker, and customer statistics collected at ServiceOntario locations.
Throughout our usability testings, unclear and lengthy language was one of the main causes for confusion. Luckily, Karin Tang, who is a content designer, critiqued our work and provided many suggestions. I learned the importance of content design and how to use the Hemingway Editor to write in a clear and concise manner.
Throughout our usability testings, unclear and wordy language was one of the main causes for confusion. Luckily, Karin Tang, who is a content designer, critiqued our work and provided many suggestions. I learned the importance of content design and how to use the Hemingway Editor to write in a clear and concise manner.
This project was completed entirely remotely. As a team, we learned how to work effectively and efficiently together. Each week, we had a retrospective to reflect on what team processes can be improved. Issues we addressed include the handoff process between designers and developers, and when to co-design vs divide and conquer.
Myuri and Warren are completely new to UX design. This project is a training opportunity for people from other teams. Mentoring Myuri and Warren helped me solidify my design understanding as it encourages me to explain concepts and methodology in a clear and concise manner.
