lg-event-landing-au.jpg
lg-event-details-au-3-tab-tickets-4-row.jpg

 

TEAM & ROLES

 
0 (1).jpeg

Jake Brenchley
(

Director of Product Management

)

  • Oversaw the requirements needed from the business.

0.jpg

Robert Smith
(

Senior Product Manager

)

  • Roadmapped the AmEx Experiences product.

0.png

Jennifer

Onyeagbako


(Senior Product Designer)

  • Led and roadmapped the design explorations.

0 (2).jpeg

Lois Tatis
(Senior Software Engineer)

  • Developed the API calls and loading/error states.

0+%284%29.jpg

Manasa Lagisetty


(Software Engineer)

  • Developed the pages and API calls for all devices.

0.png

Jael Seatte

(UX Writer)

  • Provided the copy of the AmEx Experiences pages

0 (3).jpeg

Pragya Bhatt

(User Researcher)

  • Determined the users needs and concerns in user testing.

 

1. UNDERSTAND/PRODUCT THINKING

I supported the Rewards Team and Jennifer by being part of the research discovery and visual design process for AmEx Experiences. This part of AmEx’s portfolio was doing really well for the US market and our Product Team was aiming for a phased global launch to push to AU and UK markets.

The problem we were trying to solve with this was to give access to all AmEx Reward Card Members regardless of tier statues.

1) People Problem

  • AmEx Reward Card Members feel that they’re not getting most out of their card.

2) How did we know it was a problem?

  • Users were not spending/redeeming points or purchases with their Rewards card in 2019, which hurts company in the long run with potential partnerships and revenue generation.

3) How do we know if we’ve solved this problem?

  • When our customers discover they can use their Rewards Cards on other purchases with AmEx besides racking up points to spend. Thus, potentially increasing booking/conversions by 10% by bringing the page into the Rewards site.

 

 

2. DESIGN STRATEGY

I started the process with understanding the basis of how users would access the site from the Rewards Page and compared a few points from our user testing sessions with participants of the first design. From this, we discovered what we had to revise for our AU & UK launch.

 
User Flow | Entertainment.jpg

Designs and Prototype by: Jennifer Onyeagbako

 

USER TESTING

WHAT DID WE LEARN FROM TESTING THE PROTOTYPE FROM THE FIRST CONCEPT?

The team tested Jennifer’s first round of designs and we discovered that the flow was accessible, but the time it took to decide if the event was of interest was overwhelming to determine based on the information on Event Details plus the Homepage.

 

 

3. DESIGN EXECUTION

Iteration

WHAT DID WE LEARN FROM USER TESTING AND WHAT CAN WE ITERATE BASED ON THE FEEDBACK?

  • Image Hierarchy: Hero images are a critical piece of information that pushes the trajectory of the user journey when arriving on the page.

  • Aligning with Dates: AmEx members in AU read content differently in regards to dates, aligning with what they’re used to reading.

  • Education: Members need to know the differences between the events.

  • Select a Date: Members shouldn’t feel overwhelmed with content while checking out.

References

WHAT ELEMENTS CAN I INCLUDE THAT COULD WORK IN THIS NEXT ITERATION?

I browsed other AmEx sites to combine what we had in Jennifer’s designs plus these references into one.

 
AmEx AU Campaign Site - Events

AmEx AU Campaign Site - Events

AmEx AU Campaign Site - Event Details

AmEx AU Campaign Site - Event Details

 

iteration + references

WHAT IS THE NEW DESIGN THAT SHOULD BE SHIPPED?

I presented the corresponding designs for desktop, tablet, and mobile with specs documented to guide Lois and Manasa of how the designs would be created on their end. Design was altered due to requirements AU launch and user feedback to simplify the complexity of discovering events.

Landing Page:

  • Event and title name would captivate the user’s retention when arriving on this page and utilizing colors to contrast the distinction.

  • Customers immediately see the experience benefits to be educated on various types of events that are available.

  • Events itself have a distinctive feel when highlighting the image itself as the giveaway to dive deeper into the event details.

Event Details:

  • Customers are able to toggle through tabs on identifying the overview of the event plus check out.

  • Revision of purchasing tickets was to highlight the events and location and other logistical information to avoid cognitive load.

 
Final Design for Homepage - Web

Final Design for Homepage - Web

Final Design for Event Details - Web

Final Design for Event Details - Web

 

constraints

NOT ALL EVENTS WILL LOAD, HOW MIGHT WE INFORM OUR USERS THAT IS HAS/HAS NOT LOADED?

Lois and Manasa connected with me regarding API calls, certain events may not load. I suggested a solution where some aspects of animation to display the loading and error states could be a transparent experience.

 
Loading State for Hero Image

Loading State for Hero Image

Loading State for Event Tiles

Loading State for Event Tiles

API Error for Single Events

API Error for Single Events

Loading State for Content

Loading State for Content

API Error for All Events

API Error for All Events


 

Style Guides

AMEX’S DESIGN LANGUAGE

Style guide and design system provided by American Express as part of the Design Language System.

 
Desktop HD Copy 2.png

 

4. OUTCOME AND TAKEAWAYS

THE ROADMAP TO FUTURE AMEX’S EXPERIENCES

My design was officially shipped, but scrapped due to COVID. My biggest takeaway from this project was leading the end-to-end experience of developing the product, but also learning to create a strategy to empower users to navigate to their own benefits.

The initial target was to have an increase in conversion by 10% with this redesign. However, this could be utilized for Q1 in 2021.