Project 2 - Referral program [3 weeks]
Looking for more detail?
What is it?
Province change in referral program.
Collaborated with:
Problem statement
Referral program benefit will not apply if province change occurs.
When user A shares referral program to user B, the shared URL is tied to the province of user A. If user B decides to change province, they will not receive referral program benefits when they've completed their quote.
Working with another designer (Jade), my task was to identify how we would communicate to user that referral program benefit will not apply if province change occurred.
Research & Analysis
I conducted quick benchmarking across external products VS internal products and came up different examples that were used to communicate to users.
Location identification (external)
At the entry of the website, user needs to choose country.
Province login (external)
User needs to login based on province location.
Modal (internal)
In case of user error, it triggers an error modal.
Alert (internal)
There is an alert to inform the user in different format.
Notification (internal)
There is a notification to inform the user with action.
Iterations
Version 1
An error message.
Version 2
A modal with 1 CTA.
Version 3
A modal with 2 CTAs.
Version 4
Info alert inside the province change modal.
Awareness & Criteria
Error alert = more drop
Having an error alert in the pop up modal cause increase in drop rate.
Smaller scope
We couldn't add more scope to for development with new assets.
Communication consistency
The user needed to be communicated when they are leaving the happy path.
Refinement
After discussing and receiving feedback based on our current scope and criteria, we've decided to go forward with info alert as a design direction.
Trade-off
Behaviour Analysis
Although car and bundle (car + home) had the same flow, home flow differed. Home flow had a loader that indicated the system was generating a new quote.
With different flow, I also had to determine the behaviour of the info alert.
From the devs and BA, they had question about how the info alert would behave:
When user selected province change -> exited out of the modal -> reselected province change to open the modal
Q: Should they see the info alert again?
When user selected province change for Home quote -> seen the info alert -> click next -> go back
Q: Should they see the info alert again?
Car and Bundle flow
Home flow
Car and Bundle flow
However, the product design modal doesn't reset when it closes and re-opened again.
There was a need for info alert behaviour that needed to be discussed and defined.
Version A - How I expected modal dropdown to behave:
The field will reset to current province when user close the modal and re-open.
Version B - belairdirect modal dropdown:
The field remains on the change the user has clicked on before they closed the modal.
Home flow
The province change is not a modal but it is a field in the form. There is also loader that indicates new quote is generated for user.
Final design directions
We've decided that user will only see info alert once due to following reasons and we will replicate system behaviour follow for all flow.
Internally, info alert behaviour were product dependant and not design system based
Behaviour for info alert had to be consistent even between different flows
Version B - Car and Bundle flow
Info alert is shown each time when user changes provinces in the field the first time they open the modal.
Version B - Home flow
Info alert doesn't remain when user clicks next CTA and then go back.
