ROLE:
Senior Product Designer
CATEGORY:
Food & Bev, E-comm, Shopping
COMPANY:
Inspire Brands
TIMEFRAME:
6 months
Split Payment on APP
Split Payment on Mobile Web
Split Payment on Desktop
ABOUT
Jimmy John’s is part of the Inspire Brands family and this feature allowed customers the ability to split their payment between gift card and credit card.
TEAM & ROLES
Chase Robinson
(
Guest Product Management
)
Detroit Labs
(Third Party Design & Dev Agency)
Andy Ades
(Director of Product Management)
Lauren Skelly (Digital Retail @ Jimmy John’s)
Tim King (UX Manager)
Lyndon Cerejo (UX Director)
Eric Bates
(Director of Product)
Susan Watson (Digital Analytics Manager)
1. UNDERSTAND/PRODUCT THINKING
I led the split payment exploration and design execution as it was part of the roadmap that Jimmy John’s wanted to launch in Q1 2024. The process started in end of Q2 2023 to identify the requirements of this project and the technical limitations and build of Jimmy John’s. Unlike other brands in the Inspire Brands portfolio, Jimmy John’s is one of 3 restaurants that is not on the Inspire Digital Platform (IDP).
I was tasked to research and design this feature according to the current build. Detroit Labs had about 10 stakeholders that took part of this journey with me as they were the agency that built and designed Jimmy John’s the way it is today.
The problem that all stakeholders wanted to solve was how to allow customers to split their payment on the web and APP experience so that they can take full advantage of their remaining gift card amount.
A) People Problem
Jimmy John customers have some friction on using gift card as a payment option on the app and web.
B) How did we know it was a problem?
If the total amount was more than their gift card balance, the app/website would not unable to process their transaction and the customer had to resort to using their credit card.
C) How do we know if we’ve solved this problem?
When customers are able to split their payments on our platform by tracking transaction rates that include two points of that payment data.
2. Design strategy & research
Susan presented the first two quarters of 2023 for Jimmy John’s transactions and majority showed that gift card transactions (60%) were more prominent on the online experience. However, the transaction data from in store revealed a mix of credit card (50%), cash (30%), and minimal gift card transactions (20%).
The interesting discovery that Susan, Lauren, Chase, and I connected on was that customers are unable to split their payment online, but employees at Jimmy John locations were able to help with that if they visited the store. This got me to discuss with Detroit Labs from an engineering POV on how Jimmy John’s process their transactions and if the employee and customer experience use the same financial server, we received alignment on the following:
OLO is the service that Jimmy John’s uses and both employee and customers are using the service, but employee has more features instead of consumers.
OLO has the ability to give the user to set specific amounts.
OLO also has auto-calculation as a feature.
After aligning with the whole team, I set out to explore how the finance space specifically with Paypal because I remembered that the split-pay function was heavily advertised as part of their release.
Comp Analysis on Paypal’s split pay.
Internal review
WHAT’S THE POTENTIAL VISION?
During the exploration phase, I presented a flow on APP where customers were able to identify easily of how they can split their payment. Within the journey they would be also be able to select their preferred payment method and the platform would auto-calculate their payment taking the guess work away.
I receive a lot of positive feedback from all of my stakeholders for my innovative strategy to take advantage of OLO’s features while keeping the consumer informed throughout their progressive journey. However Detroit Labs analyzed the estimation costs of building this proposed path and pushed back that this approach would not be feasible to build out within the current roadmap.
Proposed Path for Split Payment
Proposed Path Close Up (Part 1)
Proposed Path Close Up (Part 2)
3. DESIGN EXECUTION
new solution
HOW MIGHT WE IMPLEMENT SPLIT PAY, BUT WITH THE CURRENT JIMMY JOHN’S BUILD?
Knowing the constraints and timeline, building new pages was not a viable option. I set out to find another alternative with the current build for APP to see which components functionality I was able to reuse to incorporate the split functionality. I referenced the checkout page’s current infrastructure for the following scenarios that were common for Jimmy John’s customers at the time:
Saved credit card on file.
Saved gift card on file.
No saved credit card or gift card. Default to Apple or Google Pay based on user’s device.
The common behavior from the three scenarios above was that whenever the customer taps on the accordion style component of where the payment method is, a select payment type modal will appear to provide more options.
Saved credit card scenario on Jimmy John’s APP
Saved gift card scenario on Jimmy John’s APP
Default scenario on Jimmy John’s APP in iOS.
Select Payment Type Modal
defining the solution (Part 1)
HOW DO WE WORK WITH WHAT WE HAVE?
Throughout the audits and internal review, I drafted how the split pay function and flow would appear with the current API structure based on the following scenarios:
1) If customer wants to pay with a gift card and credit card
2) If customer wants to pay with Apple or Google Pay.
3) If customer has a saved gift card that can fulfill the amount.
4) If customer has a saved gift card that cannot fulfill the amount.
The minor change in this flow below that occurred was displayed how the two payment methods would appear once a user adds that specific payment method. When I presented this approach to Detroit Labs, the alignment from this approach was received positively since there wasn’t much rework with their code, but only including a line of new code on the front-end once a new option has been added.
Happy Path Flow for APP with Split Pay Embedded for #1-#3
How Split Pay will display (1 Gift Card and 1 Credit Card)
Happy Path Flow for APP with Split Pay Embedded for #4
How Split Pay will display (2 Gift Cards)
defining the solution (Part 2)
WAS THERE A DIFFERENCE FOR WEB?
There was a slight difference on web, mainly the extra function to allow the users to see gift cards being applied after selection plus seeing the type of transactions applied at order confirmation. The proposed flow that I presented to the larger team was aligned to ensure the web experience was not deriving too much away.
Proposed Flow for Web
4. OUTCOME AND TAKEAWAYS
LAYING OUT THE FOUNDATION FOR JIMMY JOHN’S SPLIT-PAY
The feature was designed and shipped on December 2023 for Detroit Labs to utilize and build, but the feature was put on hold due to negotiations with the brand on focusing on rebrand.
The feature is now revisited for Q3 2024 of this year and currently consulting Detroit Labs on adding usability testing onto the sprint to ensure this function brings value for Jimmy John’s customers.