Replacement Card
A new internal tool for Customer Support to send replacement Nando's Cards to customers
Replacement Card
A new internal tool for Customer Support to send replacement Nando's Cards to
02
timeline
Apr 2024
Apr 2024
to
to
Aug 2024
Aug 2024
responsibilites
design lead
design lead
uxr
uxr
product strategy
product strategy
TEAM
02 ENGINEERS
02 ENGINEERS
01 DESIGNER
01 DESIGNER
TIMELINE
Apr 2024
to
Aug 2024
TEAM
02 ENGINEERS
01 DESIGNER
RESPONSIBILITIES
Design lead
UXR
Product Strategy
TEAM
02 ENGINEERS
02 ENGINEERS
01 DESIGNER
01 DESIGNER
Responsibilities
design lead
design lead
uxr
uxr
PRODUCT STRATEGY
PRODUCT STRATEGY
TIMELINE
APR 2024
APR 2024
TO
TO
AUG 2024
AUG 2024
what's the problem?
Due to the Paytronix to Talon.One migration, we are losing a few features that PX provides - one being the Lost Card functionality with their partner, Incodia.
When a customer loses their physical Nando's Card, they can enter in a few details on the website to request a new one. This request then gets logged by Incodia, who then transfer the balance from the old Nando's Card onto the new one. The new card is then sent to the customer.
What we need to do is to build another tool for Customer Support, the users taking on this extra task, to action these Lost Card requests and send the customers their newly loaded physical Nando's Cards.
The business wanted a new tool entirely, but I suggested merging it within the Loyalty Admin Tool to assist our users a wee bit for the hard work they'll be doing. The business agreed.
DISCOVER
DISCOVER
what does incodia look like?
WHAT'S THE PROBLEM?
As Incodia is a third-party tool, no one has access to it - chef's kiss. We do however have these two screenshots that I found on a long lost Miro board in a galaxy far, far away.
Due to the Paytronix to Talon.One migration, we are losing a few features that PX provides - one being the Lost Card functionality with their partner, Incodia.
When a customer loses their physical Nando's Card, they can enter in a few details on the website to request a new one. This request then gets logged by Incodia, who then transfer the balance from the old Nando's Card onto the new one. The new card is then sent to the customer.
What we need to do is to build another tool for Customer Support, the users taking on this extra task, to action these Lost Card requests and send the customers their newly loaded physical Nando's Cards.
The business wanted a new tool entirely, but I suggested merging it within the Loyalty Admin Tool to assist our users a wee bit for the hard work they'll be doing. The business agreed.
what does incodia look like?
As Incodia is a third-party tool, no one has access to it - chef's kiss. We do however have these two screenshots that I found on a long lost Miro board in a galaxy far, far away.
Yes the tool is in need of a makeover, however there is pretty good surface information shown and features here:
- Request creation time/date
- Updated request time/date
- Search functionality
But, there is still a handsome amount of room for improvements.
Yes the tool is in need of a makeover, however there is pretty good surface information shown and features here:
- Request creation time/date
- Updated request time/date
- Search functionality
But, there is still a handsome amount of room for improvements.
who are the users?
The Customer Support team - roughly 30 users in total
The Customer Support
team - roughly 30 users
in total
The Customer Support team - roughly 30 users in total
They will rotate on different days who will do the requests
They will rotate on different days who will do the requests
They will rotate on different days who will do the requests
There will be anywhere from 10-50 requests per day (data is a bit skewed)
There will be anywhere from 10-50 requests per day (data is a bit skewed)
There will be anywhere from 10-50 requests per day (data is a bit skewed)
imperative
features
Intuitive search -
find request by email,
card number
Status tags - complete/not complete requests
Cancel requests
Customer information displayed - NC number, email
Date/time of request
My project goals
Make this as simple as
possible for Customer
Support
Imbed this tool within
the Loyalty Admin
Tool
Try to get the request
completion time under 2 mins (bonus points for 1:30)
Customer Support included in ideation sessions
System Usability Score of 85+
Make it… FUN
USER INTERVIEWS
I hosted interviews with five users to see how they felt having to do this extra work, and what they would hope from this tool. Here's what they said:
01. Make it as seamless as possible
02. Try not to add any stress to their already anxiety-inducing roles
03. Unsure what to expect from the process, so it's in my hands
04. If possible, "don't make it boring" - an actual quote from a user
05. As you can tell, they aren't over the moon with this new line of work
I hosted interviews with five users to see how they felt having to do this extra work, and what they would hope from this tool. Here's what they said:
01. Make it as seamless as possible
02. Try not to add any stress to their already anxiety-inducing roles
03. Unsure what to expect from the process, so it's in my hands
04. If possible, "don't make it boring" - an actual quote from a user
05. As you can tell, they aren't over the moon with this new line of work
define
feature requirements
As you can see from the collaborative wireframe session my tech lead and I worked on below, we had to pretty swiftly begin task mapping for the Replacement Card Tool (RC).
We decided to opt for a more visual session as we were really pressed for time and needed to give a rough estimate when this could be completed by.
As you can see from the collaborative wireframe session my tech lead and I worked on below, we had to pretty swiftly begin task mapping for the Replacement Card Tool (RC).
We decided to opt for a more visual session as we were really pressed for time and needed to give a rough estimate when this could be completed by.
imperative features
Intuitive search - find request by email, card number
Status tags - complete/not complete requests
Cancel requests
Customer information displayed - NC number, email
Date/time of request
initial user flow
We may have been pressed for time, but I am a sucker for a user flow diagram. It's a crucial step for me to begin to understand the design task at hand (accidental bar).
We may have been pressed for time, but I am a sucker for a user flow diagram. It's a crucial step for me to begin to understand the design task at hand (accidental bar).
my project goals
Make this as simple as possible for Customer Support
Imbed this tool within the Loyalty Admin Tool
Try to get the request completion time under 2 mins (bonus points for 1:30)
Customer support including in ideation sessions
System Usability Score of 85+
Make it… FUN
develop
RAPID DESIGN ITERATIONS
I wanted to include Customer Support super early on in the process as this new tool is a special case scenario - there is a bit of manual labour involved. Depending on where they are in the office, they may have to walk a few flights of stairs in order to access a printer - they need to attach the newly transferred card into a letter to send the customer.
Below you have the V1 main user flow of actioning a request (without letter printing, we weren't sure how to do that yet in the back-end).
RAPID DESIGN ITERATIONS
I wanted to include Customer Support super early on in the process as this new tool is a special case scenario - there is a bit of manual labour involved.
Depending on where they are in the office, they may have to walk a few flights of stairs in order to access a printer - they need to attach the newly transferred card into a letter to send the customer.
Below you have the V1 main user flow of actioning a request (without letter printing, we weren't sure how to do that yet in the back-end).
RAPID DESIGN ITERATIONS
I wanted to include Customer Support super early on in the process as this new tool is a special case scenario - there is a bit of manual labour involved.
Depending on where they are in the office, they may have to walk a few flights of stairs in order to access a printer - they need to attach the newly transferred card into a letter to send the customer.
Below you have the V1 main user flow of actioning a request (without letter printing, we weren't sure how to do that yet in the back-end).
DESIGN THINKING
01. New navigation joining both LAT and RC together
02. Start request feature if a customer isn't able to do it themselves
03. Table surfacing a lot of request information
04. Filtering through requests
05. Linking the old Nando's Card to the customer page in LAT
06. Elipses with menu to conduct request
07. RC was designed to feel similar to LAT, but not directly the same
01. New navigation joining both LAT and RC together
02. Start request feature if a customer isn't able to do it themselves
03. Table surfacing a lot of request information
04. Filtering through requests
05. Linking the old Nando's Card to the customer page in LAT
06. Elipses with menu to conduct request
07. RC was designed to feel similar to LAT, but not directly the same
01. New navigation joining both LAT and RC together
02. Start request feature if a customer isn't able to do it themselves
03. Table surfacing a lot of request information
04. Filtering through requests
05. Linking the old Nando's Card to the customer page in LAT
06. Elipses with menu to conduct request
07. RC was designed to feel similar to LAT, but not directly the same
feedback sessions
My plan with the table design was to put way too much information on there, for the user to then give their opinion on which data can be taken out, or hidden somewhere else. I knew they were going to get torn apart somewhat, but it's all due process.
My plan with the table design was to put way too much information on there, for the user to then give their opinion on which data can be taken out, or hidden somewhere else.
I knew they were going to get torn apart somewhat, but it's all due process.
Some pretty shocking results from the first test, but excellent learnings to take from these. Remember, this isn't a failure - it's progress.
Some pretty shocking results from the first test, but excellent learnings to take from these. Remember, this isn't a failure - it's progress.
rc extreme makeover addition
The bit of feedback that really stuck out for me was "100% of users felt the modal journey was disconnected". And they're right. It was. I was relying on the user to remember which request they were working on to click into the specific request again, and you shouldn't heavily rely on user memory.
We've made some pretty big changes to the designs, which include:
The bit of feedback that really stuck out for me was "100% of users felt the modal journey was disconnected". And they're right. It was.
I was relying on the user to remember which request they were working on to click into the specific request again, and you shouldn't heavily rely on user memory.
We've made some pretty big changes to the designs, which include:
Status tags filter - to reduce clicking
Status tags filter -
to reduce clicking
Change 'Start request' CTA to 'Start new request'
Change 'Start request' CTA to 'Start new request'
Quieting down the table
Quieting down the table
Displaying the support advisor who worked on the request
Displaying the support advisor who worked on the request
Lost Card requests are now actioned through a side-drawer component
Lost Card requests are now actioned through a side-drawer component
I wanted to create the side-drawer component as this should hopefully solve the disconnected issue. It was later introduced into our design system because of this.
I wanted to create the side-drawer component as this should hopefully solve the disconnected issue.
It was later introduced into our design system because of this.
Detailed here is the full side-drawer journey. It now involves more feedback from the highlighted table row, status tags changing in drawer header, and a much cleaner UI.
Detailed here is the full side-drawer journey. It now involves more feedback from the highlighted table row, status tags changing in drawer header, and a much cleaner UI.
USBILITY TESTing
Now the updates were made, I was extremely eager to see if the side-drawer and other changes would help. If not, I would have played Simon and Garfunkel's smash hit from 1963 "The Sound of Silence" on repeat for an hour or so - nothing too drastic.
Now the updates were made, I was extremely eager to see if the side-drawer and other changes would help.
If not, I would have played Simon and Garfunkel's smash hit from 1963 "The Sound of Silence" on repeat for an hour or so - nothing too drastic.
The results are improving, but still not where they need to be. Further updates imminent.
The results are improving, but still not where they need to be. Further updates imminent.
user feedback iteration
01. Changing the navigation bar component to breadcrumbs
02. Copy updates - Finalise request to 'Print Letter'
03. UI best practices updates - Ticks in progress bar, CTA placement, widening drawer (hiding filters behind), changing 'Replacement Card requests' to 'Lost Card Requests'
04. Print letter screen - improved ergonomic redesign, clearer actions to take
05. Including back button in drawer - navigation optimisation
FINAL ROUND OF USABILITY TESTING
Enough of my rambling - the results.
SYSTEM USABILITY SCORING
RC just scored an excellent with an 86 - mission accomplished. I reckon it would have been a wee bit higher if the users didn't have to walk to the printer.
deliver
design system CONTRIBUTIONS
01. New side-drawer component
02. New progress stepper component
03. New breadcrumbs component
01. New side-drawer component
02. New progress stepper component
03. New breadcrumbs component
user acceptance testing
UAT's with the prod-build scored near enough the same results (even missing some post-MVP features).
UAT's with the prod-build scored near enough the same results (even missing some post-MVP features).
Here are a few real quotes from our users:
"Yeah I like it."
"No, everything's fine. It's pretty good."
"Luke, this is literally the Mona Lisa of replacement card tools".
Here are a few real quotes from our users:
"Yeah I like it."
"No, everything's fine. It's pretty good."
"Luke, this is literally the Mona Lisa of replacement card tools".
NEXT STEPS
I'm in constant communication with users regarding both LAT and RC, getting their insight for any future features that will help them. So far, apart from post-migration features, no new major features requested for either.
I'm in constant communication with users regarding both LAT and RC, getting their insight for any future features that will help them. So far, apart from post-migration features, no new major features requested for either.
REFLECTIONS
This project was something entirely new for me as there wasn't really much of a discovery, nor was there a real define section of the double diamond. However, things I learned were:
- Including users way earlier in the design process
- Completing and sharing research findings sooner
- Preparing a better dev handover file (it created a bit of bother not doing this as well as I could have)
Another day, another tool designed and built by the Loyalty team in the midst of a migration. What next?
THANK YOU.
This project was something entirely new for me as there wasn't really much of a discovery, nor was there a real define section of the double diamond. However, things I learned were:
- Including users way earlier in the design process
- Completing and sharing research findings sooner
- Preparing a better dev handover file (it created a bit of bother not doing this as well as I could have)
Another day, another tool designed and built by the Loyalty team in the midst of a migration. What next?
THANK YOU.