Mexico Consumer Credit Card Next Steps
Stakeholders (Project Team): Project Design Manager (me), Mexico Partner Team, Project Manager, Product Owner, Development Engineers
Problem: The Partner Team in Mexico had a pre-existing Pre-Approval Next Steps web page that was causing customer confusion and needed a redesign. The pre-existing UI was confusing in its use of icons and layout, and causing user experience (UX) confusion and heightened calls to customer service.
My Role: I was the lead UX/UI Designer on the team and tasked to redesign their legacy Next Steps page. I created two mocks for A/B testing used during user interviews, this helped us validate which direction to take.
Legacy Next Steps page
The problem: The row of icons reads like a progress tracker. It is not. This is actually the final page in the journey. This page and the icons were supposed to tell the user what their next steps are offline. This was causing confusion because users were unsure what would happen when they clicked “Subir tus documentos” - would it take them to the page with the mobile phone icon or to another?
A/B Test Mocks
The below mocks were used for an A/B test. We asked Amex customers to view each (I also created the same in Spanish, those were provided to the users). The Mexico Partner team were adiment on using icons, so I kept the use of icons. However, I tried to used icons (from the Amex Design System). I also redesign the UI to remove the “project tracker” feel and let the user know this displays “steps” by simply listing them as steps. In addition to UI/UX design, I also made several content edits. Our main was to learn if the UI was clear and which iconography was preferred. The users chose and we went with Mock 1.
Mock 1
Mock 2