Note: due to NDA, details and projects I’m allowed to show are limited to what is publicly available and based off industry research. Design decisions based off of internal research, wireframes, iterations, and build kits are restricted American Express intellectual property and cannot be shown.
France eApply Journeys
Design Uplift
— PROJECT NAME
France credit card application uplift
— ROLE
Lead Product Designer
UX Writer
Design Project Manager
— DATE
2022 – 2024
Lead designer for French market overseeing 2 senior designers. Executed and launched a design uplift and a series of features to optimize legacy eApply journeys for 4 credit card products for Air France, American Express, and Amazon.
Collaborated with product, in-house accessibility experts, marketing, user research, design, and engineering.
Accomplishments
Business Unit Key Achievement Award 2023.
+7.5% conversion rate, first optimized mobile experience in any international eApply market. Sole designer.
+2.74% submit rate, drove over ~$30M in business impact from launching new progress tracker design system component in US, FR, UK, MX, AU. Included first ever conclusive A/B test of its kind at Amex (out of 100+ tests). Sole designer.
Commercial pre-fill usage +60% and +50% submit rate compared to manual form. Sole designer.
Developed an enterprise-wide QA process integrating design and engineering, and was selected to present it at the 2024 global internal design conference.
Created new acquisition design system documentation repository for 50 person team Collected internal/external research and analytics to write succinct design usage guidelines for 35+ components. Stood up contribution, governance, and education model.
Mobile Iterations
Desktop Iterations
New Progress Tracker Design System Component
Final Commercial Prefill
Problem
Air France consumer eApply journeys were built on legacy systems that didn’t use the American Express design language system (DLS) and are looking to improve conversion rates.
Considerations:
- A portion of the journey is developed by a third party vendor.
Opportunity
Increase conversion rates by improving:
- Accessibility
- Branding consistency & user trust
- UX/UI and copy
Produce new design system components/patterns
- Form structure + content
- Prefill for commercial cards
- Mobile grouping
- Progress tracker
Create new acquisition design system documentation repository for 50 person team
Develop and pilot a new design QA and tech handoff process to be used enterprise-wide.
The Users
French consumer market:
Debit usage > credit usage in France
Don't have the same central credit system as the US so the application is much longer
Project Steps
- Update designs to Amex design system and team pattern library
- Create new design system components/patterns
- Research + iterate
- Work with French translators to improve all copy
- Tech handoff and Design QA
Form Structure
Increased form readability based off of industry best practices, which was added to our design system.
Field Width
A Baymard Institute usability study showed that if the field length doesn’t match the users expectations, then they start to wonder if they misunderstood the label.
By matching field width with the character limits, we give the user a better expectation of how long the input should be while also improving the readability of the form by reducing used space. Too much used space makes it hard for the user to know where to draw their focus to.
Generally, all fields above a character threshold were made full width and otherwise were made half width so they can all align. However, I did have some exceptions here such as zip code and city.
Column Layout
A single column layout with a few select logical groupings like address and first name and last name. If we used too many groupings, it moves more toward a 2 column layout which is difficult to read. Users may go down the entire first column and then the second, go in a zig zag pattern, or read second column and then first. The single column layout is a well researched topic in many industry eye-tracking studies.
Information Hierarchy
Users are more likely to complete a form if it starts out easier. So when there's contact information at the first part of the form, that’s on purpose. If you make progress with the form and you’re more likely to complete it the further you get even if the rest of the questions get progressively harder because you’ve already invested your time. This is called Robert Cialdini’s principle of “commitment and consistency”.
Default Dropdowns
I put the default for several drop downs as France first, as you can see on form structure page since the vast majority of prospective customers live and are born in France, speeding up form completion time. For other drop downs, I made the default blank because if they’re filled in, the user is more likely to miss that they need to complete this field.
Error Messages, Tooltips, Field Labels, & Hint Text
Went through 40+ individual fields and worked with French translators to improve UX and accessibility.
Error Messages
Made accessible error messages that repeat the name of the label name and appear on a component level basis after submit. Repeating the name of the field name along with a message that tells the user how to correct for those with screen readers. Without repeating the name of the field, those who use screen readers won’t know where to navigate to go fix it.
Errors have 2 ways of being perceived in this design: color and written out error message.
Tooltips vs. Hint Text
Hint text was used for any info that is required to complete the input. If it’s supplementary information it goes into the tooltip because not everyone will click on it.
The legacy version had tooltips for every single field that had info that was not useful in many fields, which isn’t the best experience and actually slowed down the time to complete the form.
UX Writing
Made a spreadsheet for all fields with English text, French translations, and suggestions for improvement. This was not only for this product but for all overlapping fields across the market to ensure consistency.
We did not have a copy writer on my team, so I wrote preliminary copy in English or French depending on the complexity and had the french marketing team approve everything. I took 6 years of french so could write some. Writing at a lower reading level is actually good for accessibility. In order to accommodate those with neurological issues, all content should be at an 8th grade reading level maximum (WCAG AAA).
Business Prefill Revision
Commercial card prefill usage increased by over 60%, with a 50% higher submit rate than manual input. I improved the user experience by switching from displaying all fields by default to a hidden format, now allowing users to manually fill out the form as needed.
Mobile Grouping
After card sorting and A/B testing for France Consumer, I broke up the pages into more manageable chunks, reduced page scroll, and combined the ID verification journey into the same progress tracker, which led to a +7.5% conversion rate. While I made the journey have more pages, I organized it in a way that the user could orient themselves better in the application and have a better expectation of how long the form would take to complete.
This was based off of guidance from WCAG Multi Page Forms. Breaking up pages into smaller forms "helps make long forms less daunting and easier to understand, particularly for people who are less experienced using computers or who have various cognitive disabilities".
Version 1 (10 pages)
4 steps with a separate tracker for ID verification
Version 2 (14 pages)
5 steps with sub steps including ID verification
New Progress Tracker Component
After pattern audits, gathering industry/internal research, and qualitative studies, I launched a new design system component that has a simplified visual design, a variable speed of progression, and % label. This new style also saves vertical space compared to the old version.
The first conclusive A/B test for any progress tracker at Amex, +2.74% submit rate.
Launched in US, France, UK, Mexico, and Australia, leading to over ~$30M in business value.
Handoff/QA
Created enterprise-wide QA process
- Pixel perfect built kits with implementation instructions
- Prototype walk through
- QA all designs across products and then QA in test environments
Design System Documentation Site
Created new acquisition documentation repository for 50 person team. Collected internal/external research and analytics to write succinct design usage guidelines for 35+ components. Stood up contribution, governance, and education model.
Global Pay Mobile & Offer Optimization
US Market
— PROJECT NAME
Mobile & Offer Optimization
— ROLE
Product Designer
— DATE
2023
Designed and launched an optimized mobile page grouping, a new welcome offer component, and accessible footnotes in desktop/mobile for US Global Pay eApply, which was added to the Acquisition Design Library (ADS).
Collaborated with user research, UX writer, product, legal, accessibility, and engineering.
Note: these designs are public, but not accessible to my specific user group so have been remade on my personal.
Accomplishments
+17% submit rate for mobile page grouping
+5% mobile and +4% desktop submit rate for new welcome offer design system component.
First accessible footnote solution at Amex. Wrote first article for inaugural enterprise-wide design system blog site.
Department Award for Design Impact
Before and After Desktop
Before and After Mobile Page 1
New Mobile Page grouping: 1 to 3 pages
Opportunity
Improve conversion rates by optimizing mobile design. Create new components for right hand rail/welcome offer and accessible footnotes in Acquisition Design Library (ADS).
Hypothesis
Several features leading to potential dropoff
- Single page application with a long scroll
- Welcome offer is at the bottom of long scroll and not seen before dropoff
- Text styling/visual design is confusing
- Copy is cumbersome on mobile
Process
- Pattern audits
- Design iterations
- Prototypes for qual/quant UX research + revised designs
- Low/no vision usability testing
- Pixel perfect build kits
- Tech handoff & QA
User Research
Qual/quant tested several variants distinguished by page grouping, hidden/displayed text, and location of welcome offer.
Pattern Audits
Created detailed audit of American Express patterns for the right hand rail and footnotes documenting screenshots, design observations, and accessibility issues.
Final Welcome Offer
- Welcome offer pushed to the top in mobile to encourage users
- Low technical complexity because of same style in all breakpoints
- Updated visual design/copy to improve readability
- FAQ moved outside the offer because it’s not related to the offer
- Accessible footnotes/links
Footnotes
The accessible footnotes solution in the welcome offer uses numbered superscripts that directly link into the corresponding section in the offer terms modal. Upon exiting out of the modal, focus returns to the original superscript. This satisfies the most critical level (A) from Web Content Accessibility Guidelines (WCAG) in the following sections: 1.1 Text Alternatives, 1.3.1 Information and Relationships, and 1.3.2 Meaningful Sequence.
Low vision testing
Worked with researcher to conduct low/no vision (mix of zoom and screenreader users) usability testing on the improved welcome offer and footnotes, and found that this solution significantly improved the experience for these users.
Mobile Page Grouping
Single page layout moved to a 3 page layout to limit long scroll and break up journey into manageable chunks. +17% conversion rate.
Tech handoff
- Pixel perfect mockups with example grids/spacing
- Prototype walk through during engineering grooming
- Slack channel with engineers/product
- Design QA
- Using my frontend experience to answer questions and debug
Results
New welcome offer led to a +5% on mobile and +4% on desktop conversion rate. +17% submit rate for new mobile grouping.
Internal LLM Financial Tool
— ROLE
Product Designer
UX Researcher
Product Manager
Scrum Master
— DATE
2021 – 2022
Sole designer, researcher, and product manager for the launch of a global internal LLM financial tool.
Accomplishments
Increased analyst productivity an estimated 66x
MVP launch and 2 feature releases
Process
- Qualitative user research with internal users
- Affinity Diagramming
- Feature prioritization
- Low – high fidelity mockups with usability testing/revision
- Tech handoff and QA
- Led engineering daily standup, PI/sprint planning
Qualitative UX Research
Created protocol and interviewed Amex employees
- Affinity Diagramming
- Feature brainstorming & prioritization
For the qualitative UX research study, I created protocol and interviewed amex employees. I explored their current work process and issues they faced. After the interviews, I did affinity diagramming to map out responses and organize into themes. Then I did feature brainstorming and prioritization.
Some things I considered when developing interview questions were:
- Not asking leading questions, or in other words trying to be neutral. So instead of asking what do you like about this page? You ask what do you think about this page?
- Asking questions in an increasing order of difficulty. Similar to how I did form design in the previous project, start off with easy questions and then people will be more invested to finish as they go through.
- Limiting question-order bias
Low – High Fi Mocks
Low – high fidelity mocks and had feedback sessions from stakeholders and the engineering team at each stage.
Usability Testing
I did moderated remote usability testing with Amex Employees. These were task oriented with follow up questions around: emotional impression, their opinions, user satisfaction, and any recommendations for how to improve the app.