Plenti 2.0

To design the 2.0 version of the Plenti app by identifying and addressing key conceptual and usability issues from the 1.0 version, as well as conducting a complete visual redesign using Material Design guidelines

Dive deeper into the needs of Plenti’s core audience to better understand their behaviors and key drivers

In order to address the major pain points found in version 1.0, the team wanted to take a step back and truly understand what drives people to use couponing services. The goal was to redesign the core experience based on how its audience actually shops and saves.

Effectively communicate our design process with multiple stakeholders, while understanding their distinct goals and needs

We worked alongside various teams with distinct roadmaps, including teams from AMEX and the Plenti coalition. This meant adapting our workflow and constraints multiple times, as well as prioritizing work based on areas of high impact and “picking our battles” effectively.

Conduct a complete visual redesign of both the iOS and Android versions of the app

The 1.0 version of the Plenti app was designed as an iOS-first experience, which resulted in a less-than-optimal Android experience. One of the goals of the project was to tackle both apps separately, and create an Android version that used Material Design guidelines and patterns from the start.

Identify and prioritize key pain points

Before our team joined the Plenti project, the 1.0 version of the app had piled up many conceptual, usability and technical issues by the time of its launch. In order to identify the scope of work to be done for version 2.0, we attended several user testing sessions conducted by the AMEX team.

After these sessions were completed, we prioritized the following 2 key issues based on severity and overall impact:

First, users don't understand how or why they should activate "Offers". Plenti is an offers-based loyalty program, and redeemable offers are at the core of the experience as the primary way of earning points. Users had a difficult time understanding how the process of redeeming offers actually worked.

Second, users don't know which card they should use to redeem an offer. Plenti divides offers between partner-backed offers and grocery store offers. The requirement of using either their Plenti Card or individual store cards at checkout, in addition of store-specific offers, caused major confusion amongst users

Design Sprint

We set aside a 2 week sprint to research, prototype and validate potential solutions. We started by doing Market and Customer Research, and in collaboration with Plenti's Product Owner, we identified 3 customer models to design for:

• The Couponer: heavily relies on coupons, discounts and planning ahead to save money, with no loyalty to any particular brands, but best deals
• The Loyalty Member: no time to search for coupons and appreciates convenience over big savings
• The Points Saver: interested in premium rewards, rather than discount or savings programs

Because of the type of offers Plenti has in its program, as well as the market American Express wanted to target, we suggested the following focus:

• Couponers (primary focus) would constantly interact with the app looking for the best coupons
• Loyalty Members (secondary focus) would appreciate the occasional savings offered at their store

These segments and renewed focus resonated with the team at AMEX, and with just enough information to continue, we created a UX Matrix (mapping the Customer Segments against the 1.0's major pain points) to brainstorm solutions.

Sketch revised AI and UX Flows

After prioritizing what ideas we wanted to prototype, we finalized Week 1 by sketching different high-level structural changes, as well as redesigned core flows that targeted the 2 major pain points.

More specifically, we focused on:

• Different ways to group offers (as opposed to Partner and Household)
• A clearer separation between "Available" and "Activated" offers.
• Faster and better ways to quickly find the card you need at checkout.

Prototyping + Testing

We consolidated our different ideas and created 2 prototypes, conducting 2 rounds of user testing with Plenti's target audience. Some of the scenarios we tested:

• Understanding different types of offers
• Understanding how to redeem offers
• Finding previously activated offers
• Finding linked cards for redeeming at Checkout

Insights + Solutions

After our user testing sessions, we found several key insights:   

• Separating offers by type of product matches user's shopping habits. This meant dividing offers by weekly purchases, such as groceries and gas, and occasional purchases, such as apparel.  
• The "Save to Card" metaphor resonated better with users, as it is a more accurate representation of what is actually happening.
• Organizing offers by Store, rather than by Card, helps users better understand the redeeming process. Users want a centralized way to review their saved offers and pull up their card at checkout.

Based on these insights, we presented the following solutions to the AMEX team. These 2 concepts would become the 2 major to be introduced in the 2.0 release, alongside a complete visual refresh of the app.

Streamlining the navigation model

When we moved into visual design, we wanted the UI to reflect the d user journey we identified during our 2 week spring: Browse, Redeem, Review.

Redesigning the Offers section

We redesigned the offers section to become the center of the Plenti experience. In addition to consolidating offers into a single section, we wanted to bring more of the Plenti brand into this page.

A few updates we had to make to the page:

• Due to technical constrains, we couldn't combine Partner and Household offers into a single stream for the 2.0 version. A secondary tab system was introduced to keep them under a single page, and would allow us to group them into product categories in the future.
• Due to marketing constrains, we couldn't change the "Activate" label to "Save". Even though "Save" performed better during user testing, a lot of investment had already been made across marketing material and customer service training, which blocked our team to make the update.

A new visual system for Content Cards

For this redesign, I wanted to create a new visual system for offer cards that was grounded in Material Design principles, such as a focus on content, clean typography and chrome reduction. After multiple rounds of explorations, we selected out final design.

More specifically, we focused on:

• Left-to-right hierarchy, starting from the image and ending on the CTA
• Removed dividers and unnecessary spacing
• A scalable design where labels and components didn't change the layout, but rather adhered to it.

Activated Offers

Based on the key insights we found when validating our prototypes, we grouped Activated Offers by store. Each store page now served as a hub to review offers and quickly access the right card at checkout.

Similarly to the Browse Offers section, technical constrains didn't allow us to unify offers under a single stream. We grouped them by the default Partner and Household division for the final design.

For an in-depth case study about using Material Design guidelines for a complete visual redesign, including Motion Design work, check out my Medium blogpost: 3 things I learned while designing in Material.

Initiative and compromise are key components to move projects forward within a large organization

The ustwo team had to take the initiative to explain the benefits of user-centered design and different ways of working to stakeholders unfamiliar with design multiples times throughout the project. On the other hand, when forces beyond our control blocked us, the team had to learn how to compromise and focus its energy on areas that could be influenced by our work.

Finding personal challenges within difficult projects keeps your head on the goal

The ustwo team encountered several roadblocks during the duration of this engagement. Focusing on secondary aspects of the project (learning Material Design guidelines, for example) helped me stay motivated while larger issues where being resolved.

The ustwo team consisted of:

• 1 Project Manager
• 3 Product Designers

The American Express/Plenti Team consisted of:

• 1 Product Owner
• 1 Project Manager
• 3 iOS Developers
• 3 Android Developers
• 2 Quality Assurance Engineers

My responsibilities for this project included:

• Conducting Research and user-centered design exercises
• Distilling information and prioritizing key findings
• Communicate V2 vision to key stakeholders at Amex/Plenti
• Create testable prototypes + conduct user testing
• Understand and apply Material Design principles to the Plenti mobile experience
• Create visual comps + visual guidelines for V2