Wendy’s Loyalty –
Upload Offers
Tapping into a promising partnership to reach millions and boost brand engagement
2019 | Accenture Song / Fjord
Team makeup: Business Analyst, Product owner, Devs + Myself, as the sole UX Designer
This project involved: UX, Product Design, iOS, Android, Web
My Contribution: As part of the app and web loyalty experience, I led UX and design efforts for the Upload Offers feature integration. Upload offers gave millions of current and potential customers the ability to scan or input a code in order to redeem special food/beverage offers with any order.
The work shared below comes from original mockups dated 2019. There will be some differences when viewing the current live app/web experience.
Project Background
Who, What, and Why?
Wendy’s and Kellogg partnered together uniting two of the biggest food fanbases in the US to make Baconator Pringles available nationwide for a Limited Time Only Summer 2020 campaign.
As part of a promotional campaign ahead of the release in stores, any purchase of Pringles meant access to a code to redeem either a free Baconator, Son of Baconator®, or Breakfast Baconator at Wendy’s restaurants. Customers would simply need to download the app and place a mobile order.
The Opportunity
This project was an opportunity to build a completely new app capability that would be enjoyed by millions of customers in US for many campaigns to come
Upload Offers
The ask from our stakeholder was to enable free or discounted food/beverage item redemption via scanning a QR code or inputting an alpha-numeric code
Program Unification
An additional opportunity arose to unify Rewards and Offers as a singular loyalty program and increase brand engagement
Business Drivers
Customer acquisition & Conversions
-
New app downloads
-
New member sign-up
Purchase order metrics
-
Order size
-
Purchase amount
-
Coupon usage
-
Avg. number of orders
I was responsible for the full end-to-end user journey, from blank canvas to dev hand-off
Process
End-to-end experience definition
My approach began with a stakeholder briefing to gather requirements and constraints, then map out a feasible timeline that fit the client’s needs and also provided sufficient buffer for design revisions along the way.
Usability research was not scoped with this work which meant I had to get creative, and gather fellow coworkers and Wendy’s employee feedback.
I took a mobile first approach since this feature primary business goal sought to increase app downloads and encourage mobile orders through the app.
I started with benchmarking and using secondary research to inform design decisions. The benchmark included other QSR apps such as Starbucks, McDonalds, and Burger King, as well analogous app and web experiences.
Ultimately I created end-to-end user flows in order to organize what screens were needed, states for those screens, and establish tasks and goals for those screens.
Considerations & Constraints
An inflexible timeline
​We had less than 3 months to ship a new upload feature for millions of existing and potential customers. I worked with the PM and BA to buffer in adequate room for design revisions and an early dev hand-off.
Designing for customer security and privacy
We needed ample buy-in from Legal for phone camera access. High fidelity mocks were needed to facilitate the stakeholder’s internal discussions and revisiting requirements on multiple occasions.
Scaling across devices
​I needed to ensure a consistent experience yet also account for implementing an experience that differed between desktop/ mobile web and the Wendy’s app.
Scalable copy and messaging
Microcopy and messaging needed to fit smaller viewports and existing components. Language would not change based on device type, so it would need to fit the context of app, mobile and desktop.
New elements for an existing design library
​New iconography was needed that aligned with the existing design system our team developed.
Integrating new features into an existing system
In order to avoid a disconnected experience and to account for lack of onboarding, the entry point and functionality would need to be intuitive for all and familiar to most.
No user research
​Since research was not scoped for this work, I relied heavily on benchmarking and secondary customer behavior research.
Secondary Research
Understanding best practices, common design principles, and benchmarking informed the design decisions made in conjunction with known requirements and limitations. I was able to:
-
look across best-in-class experiences
-
learn common language and messaging practices
-
grasp familiar interaction and UX patternsgr
Starbucks, McDonalds, and BurgerKing were a few of the brands included in my research efforts.
User Flow Diagram
The flow diagram illustrates the key actions app users would take to progress through capturing and uploading a code, then finding and applying the new offer in their mobile order.
From here, I used hi-fidelity mocks in an iterative feedback loop consisting of internal team reviews, stakeholder reviews and dev touchpoints.
Design
Code input options
Users would be able to either scan a QR code or enter an alpha-numeric code, which would allow them to redeem a free item. This dual functionality would only be available for app and mobile web. Desktop users would only be able to enter the alpha-numeric code.
Key requirements:
-
Users can allow or deny access to their phone’s camera
-
Users can scan a QR code using the phone’s camera
-
Users can type an alpha-numeric code into an input field
-
Users can see a confirmation of a successful capture
-
Users can access help and support
Design decisions and considerations:
-
The dual functionality to scan a QR code or type a code co-exist on a tabbed experience so that users could easily switch between options, and have a single access point for both features
-
The app would also access their phone’s flashlight in case of low-light scenarios (e.g. night-time ordering, dark rooms, etc)
-
The option to upload another offer (i.e scan or input a new code) would only be present after users see a success confirmation. This was to acknowledge their action, and provide a path to loop back to the previous screen should they have multiple codes to scan or enter.
Design
Browsing & Selecting an uploaded offer
Users would be able to easily find and select any one of their uploaded offers. Whether the upload was from scanning a QR code or typing a code, it was considered the same “uploaded offer” type.
Uploaded offers would need to co-exist with the pre-loaded offers always made available to customers without any pre-requisite actions such as making a Pringles purchase. These were referred to “available offer” types and could be used by any Wendy’s customer at any point without an account.
Key requirements:
-
Users can view newly and previously uploaded offers
-
Users can upload new offers
-
Users can select and use an existing uploaded offer
Design decisions and considerations:
-
We wanted uploaded offers to feel special and distinct from pre-loaded offers which were available every month, usually in higher quantity (e.g. 5-10)
-
Uploaded offers needed to be easily distinguished from pre-loaded offers so that users could quickly browse and select the offer of choice
Design
Applying an uploaded offer to an order
Users were already able to apply a single reward or offer to their mobile orders in the following possible permutations:
-
A single reward applied to an order
-
A single offer applied to an order
-
One offer and one reward applied to an order
Users would now be able to access and add uploaded offers at this point in their journey.
Key requirement:
-
Users are able to add uploaded offers to their Rewards card
Design decisions and consideration:
-
A possible scenario was that customers on the way to/in line at Wendy’s might need to upload and use an offer in-the-moment. We knew from previous research that most customers were placing their orders as they were arriving so as to have a fresh meal upon arrival. At the time, order ahead was not available.
New iconography and components
It was necessary to create new iconography and net new components in this workstream.
When our team began working with Wendy’s, revamping their UI and keeping the brand fresh was a given and crucial part of every workstream. Before I rolled onto the team, a new design library was already underway so any new assets I created needed to fit into this existing system.
Scan icon
The new scan functionality also required introducing a new icon to the Wendy’s design library. It would need to be vetted against our existing and growing system created by our team.
The icon needed to convey a clear meaning when paired with the ‘Scan’ label yet also standalone if users were not native English/Spanish/French speakers, since these were the languages we considered for localization. Given the wide usage and adoption of QR codes, and based on my benchmarking of other apps’ scan feature, it was an easy choice to go with a design that mimicked QR codes and felt consistent with scanning iconography used elsewhere.
Offer icon & Offer card
There was an existing reward and offer card design, which meant I needed to design for a new uploaded offer icon and then create a new component just for an uploaded offer type which would become a card variation in our symbols library.
Design
Error & Feedback states
The possible error and feedback states users could encounter when attempting to scan a code, input a code, or use their phone camera without granting permissions.
I wrote several iterations of the messaging for these states and worked with the Product Owner to massage the copy and ensure it was consistent with the Wendy’s brand personality - clear yet somewhat cheeky.
Outcomes
What Happened
After countless collaborative hours with my team, the Product Owner, and Dev team for Q&A, we were able to release a new feature resulting in a feature for millions of existing and potential customers to engage with the Wendy’s brand in a fresh way!
And it’s still in use today, check out the links below!
