ROLE:

Senior Product Designer

CATEGORY:

Food & Bev, E-comm, Shopping

COMPANY:

Inspire Brands

TIMEFRAME:

8 months

ABOUT

Sonic originally had a feature where customers were able to reload their gift cards and proceed to checkout their order. Ever since the migration and redesign release, Inspire was working in parallel to make this feature smooth in preparation for enhancement updates.

TEAM & ROLES

1. UNDERSTAND/PRODUCT THINKING

I led the reload gift card experience at the last half of 2023 and I referred to the roadmap on why this feature was missed during the migration. The outcome was reloading gift card was a feature not available in Inspire Digital Platform (IDP). When I came into the project, I touched based with our retail team to uncover how the feature performed in Sonic’s older app and web and wanted to find any new opportunities to include in this transition.

The problem that we all wanted to solve was granting customer the ability to reload their gift card at ease with their desired payment method.

A) People Problem

• Sonic customers were able to reload their gift card and checkout prior to IDP’s migration

B) How did we know it was a problem?

• Customer complaints were the main source to generate this demand.

C) How do we know if we’ve solved this problem?

• When transaction rates and other payment APIs process through based on the customer’s preferred payment method to reload.

2. DESIGN STRATEGY / comp. analysis

Prior to competitor analysis, I wanted to uncover how gift card reload actually worked in our legacy site. For this overview, I mainly referenced app mainly because mobile app was the highest traffic of revenue based on the data we received from our Analytics Team. The major point I discovered on the legacy site was the following:

• Customers only have a choice to reload and place the order within checkout instead of being taken to a proper page to ensure their decision.

• Ability to reload with Apple or Google Pay was not available.

• Chances of cognitive load can increase due to content overload.

After reviewing the legacy site, I referenced two specific companies that did reload functionality really well within the Food & Bev space. Starbucks was a brand that had a unique interaction of not only setting your preferred amount and payment method, but also how all of the action takes place within a modal constraint to guide consumers to this specific area.

Dunkin is part of Inspire and one of the features that heavily influenced my design execution was the app’s ability to set limits and amount preferences, but also constraining the user within an area to capture their attention.

Between the two brands, I explored a first take approach on how the reload experience can be constrained in a modal in order for the consumer to focus on that area. After rounds of feedback with our engineers, the challenge of implementing the proposal would’ve required to change IDP’s code. Another factor that I discovered during this strategy phase was that modals are typically used for short and concise messages that may require a user’s attention according to Baymard Institute.

With the hurdles that was presented at me, I went through another round of exploration in the execution phase that pivoted the direction of this feature.

3. DESIGN EXECUTION

solution for reload

WHAT ARE OTHER SCENARIOS THAT CAN OCCUR IN THIS RELOAD EXPERIENCE?

After my reviews with the engineering, product, and UX team, the consensus I decided to proceed with was constraining the reload experience within a page or container in order to draw attention to the customer.

The structure of the content differed from the first iteration based on the following:

• Customers will be directed to a dedicated page (app) or a container (web) to view the content.

• Apple Pay and Google Pay visible for customers as an option.

• Quick note to let customers know after going through Apple/Google’s API after paying, their order will fully process through.

I provided the scenarios for APP and mobile web, but a challenge occurred with engineering that Apple/Google Pay’s API may not be implemented in time of the release. Knowing this, I mapped out how without the Apple/Google Pay API, that would create friction for customers and I advocated that the engineering team proceed with the Apple/Google Pay scenarios as their final deliverable for the project.

the overall path

HOW WILL THE USER NAVIGATE FROM HERE?

While engineering estimations were occurring in parallel with designing, I was able to get stakeholder approval by demonstrating a prototype of the feature and how the flow would occur for both desktop and app.

4. OUTCOME AND TAKEAWAYS

RELOAD AT EASE

The feature released on Jan. 2024 with a few ongoing updates. Since the release, there was an increase of reload orders through gift card usage by 10% on the app.

This project required multiple teams within Sonic and Inspire and I was glad to spearhead the discovery and outcome of this. If I were to change up the process, I wanted to see if the reload function would’ve been applicable for Arby’s and Buffalo Wild Wings and to uncover that curiosity, usability testing would have been the choice.