ServiceOnt App Mockup
Frame-1-4

ServiceOntario App

The ServiceOntario App is the mobile extension of the ServiceOntario website. The mobile app allows users to personalize their accounts, efficiently navigate and access their government-related documents and renew licenses and health cards on their mobile phone.

ROLE

UX Designer

UX Researcher

UI Designer

TIMELINE

10 weeks

TOOLS

Figma, Sketch, Marvel, Invision

PROJECT TYPE

Academic

BrainStation

UX Design Process

Design-Process

DISCOVER

Design Challenge Opportunity

I visited a ServiceOntario center with a friend in hopes of transferring their car ownership license. It was supposed to be a simple procedure but we ended up waiting in line for more than 1.5 hours for a task that took less than 10 mins. This got me questioning why such a short task ended up taking much longer than it should have. So I looked more into this issue. 

Research

I gathered from my initial research that, as a result of the pandemic, overcrowding in front of ServiceOntario centers has increased. Individuals in line are at risk of spreading Covid-19 as physical distancing rules are not strictly enforced. This is dangerous for workers, customers, and passersby during the pandemic.

DEFINE

Defining the Problem

Problem Space

Reports from CBC and York Region.com consisted of many complaints regarding the long lineups from both customers visiting ServiceOntario centers and the neighboring businesses around the center. With reduced hours and physical distancing measures in effect, the extended lineups for these centers are occupying spaces that are affecting neighboring businesses and risking the safety of all the individuals in the vicinity.
ServiceOntario has a large backflow of customers visiting their locations as a result of Covid-19. With physical distancing measures in effect, extended lines are blocking neighboring businesses and risking the safety of all the individuals in the vicinity.

People Affected

grandparents-1

Flaticon

Elderly are most vulnerable during the pandemic

angry

Flaticon

Customers In Line

people

Flaticon

Neighbouring business entrances are at risk of being blocked as a result of the space the lines take up

Design Question:

How might we improve the waiting process for individuals visiting ServiceOntario centers, in order to reduce the volume of people crowding the spaces outside the service centers?

DEVELOP

Ideation 

Hypothesis Statement

I believe overcrowding in front of ServiceOntario centers is risking the safety of individuals in line as well as those in the vicinity. 

I know I'm right when reviews and interview responses are consistent with negative experiences regarding the lineups at ServiceOntario centers. 

I believe that a system to track live wait times or an appointment-based system for individuals visiting the service center will help reduce traffic and improve the safety of all individuals in the shared space. 

I know this is true when I see individuals utilizing these new services and reduced lineups outside ServiceOntario. 

To prove my hypothesis, I conducted interviews to gain more insight into existing customer experiences. 

Interview Findings

I interviewed 6 different people aging from 25 - 60, all with varying experiences and thoughts about ServiceOntario.

Important Information: Although expiry dates are extended due to the pandemic, virtual services keep crashing, which leaves individuals the only option of visiting the service center. 

undraw_Meeting_re_i53h

Insights

Opinions were either negative or neutral. 

4/6 had a negative experience as a result of extended lineups and mediocre customer service.

Every individual expected long wait times before visiting the service center.

Quotes That Stood Out

"I don't feel safe in line. They are too long. People are physically distancing but the rules are not strictly enforced. Some people don't even wear masks since part of the line was outside”

"Just an experience I want to get over with as soon as possible cause its just such an irritating process”

"I once waited 2hrs just to get a max 10 min task done”

From the interview results, I created value maps from each interview to help me realize recurring themes. I organized the notes into Pains, Gains, Jobs, and Feelings.

 

Recurring Themes

 
time-left
Wait Time
technical-support
Service
shield
Safety

Persona

Based on the interview results, I created a persona and a experience map to help guide my design solutions.
I explored different user stories to better understand what features might be needed for the design solution.

User Stories

Group-5

 

 

4 MAIN EPICS

  • Customer Service
  • Organization Through Profile
  • Communication
  • Updates

EPIC SELECTION

 

 I narrowed down my focus to Customer Service and created more user stories.

I chose 1 story to focus my task flow for my digital solution which would eliminate visiting the service center entirely. 

Screen-Shot-2020-10-27-at-10.37.27-PM-1

As a user, I want to upload documents virtually so that I don't have to visit the service center.

Task Flow Diagram

Task-Flow

Concept Sketches

