ROLE:
Senior Product Designer
CATEGORY:
Food & Bev, E-comm, Shopping
COMPANY:
Inspire Brands
TIMEFRAME:
2 months
Far Away Modal - Arby’s (Released 2024)
Far Away Modal - BWWs (Released 2024)
Far Away Modal - Sonic (Released 2024)
ABOUT
Location verification was a feature that Inspire launched earlier this year to help customers pinpoint a location within their proximity for accurate ordering based on customer’s current location services.
TEAM & ROLES
Rajat Mohan
(
Guest Product Management
)
Stacey Cheatom
(
Guest Product Management
)
Andy Ades
(Director of Product Management)
Tim King (UX Manager)
Lyndon Cerejo (UX Director)
Eric Bates
(Director of Product)
Dan Lynn (Chief Operations Officer)
Mohan Krishnan
1. UNDERSTAND/PRODUCT THINKING
I led the Far Away Modal initiative earlier this year as the main lead for Sonic and then eventually for two of our other brands (Arby’s and Buffalo Wild Wings). One of the issues that Inspire Digital Platform (IDP) had was when a location is selected for the first time for customers, that same location will appear if the customer visits the app on the second/third visit. This caused a lot of major issues as a result due to circumstances that customers can actually be a different places in time and not be near that previously selected location.
The problem that we wanted to solve was how to redirect customers to properly identify their store of choice if they didn’t alter it the first time when they visit the app.
A) People Problem
Customers were having orders sent to the wrong location.
B) How did we know it was a problem?
Customer complaints and a decline in sales from franchisees caused friction for Inspire.
C) How do we know if we’ve solved this problem?
When we notify customers that a closer location is near them through this message modal and track the conversion from the CTAs.
2. DESIGN STRATEGY
There was a tight turnaround for this feature to rollout in order to solve the business need. Our UX Team all huddled to gather some competitors on how they solve this far away scenario.
One the common design patterns we noticed from other brands that had scenarios where customers in this far away context was the following below:
Use of toast messages
Use of modals
Taco Bell’s Flow
Chik Fil-A’s Flow
McDonald’s Flow
Internal discussion and shareout
HOW MIGHT WE NOTIFY OUR CUSTOMERS ABOUT THEIR CHOICE?
Beyond the design patterns used between competitors, I had to also look at our infrastructure on how IDP operates in app. Throughout a few internal meetings with engineers and product team, we acknowledge that toast message is a subtle way to notify customers, but the way toast messages are designed and coded in our platform could not meet that user expectation to dismiss or exit.
The direction for this instance was the modal approach. One of the biggest challenges of identifying the constraints and what to include in the modal was to verify if the APIs would properly connect from this new modal design into one of our existing pages.
3. DESIGN EXECUTION
Structuring content and api calls
HOW MIGHT WE DESIGN THIS FAR AWAY MODAL CONTENT TO BE PART OF IDP?
Our other two brands, Arby’s and Buffalo Wild Wings, were aware that I was working on the Sonic version of this modal and they discussed to have it included into their apps because the other two were encountering similar issues. With that mind, I was trying to identify if the content I made originally for Sonic would make sense for the other two.
The content I included in the modal had the following:
Headline to catch customer’s attention in a stylized format
The location selected (even if it wasn’t selected by their own accord, the information would still appear)
Distance (from where the customer is currently at based on location services to their selected location)
A message to empower the customer to take an action.
Two CTAs for their verification.
The only challenge for this execution was mainly ensuring the designs I had for each brand would connect properly, because at that time our location services that we used at Inspire had a different vendor for Arby’s while BWWs had another one.
Far Away Modal Sonic Flow
Far Away Modal BWW Flow
Far Away Modal Arby’s Flow
READY FOR DEV
HOW MIGHT WE ENSURE THAT DESIGN MATCHES BUILD?
This feature was very critical to a lot of factors that it affected multiple departments and operations. To ensure the build was done properly, I created annotations of when the feature would appear and what direction it would pivot the user based on the choice they made. Below is how I led the annotation to minimize errors on the front-end.
4. OUTCOME AND TAKEAWAYS
LOCATION VERIFICATION IS LIVE AND ONLY APPEARS WHEN CUSTOMER IS FAR AWAY…LITERALLY.
The first launch for this feature was for Sonic in order to solve their high priority issue. After the launch, there was an increase in conversion by 1% for folks that were encountering a scenario of ordering ahead, but from a far distance.
With the success of Sonic’s, Inspire was able to minimize more customer and franchisee complaints with Arby’s and BWWs rollout of this feature.
This project was the quickest iteration I did earlier this year with a short timeline, but I was glad to get a lot of stakeholder alignment and support to ensure the caution and care for this release. If things were done a bit differently, I wished I had close-collaborated with our Digital Analytics Team to ensure the performance of our other two brands that also had encountered the same situation as Sonic.