FIS - White-Label Loyalty App

Designing a universal, accessible loyalty platform for retail

Client
Belatrix / FIS
Year
2019-2020
Role
UI/UX Designer
Team
Product team with BA and developers
Duration
6 months

Overview

My role in this project started in the middle of the process - the product had been defined, requirements established, and backend services developed. The challenge became overcoming my UI and Visual design limitations while improving the experience through a visual re-design before final development and launch. I was also enabled to suggest improvements and design them.

The Challenge

Join the project mid-development to redesign the UI/UX of a white-label loyalty application. The main challenge was ensuring the app could be customized for different retailers while maintaining accessibility standards and visual consistency across varied branding applications.

The Solution

Created a clean, minimalist design system that allows retailers to apply only their accent colors, giving us control over accessibility compliance. Redesigned the onboarding experience with a clear landing page that educates users and differentiates content types, improving information hierarchy.

Business Impact

Success
White-Label

Flexible branding system

Improved
User Flow

Clear onboarding & hierarchy

WCAG
Accessibility

Compliant color system

1. In Medias Res

My role in this project started in the middle of the process - the product had already been defined and requirements established. The backend services had been developed, so my main assignment focused on improving the experience through a visual re-design before its final stage of development and launch.

1.1. Home for Unregistered Users

My first contribution was reviewing how the application was introduced to end-users. The original approach gave limited access to main functions without much explanation or guidance. Thinking of the confusion this could produce, and considering that a main business goal was user registration for customized experiences, I suggested changing the approach.

Instead of limited access, we created a simple landing page introducing the app and educating users. It showed benefits while allowing access to some open promotions, giving them a taste of what awaited. The changes brought clarity by differentiating content types, improving information hierarchy, and focusing on the main actions the business wanted users to take.

First and second design iterations showing improved hierarchy

2. The Progressive Web Application

The main idea behind the app redesign was to develop another versatile touchpoint for users to interact with the platform. I was assigned the challenging task of designing the UI and visual aesthetics from the ground up.

Main application features and user flows

3. The White-Label Challenge

The main visual and UI design challenge was that the app needed to be customizable for different retailers to apply their branding colors. This was challenging because we needed to ensure at least minimum visual accessibility guidelines compliance, making it unsuitable to allow small retailers to tweak every color.

We decided the best approach was to make everything as clean as possible and only apply color where it had semantic relevance. This allowed retailers to apply their colors only as accents, giving us control over how they would be used while planning accordingly for accessibility compliance.

UI deliverables including comprehensive style guidelines

Technologies & Tools

UI DesignUX DesignDesign SystemsProgressive Web AppsAccessibility (WCAG)White-Label DesignMobile-First Design

Acknowledgments

Project business analyst: Nicolas Rica.