COntactCareerAboutWOrksIntro
Product design

Payments Re-design

At the beginning of 2020, the Payment Component team was asked to define the Payment Component strategy for the next year in order to continue serving our internal client needs and further improve our end-users’ payment experience across the Connected Trip. With the introduction of new features that the payment component was not designed to scale for and a technical migration looming, we needed to take a look at the existing payment component experience, propose quick wins, and define a long term vision. Some things we had to consider: - User needs, pain points, and building user trust with a topic as sensitive as payments - Technical limitations - Building a product-agnostic component that could work across verticals while still catering to individual vertical’s needs - Scalability for future payment features such as credits, vouchers, installments, and different payment timing products
Client:
Booking.com
Release Date:
May 2021
See Project

My role

Project Planning

At the very beginning of the project, I put together the proposed end deliverables, the process for how we were going to get there and tangible deliverables for each checkpoint, and a detailed UX roadmap to get stakeholder buy-in.

Facilitation 

I planned and facilitated multiple design thinking workshops, including HMW workshops, multiple critique sessions, and ideation sessions with ALL roles. Outcomes from each were documented and brought to further iterations. 

Stakeholder Management

I became the main spokesperson and advocate for this project and managed multiple stakeholders in meetings for critiques, updates, and sharing learnings. 

Documentation 

Each step of the process and learnings were thoroughly documented and design proposals were brought forward with data points and documentation behind why each decision was made. 

UX / UI design + delegation  

Following the ideation sessions done with multiple designers, I was the one to collate all the top voted on concepts into one cohesive design to then prototype and test. When necessary and we wanted to run multiple tests, design iterations were delegated to other designers. 

Research + Data Gathering 

Led research and testing initiatives for the vision collaborating with copy with assistance from user researcher, including heuristics evaluation and user testing sessions.

‍

Testimonials


“To give an idea of the work that's been put in Camille has created a project roadmap, gathered research, lead multiple brainstorms, ran new research, created presentations and contributed 95% of the visual design work. This incredibly thorough approach combined with Camille's relentless documentation has made this project inspirational to be a part of. Its amongst the best work i've seen at this company, if not my entire career. All if this whilst adjusting to work during a pandemic.”

Alastair Taylor | Senior UX Designer

‍

“Your payments design work makes a complex topic easier to understand - though it may not be possible to make it truly simple. You properly decompose processes, analyze customer needs, and visualize business trade-offs. ”

John Belanger | Principal Product Designer

‍

Key stakeholders for the project

The Design Process

Understand / Define

What we did:
  • Multiple rounds of feedback on existing UI with designers, design LT, product, and other verticals. Documented feedback and mapped patterns. 
  • Worked with principal designer to map out payments flow diagram without screens
  • Mapped As-Is UI across all verticals 
  • Went through all existing data and created key themes as pillars of what we were designing for. ‍
  • Created a checklist of customer and stakeholder problems to consider when designing solutions.
Existing payments UI when I joined the team
Key deliverables*:

Payments Customer Problems Checklist

Payments Industry Analysis

Identified key themes

Payments UX Audit 

Payments Flows and As-is UI understanding

*all deliverables may be reviewed upon request

‍

Ideate

What we did:
  • Design workshops and brainstorming sessions including designers, devs, and product. 
  • Created collaborative file in figma and had track designers brainstorm individually while building off each other’s ideas. 
  • Facilitated sessions with designers where everyone shared their ideas, feedback, and voted on concepts to move forward with. 
  • Took the concepts voted on and created a cohesive design to then take to critique sessions with all roles‍
  • Iterated as a result of critique sessions to reach a first prototype to test.
Some ideas that came out of brainstorming sessions

‍


Key deliverables*:

PC Vision Exploratory Collaboration file

PC UX Strategy file 

Proposal presentation with reasons why design decisions were made

*all deliverables may be reviewed upon request

‍

Prototype / Test

What we did:
  • While remote user testing was shut down during the pandemic, we ran internal heuristic evaluations on the vision. 
  • Worked with our user researcher at the time to put together a plan for remote user testing. 
  • Created two high fidelity prototypes to test two key apps flows for the vision and user tested on usertesting.com 
  • Worked with user researcher to user test the desktop version of the vision also on usertesting.com
