Reward redemption through a responsive portal

Pilot Loyalty Reward Portal

launched new loyalty portal with exclusive offers for 750+ retail locations, reward management and point redemptions

Summary & business goal

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 redemption 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.

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.

Role

Lead designer: UX/UI focused on information architecture, visual design and interaction design. Main focus was on responsive design for the rewards website to add cohesivness.

Project required working closely with:

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

Design insight

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.

Intentional design

With 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.

alignment regarding product labeling, images, metadata, and copy restrictions were vital for optimization

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

Alerts produced on 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.

Current state: Mobile app -  myRewards
Current state: Mobile app – myRewards

Creating a mental models

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.

Wireframes: Desktop / Tablet / Mobile
Wireframes: Desktop / Tablet / Mobile
Detailed spec sheet: ads and coupons
Detailed spec sheet: ads and coupons
Wireframe: Desktop
Wireframe: Desktop
Wireframes: Responsive (tablet / phone)
Wireframes: Responsive (tablet / phone)

Takeaways

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.

By creating a responsive design for the rewards website, the loyalty reward program will be utilized by guests to redeem points for specific rewards, drive more revenue, partnerships, and improve customer retention.

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

Prototype

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.

Originally the prototype was created in Sketch/Invision, but then recreated in Figma. Experience the prototype click-through.

Tasks

  1. Member views offer details
  2. Saves offer for later use
  3. Views offer in Saved
    Offers
  4. Goes back to All Offers