Image-from-iOS-3-1
From the 4 sketches, I chose the one above to digitalize. I felt that it was straightforward forward and it fit well with the selected task flow. 
Image-from-iOS-2-1
Image-from-iOS-1-1
Image-from-iOS-4

Prototype 1

Screen-Shot-2020-12-10-at-5.53.58-PM

User Testing 1

I tested this design with 5 different people and asked them to complete several tasks. 

Scenario: Your driver’s license photo is about to expire. To avoid visiting the service center, you are planning to use the Service Ontario app instead to renew your driver’s license online.

Assume that you have already registered and created an account.

Task 1 - Search for license renewal 
Task 2 - Upload an image
Task 3 - Scan a document
Task 4 - Submit application

Prototype 1 Test Results

Screen-Shot-2020-11-16-at-9.28-1

Key Insights

  • The search results did not look like they were clickable
  • Most testers pressed the chevron in the background to exit the pop-up screens instead of the X button
  • Flow is straightforward and easy to navigate 
  • Services page was under search icon in navigation, which caused confusion for some people
  • Wanted more instruction on upload image criteria
  • Being able to submit the form with missing information did not make sense

ITERATIONS

Screen-Shot-2020-12-10-at-6.26.29-PM

Issue 

Search results did not look like they were clickable

 

Solution

I contained the options in cards and added a chevron to let users know that they could move forward by clicking one of the options

I also added a search bar on the top in case users did not find what they were looking for. 

 

 

Issue

Testers kept pressing the chevron to exit the pop-up instead of the X button

Solution

I blurred the background to make the pop-up more prominent and to help users exit the page.

Screen-Shot-2020-12-10-at-6.33.02-PM
Screen-Shot-2020-12-10-at-6.40.52-PM






Not a major issue, but I wanted to implement an extra feature for users to take a picture directly to upload.

Prototype 2

Screen-Shot-2020-12-10-at-5.54.27-PM

User Testing 2

Scenario (Same as test 1): Your driver’s license photo is about to expire. To avoid visiting the service center, you are planning to use the ServiceOntario app instead to renew your driver’s license online.

Assume that you have already registered and created an account.

Task 1 - Search for license renewal 
Task 2 - Upload an image
Task 3 - Scan a document
Task 4 - Submit application

Prototype 2 Test Results

Screen-Shot-2020-11-16-at-9.28-2

Key Insights

  • A slight disconnect between services and documents on the home page
  • Hierarchy issue with main options on Home screen
  • The flow was straight forward just minor information issues
  • The process of filling out information can be improved

ITERATIONS

Screen-Shot-2020-12-10-at-8.09.06-PM

 

 

Issue

The hierarchy of the options on the home page was confusing

Solution

Made the Call To Action (CTA) buttons larger and organized them by the importance

 

Issue

The services page was too general. Although there were search prompts, testers wanted more direction or options to narrow down their search

Solution

Included different service categories so users can view what is available.

Screen-Shot-2020-12-10-at-8.13.38-PM
Screen-Shot-2020-12-10-at-8.17.32-PM

 

Issue

One tester brought up the question, “What if they can’t find what I typed in?” Some testers missed the search bar completely due to the size and placement

Solution

Added a note at the bottom to redirect users to a different page if they are having issues.
The search bar was made larger and a few search prompts are listed underneath to help users narrow down their search

 

 

Issue

Form submission process could be improved. Two testers failed to attach a scanned document before submitting the form.

Solution

Clear break-down of required steps and instructions on what to expect next.
Separated form into 3 main sections.

Screen-Shot-2020-12-10-at-8.20.02-PM
Screen-Shot-2020-12-10-at-8.22.00-PM

 

 

Issue

Some testers were confused between the 5 years and 10 year renewal.

Solution

Provided more context for 5 years and 10 years. Under each section, the CTA is available for users to click

 

 

Issue

Application issue. Must include a verification process.

Solution

Users must scan a unique QR code that is sent with the official notice to renew their photo license online. This will provide an extra layer of verification to confirm the identity of the user.

Screen-Shot-2020-12-10-at-8.24.45-PM

Final Prototype

There were many changes implemented from the second prototype to the third. 

The second user testing insights and findings made it clear that there was an issue with the way the submission form was filled out.

Two people failed the scan document tasks but were able to submit the form successfully.

The major change from prototype 2 to prototype 3 is the break-down of the form so users can input different sets of information at a time.