Screen from user testing report

‍

Key deliverables*:

Payments Heuristic Evaluation Notes

Payments Vision Heuristics Evaluation

Vision V2 User Testing Findings

Desktop user testing Findings

*all deliverables may be reviewed upon request

‍

Iterate / Experiment

What we did:
  • Iterated on design and ported to all platforms
  • Broke the vision down into smaller step experiments.
  • Web technical migration was struggling and business asked us to scale back the vision to the next smallest step to try to improve conversion. 
  • Scaled back the vision and prioritized features on impact vs dev effort. 
  • On web, implemented the tappable UI to select payment methods instead of the dropdown, leading to a conversion increase on mobile. 
  • Iterated on desktop and increased the size of the tappable icons to get closer to base, which pushed conversion to within the acceptable loss and stabilized migration.
New designs for desktop and mobile (live) 

‍

Key deliverables*:

Payments Vision Experimentation Lines presentation

Proposed desktop experimentation lines for migration

Improved UI for apps experimentation lines

*all deliverables may be reviewed upon request

‍

How & Why

How did we prioritize features for experimentation?

With pressure from product and the business to stabilize migration, we worked with the developers to discuss how we wanted to implement the feature we proposed with the most data points- the new payment method selection with the tappable UI. 

We realized that we could literally JUST replace the payment method dropdown with the row of tappable icons and leave everything the same for minimal dev effort. 

Why was this our highest confidence feature? 

From the very beginning of the process, in every user testing session run on the old PC UI, users consistently clicked on the small payment method icons to try to select a payment method. When ABU tested the old PC UI in BS3, they hypothesized that the drop in conversion was because payment methods were hidden behind a dropdown on web and on apps, a second level select. We found that in user testing, users found this new UI intuitive and easy to use.


Continue Experimentation

What we did:
  • Following the stabilization of migration on web, we started development on the new UI for apps.
  • Android was developed first and went full on with a conclusive increase in conversion
  • iOS followed and also went full on with a conclusive increase in conversion
  • Analysed each experiment in postmortems

‍

Key deliverables:

New design for mobile, desktop, iOS, and android are all now full on for Booking.com and are being migrated to flights and rental cars.

Impact

Conversion increase

  • Without giving exact numbers, there was a significant and conclusive increase in conversion when the experiment was run for the re-design on all platforms. We believe this could partly be due to the fact that payments and selecting the payment method is much more visible than it was before and can be easily found and selected.

Error decrease

  • Along the lines of what is stated above, the number of errors decreased significantly and conclusively. More users input their CVC, more users selected a payment method before clicking the book button, and there were less errors and empty fields overall, making the payments experience quicker and more seamless.

Influenced Payments 2021 roadmap 

  • Features proposed in the vision were added to team roadmaps for 2021 and prioritized for experimentation 
  • More UX-led initiatives popped up and have been prioritized by product in 2021

New processes introduced and implemented to improve UX quality

Before joining the Payment Component team, there were no UX reviews before a feature went live, leading to a product with multiple UI bugs. After working with devs to fix all the UI bugs, I put together a proposed product development process for the team with the most important item implemented being UX reviews before any feature goes live. 

This may seem like a no-brainer, but design was not part of the QA process before that, and now, as a UX group, we push to review all features track wide before anything is pushed to production.


Portfolio

More PROJECTS

View
JB Prosthodontics
Website
View
Illustrations
Graphic Design
View
Vendor Portal Design
Product design
About Me

I'm a product and user experience designer with a strong interest in holistic, end to end design. I have experience in almost all areas of design- graphic, web, social, mobile, and print, and in addition to that, love public speaking and training others.

Navigations
IntroPortfolioBlogCareerAboutContact
Contacts
I’m based in Amsterdam, NL
czgribbons@gmail.com
+31 634 00 5016
Send Message
Follow
Carefully crafted by Elastic Themes   |   Licensing
Powered by Webflow