Design Leader.
Transport for NSW
Creating a new digital experience for Opal cards.
The customer trial started in early December 2020, and enabled customers the ability to tap on and tap off with an Opal card loaded into the digital wallet of their smartphone or watch.
UX
UI
Usability testing
Overview
Designing the UX/UI experience
I was responsible for the end to end UX/UI journey, working alongside the front-end dev team and BA’s, supporting the project from idea generation through to delivery. This involved designing the user flows, interactions, animations, prototyping and stakeholder presentations. I undertook regular usability testing to identify improvement opportunities from customer feedback.
Overview
Designing the UX/UI experience
I was responsible for the end to end UX/UI journey, working alongside the front-end dev team and BA’s, supporting the project from idea generation through to delivery. This involved designing the user flows, interactions, animations, prototyping and stakeholder presentations. I undertook regular usability testing to identify improvement opportunities from customer feedback.
Overview
Designing the UX/UI experience
I was responsible for the end to end UX/UI journey, working alongside the front-end dev team and BA’s, supporting the project from idea generation through to delivery. This involved designing the user flows, interactions, animations, prototyping and stakeholder presentations. I undertook regular usability testing to identify improvement opportunities from customer feedback.
The Design Process
Wire frames
I visualised each screen from onboarding to sign up and card provisioning.
Wire frames
I visualised each screen from onboarding to sign up and card provisioning.
Wire frames
I visualised each screen from onboarding to sign up and card provisioning.
User flows
I broke down scenarios from new to existing users for both iOS and Android.
User flows
I broke down scenarios from new to existing users for both iOS and Android.
User flows
I broke down scenarios from new to existing users for both iOS and Android.
Prototyping
I developed an interactive prototype to demonstrate the screen interactions.
Prototyping
I developed an interactive prototype to demonstrate the screen interactions.
Prototyping
I developed an interactive prototype to demonstrate the screen interactions.
User testing
I completed a heuristic evaluation of the prototype to gain insights and pain points.
User testing
I completed a heuristic evaluation of the prototype to gain insights and pain points.
User testing
I completed a heuristic evaluation of the prototype to gain insights and pain points.
Iterative design
The results from each round of testing helped to refine and improve the designs.
Iterative design
The results from each round of testing helped to refine and improve the designs.
Iterative design
The results from each round of testing helped to refine and improve the designs.
High fidelity UI
I output and uploaded the the final UI to inVision as part of dev handover.
High fidelity UI
I output and uploaded the the final UI to inVision as part of dev handover.
High fidelity UI
I output and uploaded the the final UI to inVision as part of dev handover.
User flows
Building the user flows
I gathered requirements for the user flows through several sessions with the product owner and business analysts. New users needed to register their contact and payment details before they could enable the Opal card in their digital wallet. I started pulling user interface inspiration from popular apps to study how they guide users through complicated onboarding journeys.
The onboarding requirements introduced a challenge due to a lengthy sign up process. I designed the flow with these challenges in mind by progressively leading users through each task in the sign up process that would assist with minimising their time spent on task and the overall cognitive load required.
User flows
Building the user flows
I gathered requirements for the user flows through several sessions with the product owner and business analysts. New users needed to register their contact and payment details before they could enable the Opal card in their digital wallet. I started pulling user interface inspiration from popular apps to study how they guide users through complicated onboarding journeys.
The onboarding requirements introduced a challenge due to a lengthy sign up process. I designed the flow with these challenges in mind by progressively leading users through each task in the sign up process that would assist with minimising their time spent on task and the overall cognitive load required.
User flows
Building the user flows
I gathered requirements for the user flows through several sessions with the product owner and business analysts. New users needed to register their contact and payment details before they could enable the Opal card in their digital wallet. I started pulling user interface inspiration from popular apps to study how they guide users through complicated onboarding journeys.
The onboarding requirements introduced a challenge due to a lengthy sign up process. I designed the flow with these challenges in mind by progressively leading users through each task in the sign up process that would assist with minimising their time spent on task and the overall cognitive load required.
Design Delivery
Screen design constraints
As I was designing apps for devices that varied across platforms, models and versions, I needed a systematic way to communicate to the developers how my designs would adapt to the different screen size variations. I discussed the interface constraints with the devs and then spent time exploring Apple's Xcode program to understand the auto layout functionality. From there I developed a system using grids and anchoring constraints across the screen templates. We were able to scale this system across both iOS and Android platforms.
Design Delivery
Screen design constraints
As I was designing apps for devices that varied across platforms, models and versions, I needed a systematic way to communicate to the developers how my designs would adapt to the different screen size variations. I discussed the interface constraints with the devs and then spent time exploring Apple's Xcode program to understand the auto layout functionality. From there I developed a system using grids and anchoring constraints across the screen templates. We were able to scale this system across both iOS and Android platforms.
Design Delivery
Screen design constraints
As I was designing apps for devices that varied across platforms, models and versions, I needed a systematic way to communicate to the developers how my designs would adapt to the different screen size variations. I discussed the interface constraints with the devs and then spent time exploring Apple's Xcode program to understand the auto layout functionality. From there I developed a system using grids and anchoring constraints across the screen templates. We were able to scale this system across both iOS and Android platforms.
User Testing
Remote user testing
Remote user testing
Identify how easy or hard participants felt the onboarding process was.
Identify how easy or hard participants felt the onboarding process was.
Identify how easy or hard participants felt the onboarding process was.
Understand where we rank in terms of customer perception of security.
Understand where we rank in terms of customer perception of security.
Understand where we rank in terms of customer perception of security.
How do users perceive extended wait times during sign-up.
How do users perceive extended wait times during sign-up.
How do users perceive extended wait times during sign-up.
Uncover any pain points and general usability issues.
Uncover any pain points and general usability issues.
Uncover any pain points and general usability issues.
Discover the best time to ask users to enable notification permissions.
Discover the best time to ask users to enable notification permissions.
Discover the best time to ask users to enable notification permissions.
Together with myself as facilitator and an observer, we used 1:1 remote moderated testing via Teams and an online prototype. Below are the results:
Overall customers found the sign-up process easy to use
Overall customers found the sign-up process easy to use
Overall customers found the sign-up process easy to use
Wait time was long, but tolerance levels were acceptable / due to animation and knowing processes were happening in the background (spinning logo)
Wait time was long, but tolerance levels were acceptable / due to animation and knowing processes were happening in the background (spinning logo)
Wait time was long, but tolerance levels were acceptable / due to animation and knowing processes were happening in the background (spinning logo)
Tech-savvy participants who are existing Opal customers expected to be able to sign-up with one-click
Tech-savvy participants who are existing Opal customers expected to be able to sign-up with one-click
Tech-savvy participants who are existing Opal customers expected to be able to sign-up with one-click
Most participants wanted clarification prior to sign-up that auto top up is a requirement
Most participants wanted clarification prior to sign-up that auto top up is a requirement
Most participants wanted clarification prior to sign-up that auto top up is a requirement
Most participants opted to “Allow” (iOS) push notifications when prompted
Most participants opted to “Allow” (iOS) push notifications when prompted
Most participants opted to “Allow” (iOS) push notifications when prompted
Similar experience to registering with a banking app and felt secure
Similar experience to registering with a banking app and felt secure
Similar experience to registering with a banking app and felt secure
4.2k
Unique travellers
4.2k
Unique travellers
4.2k
Unique travellers
360k trips
7 trips / month / traveller
360k trips
7 trips / month / traveller
360k trips
7 trips / month / traveller
1.2M
Top-ups
1.2M
Top-ups
1.2M
Top-ups
$1.1M
Fares collected
$1.1M
Fares collected
$1.1M
Fares collected
70%
Used Opal cards prior to the trial
70%
Used Opal cards prior to the trial
70%
Used Opal cards prior to the trial
80%
Would use again
80%
Would use again
80%
Would use again
Push notifications
Permission prompts for iOS
On iOS users we have to ask users for permission to enable push notifications. On top of that we can only ask this once. If the user clicks ‘Don’t allow’ we don’t get to ask again unless they request it. After that they need to enable it manually inside settings using a number of steps that would be a suboptimal experience.
On Android users are opted-in automatically, so we don’t have to worry about this requirement. In the prototype we included a toggle switch to test out our hypothesis that most users would opt-in. Its a kind of pre-permission check where we assume they will 'Allow' it if they leave it turned on. If they turn it off, we assume they want it disabled but prompt them by asking ‘Are you sure?’ introducing some friction to the idea so they might reconsider.
Push notifications
Permission prompts for iOS
On iOS users we have to ask users for permission to enable push notifications. On top of that we can only ask this once. If the user clicks ‘Don’t allow’ we don’t get to ask again unless they request it. After that they need to enable it manually inside settings using a number of steps that would be a suboptimal experience.
On Android users are opted-in automatically, so we don’t have to worry about this requirement. In the prototype we included a toggle switch to test out our hypothesis that most users would opt-in. Its a kind of pre-permission check where we assume they will 'Allow' it if they leave it turned on. If they turn it off, we assume they want it disabled but prompt them by asking ‘Are you sure?’ introducing some friction to the idea so they might reconsider.
Push notifications
Permission prompts for iOS
On iOS users we have to ask users for permission to enable push notifications. On top of that we can only ask this once. If the user clicks ‘Don’t allow’ we don’t get to ask again unless they request it. After that they need to enable it manually inside settings using a number of steps that would be a suboptimal experience.
On Android users are opted-in automatically, so we don’t have to worry about this requirement. In the prototype we included a toggle switch to test out our hypothesis that most users would opt-in. Its a kind of pre-permission check where we assume they will 'Allow' it if they leave it turned on. If they turn it off, we assume they want it disabled but prompt them by asking ‘Are you sure?’ introducing some friction to the idea so they might reconsider.