Screen-Shot-2020-12-10-at-8.32.30-PM

Moodboard Inspiration

Screen-Shot-2020-12-10-at-8.58.15-PM
Group-5-2-1

Extracted colors from Moodboard

Brand Name Ideation

I originally wanted to create a new name for the mobile app but I decided against it.

Because this app is an extension of the existing Service Ontario company, I wanted to keep the designs as consistent and professional as possible.

IMG_9071-1

Brand Logo Design

For inspiration, I referred back to the original ServiceOntario logo and the Ontario logo.

I incorporated the simplicity of the white trillium outline which is Ontario's official floral emblem. 

I then injected my brand colors which I extracted from my Moodboard inspiration.

Selected Design

Screen-Shot-2020-11-30-at-8.49-1-1
  • High contrast which is good for accessibility
  • Easily recognizable
  • Included service on the bottom to help differentiate between Ontario Service and Service Ontario
  • Looks professional

Wordmark Design

Screen-Shot-2020-12-10-at-10.00.41-PM

Wordmark Exploration

ServiceOntario Comparison

Screen-Shot-2020-11-09-at-10.10.50-PM
Group-44

Original ServiceOntario Logo



Montserrat Font Comparison

Again, to be consistent, I wanted to use a font that is similar to what ServiceOntario already uses for their website. I noticed the font for Montserrat has slanted San serifs therefore I straighten the verticle San Serifs and experimented with different brand colors.
Group-45

App Design Elements

These are the design elements I used throughout my design. The colors were extracted from my inspiration Moodboard and I created different hues and saturation to create the brand color palette. 

Multi-Platform Integration

Apple Watch

To explore how the ServiceOntario App might be integrated into other platforms, I thought about the different features the app consisted of and related it back to the needs of my persona. 

The ServiceOntario App is a personalized mobile account which allows their users to access government related documents, live wait times and get reminders of expiring licenses. 
I wrote a couple of user stories to see where I could integrate another platform. 

1. As a user, I want to be notified about expiring licenses, so I do not miss the renewal procedures. 
2. As a user, I want to be reminded when it is almost my turn in line, so I know it is time to visit the center.


I looked into different platforms that can quickly inform users of reminders and notifications. I felt that integrating the ServiceOntario App for the apple watch could be promising.

From the two user stories, I designed 2 different screens for the Apple Watch.

Group-8
Group-8-1

DELIVER

Design Impact & Reflection

Design Impact

My solution to this challenge will impact the experience of ServiceOntario clients to help them navigate through their services in an efficient and easy-to-follow manner. This app will offer clients more opportunity to complete tasks within their own schedules, while also having access to live center waiting times, to plan accordingly.

CONCLUSION

Reflection & Key Takeaway

Self Reflection

Design Process

Throughout this 10 week design process, I learned that designing for the user and not for myself is not as simple as I thought it would be. One of my major takeaways from this experience is to always emphasize what the user needs. I often find myself making design decisions for the sake of making it look “pretty” and often fall short of getting the main idea across. 

It is my job as a UX designer to always vouch for the user and create the best possible experience. Although this project has been completed, there are still lots of areas I wish to improve on. The design process can always be refined as new skills are learned, and I plan to continue evolving this project as I hone my skills further.

Future Thinking

Tarot Cards of Tech

To help consider the impact of this technology

The-Big-Bad-Wolf

I believe that predators of identity fraud would be the highest possibility to exploit this product. As an extension of a government-related system, a strong verification process to prevent identity fraud will have to be put in place. 

The QR scan might be the first step in verification, but the future of the ServiceOntario App must include a second layer to officially verify a person’s identity.

I believe that the ServiceOntario App will be based on trust. User profiles include important government-related documents and licenses which will cause a huge issue if their accounts are comprised.

In the case of a compromised account, the ServiceOntario App will need to implement an emergency customer service helpline or the option of visiting a ServiceOntario location to get recover their accounts. 

Based on app reviews and customer representatives’ reports, we will be able to diagnosis where to intervene to improve the issue.

The-Backstabber

Get in Touch :)

Will be happy to work with you on your next project!

Charmaine Yu

 

Email

charmaineyk.yu@gmail.com

Selected Works

Walmart 4D HackathonGroup Project

ServiceOntario AppCapstone Project

Let's chat :)

LinkedIn

Charmaine Yu

Let's work together on your next project!