New Product Design: Responsive Loyalty Portal

Summary of Project

Point of sales (POS) relies heavily on satisfying their guest purchases and monthly rewards. A loyalty program has monetary value and represents the overall brand.

An existing portal website exits containing POS transactions and card management, but where are the rewards?

A vital component of a loyalty program is the reward details and the management of those rewards. The project is a milestone for the company and depends on its success for the loyalty program to evolve.

Results

Launched the first loyalty portal with exclusive offers for 750+ retail locations, reward management and point redemptions.


Business Goal

The business goal was to allow guests to check their reward status and redeem points on a responsive website. Currently, the reward program only exists on the mobile app.

Based on the app’s current state, the user experience needs improvement, and guests need a central location for managing their rewards.

Current State of Mobile App Rewards Program

Current State of Mobile App Rewards Program

UX Role

UX/UI focused on information architecture and visual design and interaction design.

By creating a responsive design for the rewards website, the loyalty reward program will be utilized by guests to redeem points for specific rewards.

The mental model is to drive more revenue, partnerships, and improves customer retention.

The project required working closely with:

  • Product Owner
  • Loyalty Rewards Team
  • Merchandise Team
  • Sales Team
  • Marketing Team
  • API Developers
  • Front End Developers

Design Intent

The new concept of managing offers dynamically was met through responsive design and consistency among the interaction.

Alerts produced on the tabs signified additional action to be taken by the end-user, which helps guide users journey.

The workflow is smooth and encourages continuous action amongst the user, guiding them through the interface.

Desktop / Tablet / Mobile Wireframes

Desktop / Tablet / Mobile Wireframes

UX Insight and Findings

Being that there was an existing reward program on the mobile app, an analysis of what currently exists and how it reacts to screen breakpoints was necessary.

A collaborative effort with Ad Sales, Marketing, Merchandise, and API Devs ensured branding stayed compliant with the current mobile app effort.

Syncing groups regarding labeling products, images, metadata, and copy restrictions were vital for the marketing campaign.

Detailed Spec Sheet for Ads and Coupons

Detailed Spec Sheet for Ads and Coupons


Creating a New Paradigm

Creating new mental models for a product requires standing out from the competition and satisfying business needs. Building a prototype assesses how well it performs.

Does it satisfy customer needs? The design is a series of responsive web pages allowing guests to interact with store offers dynamically.

The goal is to incorporate a designated area for rewards and add a look and feel for the store offers’, which adds complexity to the design. All coincide with the mobile app, which derives from marketing and advertising efforts.

Desktop Wireframe

Mobile Wireframes


Challenges

Processes on how offers were populated needed more venting, requiring research and education amongst the team.

Because there are so many offers, the challenge was to get them onto one page without clutter.

The developers’ specs were challenging because of the multilayered interface and multiple screen sizes, as well as working with outside vendors.


Takeaway

Below is the user journey, a scenario that drives the business owners through the user’s interactions with the interface.

The prototype helps with buy-in, explaining design decisions, and introducing empathy from the user’s perspective.

The walkthrough is vague enough to determine if the interface is intuitive for the user. The instructions are short and to the point of reducing confusion.

Below is an example of the prototype walkthrough:

  • Go to all offers
  • View tobacco offers
  • Accept confirmation
  • Go back to all offers
  • View coke details
  • Close window
  • Save coke offer
  • View your saved offer
  • Make the barcode larger
  • View monthly offers
  • Go back to all offers
Mobile App Prototype