Checkout migration and optimization for white labeling
Role
Lead UX Designer
Platform
Web
Status
Shipped
Year
2023
Our entire hotel-booking platform had been migrated to React.js except for the checkout which was still in Angular.js. In the process of migrating checkout, we heavily optimized the UX throughout which resulted in a 10% increase in both conversion and margin.
We had a dedicated EPD scrum team to tackle this checkout migration.
Including our product owner, a small group of developers, and me as the design lead with occasional support from 1-2 additional designers.
We had a dedicated EPD scrum team to tackle this checkout migration.
Including our product owner, a small group of developers, and me as the design lead with occasional support from 1-2 additional designers.
We had a dedicated EPD scrum team to tackle this checkout migration.
Including our product owner, a small group of developers, and me as the design lead with occasional support from 1-2 additional designers.
Errors and lag time frequent on the backend
Dated, desktop-centric UI & partners with mobile-heavy users
Diminishing developer expertise on old framework = hard to update
Lack of a design system > features added over time > inconsistent UI
Project motivations
Errors and lag time frequent on the backend
Dated, desktop-centric UI & partners with mobile-heavy users
Diminishing developer expertise on old framework = hard to update
Lack of a design system > features added over time > inconsistent UI
Project motivations
Errors and lag time frequent on the backend
Dated, desktop-centric UI & partners with mobile-heavy users
Diminishing developer expertise on old framework = hard to update
Lack of a design system > features added over time > inconsistent UI
Project motivations
Since the front-end would need to be rebuilt anyway, this created a unique opportunity to optimize the UX & UI along the way.
Since the front-end would need to be rebuilt anyway, this created a unique opportunity to optimize the UX & UI along the way.
Since the front-end would need to be rebuilt anyway, this created a unique opportunity to optimize the UX & UI along the way.
Mobile and desktop views of the final design
This checkout was a white label, hotel booking platform branded for various global partners, accounting for each of their unique feature needs
This product also accounted for 3 different funnel types, each with different checkout requirements
Product context
This checkout was a white label, hotel booking platform branded for various global partners, accounting for each of their unique feature needs
This product also accounted for 3 different funnel types, each with different checkout requirements
Product context
This checkout was a white label, hotel booking platform branded for various global partners, accounting for each of their unique feature needs
This product also accounted for 3 different funnel types, each with different checkout requirements
Product context
3
Types of funnel experiences
20+
Unique partner brands
20+
Configurable partner features
1
Modular & themable checkout
3
Types of funnel experiences
20+
Unique partner brands
20+
Configurable partner features
1
Modular & themable checkout
3
Types of funnel experiences
20+
Unique partner brands
20+
Configurable partner features
1
Modular & themable checkout
A sample of the configurable features to account for.
Existing mobile page
Existing desktop page
The existing page (shown above) was a single page form with some redundant info, inconsistent UI, and lots of visual noise, particularly for mobile users.
Our vision was to build upon our small design system to create new, highly modular and configurable components from a mobile-first perspective. This would help us simplify content and create a consistent UI.
The existing page (shown above) was a single page form with some redundant info, inconsistent UI, and lots of visual noise, particularly for mobile users.
Our vision was to build upon our small design system to create new, highly modular and configurable components from a mobile-first perspective. This would help us simplify content and create a consistent UI.
The existing page (shown above) was a single page form with some redundant info, inconsistent UI, and lots of visual noise, particularly for mobile users.
Our vision was to build upon our small design system to create new, highly modular and configurable components from a mobile-first perspective. This would help us simplify content and create a consistent UI.
Competitive analysis comparing desktop-first vs mobile-first UIs.
Auto-filled fields whenever possible to reduce effort for the user.
Eliminating any redundancy and unnecessary fields.
Break down steps to reduce overwhelm about the task at hand.
What does it mean to consider mobile-first?
Auto-filled fields whenever possible to reduce effort for the user.
Eliminating any redundancy and unnecessary fields.
Break down steps to reduce overwhelm about the task at hand.
What does it mean to consider mobile-first?
Auto-filled fields whenever possible to reduce effort for the user.
Eliminating any redundancy and unnecessary fields.
Break down steps to reduce overwhelm about the task at hand.
What does it mean to consider mobile-first?
"If I've already given you my data and told you to store it, then you should keep it all in one place and then put it in there. Make it easier for me."
—
Amber, a participant from our user study below, giving general feedback on what she'd like to see improved from the current experience.
"If I've already given you my data and told you to store it, then you should keep it all in one place and then put it in there. Make it easier for me."
—
Amber, a participant from our user study below, giving general feedback on what she'd like to see improved from the current experience.
"If I've already given you my data and told you to store it, then you should keep it all in one place and then put it in there. Make it easier for me."
—
Amber, a participant from our user study below, giving general feedback on what she'd like to see improved from the current experience.
With help from our UXR lead, we conducted qualitative user testing on 3 different styles of checkouts.
We interviewed 9 users in an unmoderated walkthrough. Each user saw all 3 prototypes in varying order and shared their thoughts and experience out loud.
With help from our UXR lead, we conducted qualitative user testing on 3 different styles of checkouts.
We interviewed 9 users in an unmoderated walkthrough. Each user saw all 3 prototypes in varying order and shared their thoughts and experience out loud.
With help from our UXR lead, we conducted qualitative user testing on 3 different styles of checkouts.
We interviewed 9 users in an unmoderated walkthrough. Each user saw all 3 prototypes in varying order and shared their thoughts and experience out loud.
Wireframe prototypes we used for this round of user testing
Single page
Our existing style of checkout. Simple and straightforward but can be percieved as a lot of work for the user.
VS
Multi-page
Steps are broken down into multiple pages and the user completes one at a time in a step-through style.
VS
Accordion
All steps are on one page, but the user only sees what they need to for the step they are on as the rest are collapsed.
Single page
Our existing style of checkout. Simple and straightforward but can be percieved as a lot of work for the user.
VS
Multi-page
Steps are broken down into multiple pages and the user completes one at a time in a step-through style.
VS
Accordion
All steps are on one page, but the user only sees what they need to for the step they are on as the rest are collapsed.
Single page
Our existing style of checkout. Simple and straightforward but can be percieved as a lot of work for the user.
VS
Multi-page
Steps are broken down into multiple pages and the user completes one at a time in a step-through style.
VS
Accordion
All steps are on one page, but the user only sees what they need to for the step they are on as the rest are collapsed.
"The [multi-page] prototype is my favorite because payment was on a separate page which felt more secure. And it's easier on a tiny screen. I also appreciated that all of the details were there without having to open anything."
—
Julie, one of the users who participated in this test.
"The [multi-page] prototype is my favorite because payment was on a separate page which felt more secure. And it's easier on a tiny screen. I also appreciated that all of the details were there without having to open anything."
—
Julie, one of the users who participated in this test.
"The [multi-page] prototype is my favorite because payment was on a separate page which felt more secure. And it's easier on a tiny screen. I also appreciated that all of the details were there without having to open anything."
—
Julie, one of the users who participated in this test.
A small portion of the test analysis, showing users' split preferences on checkout style.
"It’s still much more important what you ask your customers to do during the checkout (as well as how you ask them), rather than if it’s a one-page, accordion style or traditional linear multi-page checkout process."
—
Baymard Institute
"It’s still much more important what you ask your customers to do during the checkout (as well as how you ask them), rather than if it’s a one-page, accordion style or traditional linear multi-page checkout process."
—
Baymard Institute
"It’s still much more important what you ask your customers to do during the checkout (as well as how you ask them), rather than if it’s a one-page, accordion style or traditional linear multi-page checkout process."
—
Baymard Institute
A multi-page experience was the style of checkout we chose to proceed with
While the research results were inconclusive, our focus on mobile-markets ultimately leaned me towards the multi-page style of checkout to relieve users of content overwhelm. Our parent company also used this style of checkout for similar needs which validated this choice.
A multi-page experience was the style of checkout we chose to proceed with
While the research results were inconclusive, our focus on mobile-markets ultimately leaned me towards the multi-page style of checkout to relieve users of content overwhelm. Our parent company also used this style of checkout for similar needs which validated this choice.
A multi-page experience was the style of checkout we chose to proceed with
While the research results were inconclusive, our focus on mobile-markets ultimately leaned me towards the multi-page style of checkout to relieve users of content overwhelm. Our parent company also used this style of checkout for similar needs which validated this choice.
My EPD scrum team documented all needed features upfront
This helped us prioritize work so we could work agilely and launch iteratively.
My EPD scrum team documented all needed features upfront
This helped us prioritize work so we could work agilely and launch iteratively.
My EPD scrum team documented all needed features upfront
This helped us prioritize work so we could work agilely and launch iteratively.
#1 priority features for design: guest information inputs, accommodation details, price breakdown, and payment details.
Consulting best practices
Our new layout style would require some rethinking when it came to how some of our features would be communicated. The nature of this project meant we would be updating multiple aspects of the design simultaneously.
Consulting best practices
Our new layout style would require some rethinking when it came to how some of our features would be communicated. The nature of this project meant we would be updating multiple aspects of the design simultaneously.
Consulting best practices
Our new layout style would require some rethinking when it came to how some of our features would be communicated. The nature of this project meant we would be updating multiple aspects of the design simultaneously.
This meant testing each newly designed feature ourselves would be too difficult and time consuming to juggle.
Existing ux research was consulted heavily to ensure we would be giving our partners’ users a tried and true experience.
This meant testing each newly designed feature ourselves would be too difficult and time consuming to juggle.
Existing ux research was consulted heavily to ensure we would be giving our partners’ users a tried and true experience.
This meant testing each newly designed feature ourselves would be too difficult and time consuming to juggle.
Existing ux research was consulted heavily to ensure we would be giving our partners’ users a tried and true experience.
"Poor-performing Checkout UX is a common reason for users abandoning their purchase."
—
Baymard Institute (from whom we heavily consulted their research)
"Poor-performing Checkout UX is a common reason for users abandoning their purchase."
—
Baymard Institute (from whom we heavily consulted their research)
"Poor-performing Checkout UX is a common reason for users abandoning their purchase."
—
Baymard Institute (from whom we heavily consulted their research)
We launched the new checkout with our first partner, T-Mobile!
The page experiment was rolled out with partial user traffic at first. We watched conversion closely to triage any errors.
We launched the new checkout with our first partner, T-Mobile!
The page experiment was rolled out with partial user traffic at first. We watched conversion closely to triage any errors.
We launched the new checkout with our first partner, T-Mobile!
The page experiment was rolled out with partial user traffic at first. We watched conversion closely to triage any errors.
Some views from this partner launch.
We conducted a round of usability testing to validate our new experience.
Our mobile-first checkout performed well and 100% of respondents felt either confident or very confident about their overall experience.
We conducted a round of usability testing to validate our new experience.
Our mobile-first checkout performed well and 100% of respondents felt either confident or very confident about their overall experience.
We conducted a round of usability testing to validate our new experience.
Our mobile-first checkout performed well and 100% of respondents felt either confident or very confident about their overall experience.
Results from our test's tasks. This showed us where any spots were that may have needed any re-evaluation.
100%
of users felt either "confident" or "very confident" using the site
6.25/7
average ease of use rating for the tasks performed
100%
of users felt either "confident" or "very confident" using the site
6.25/7
average ease of use rating for the tasks performed
100%
of users felt either "confident" or "very confident" using the site
6.25/7
average ease of use rating for the tasks performed
“I felt very confident, I understood everything it asked me to do. I was able to get it done really quickly. It was very informative and easy to navigate.”
—
Jeremy, on his overall feedback at the end of the test
“I felt very confident, I understood everything it asked me to do. I was able to get it done really quickly. It was very informative and easy to navigate.”
—
Jeremy, on his overall feedback at the end of the test
“I felt very confident, I understood everything it asked me to do. I was able to get it done really quickly. It was very informative and easy to navigate.”
—
Jeremy, on his overall feedback at the end of the test
Old checkout on the left, new checkout on the right.
Before
Faded, inconsistent, and small input fields. Text stacking is making input seemed cramped and difficult to skim.
VS
After
Layout of information formatted more clearly for mobile. Helpful motivators and CTAs present.
Before
Faded, inconsistent, and small input fields. Text stacking is making input seemed cramped and difficult to skim.
VS
After
Layout of information formatted more clearly for mobile. Helpful motivators and CTAs present.
Before
Faded, inconsistent, and small input fields. Text stacking is making input seemed cramped and difficult to skim.
VS
After
Layout of information formatted more clearly for mobile. Helpful motivators and CTAs present.
After troubleshooting a few bugs, not only was conversion up, but overall load time was also down.
Once the page met and/or exceeded conversion rates of the existing Angular page, it was rolled out to all users of T-Mobile.
After troubleshooting a few bugs, not only was conversion up, but overall load time was also down.
Once the page met and/or exceeded conversion rates of the existing Angular page, it was rolled out to all users of T-Mobile.
After troubleshooting a few bugs, not only was conversion up, but overall load time was also down.
Once the page met and/or exceeded conversion rates of the existing Angular page, it was rolled out to all users of T-Mobile.
"So intuitive I could've done it in my sleep and not on coffee."
—
Collette, one of our users in the usability test describing her experience
"So intuitive I could've done it in my sleep and not on coffee."
—
Collette, one of our users in the usability test describing her experience
"So intuitive I could've done it in my sleep and not on coffee."
—
Collette, one of our users in the usability test describing her experience
We continued designing and developing for our other two types of checkouts:
T-Mobile was considered a "discount" partner. Next, we solved for when a user earns rewards through checkout, and for when a user redeems rewards for their booking. These checkouts all used the same design system base, but each required unique details and features.
We continued designing and developing for our other two types of checkouts:
T-Mobile was considered a "discount" partner. Next, we solved for when a user earns rewards through checkout, and for when a user redeems rewards for their booking. These checkouts all used the same design system base, but each required unique details and features.
We continued designing and developing for our other two types of checkouts:
T-Mobile was considered a "discount" partner. Next, we solved for when a user earns rewards through checkout, and for when a user redeems rewards for their booking. These checkouts all used the same design system base, but each required unique details and features.
One unique use case on the "earning" checkout was being able to earn rewards without having to log in. This experience was super clunky on the old page and required some creative problem solving! Reach out to learn more.
One unique use case on the "earning" checkout was being able to earn rewards without having to log in. This experience was super clunky on the old page and required some creative problem solving! Reach out to learn more.
One unique use case on the "earning" checkout was being able to earn rewards without having to log in. This experience was super clunky on the old page and required some creative problem solving! Reach out to learn more.
Comparison of how the details panel varies based on which type of funnel the checkout is for.
The price breakdown was a whole project in itself too! Happy to share more details upon request.
The price breakdown was a whole project in itself too! Happy to share more details upon request.
The price breakdown was a whole project in itself too! Happy to share more details upon request.
In addition to migrating and optimizing all old features, we added entirely new ones as well
One such feature was the ability to pay through a third party. This is an example of a long anticipated feature that many users spoke about that we were finally able to design and implement for our platform.
In addition to migrating and optimizing all old features, we added entirely new ones as well
One such feature was the ability to pay through a third party. This is an example of a long anticipated feature that many users spoke about that we were finally able to design and implement for our platform.
In addition to migrating and optimizing all old features, we added entirely new ones as well
One such feature was the ability to pay through a third party. This is an example of a long anticipated feature that many users spoke about that we were finally able to design and implement for our platform.
Payment selector flow with cascading logic.
Interaction details
75%
of users spoke of immediacy & convenience as their top associations for a positive checkout experience.
33%
of users specifically brought up their desire for third party payment methods during testing even when it was not asked about.
30%
increase in margin after implementing this new Apple Pay feature.
75%
of users spoke of immediacy & convenience as their top associations for a positive checkout experience.
33%
of users specifically brought up their desire for third party payment methods during testing even when it was not asked about.
30%
increase in margin after implementing this new Apple Pay feature.
75%
of users spoke of immediacy & convenience as their top associations for a positive checkout experience.
33%
of users specifically brought up their desire for third party payment methods during testing even when it was not asked about.
30%
increase in margin after implementing this new Apple Pay feature.
Eventually, all products under all types of checkouts on this platform were successfully migrated to the new design.
Eventually, all products under all types of checkouts on this platform were successfully migrated to the new design.
Eventually, all products under all types of checkouts on this platform were successfully migrated to the new design.
In production walkthrough of a discount funnel checkout.
Modular design with thorough documentation improved workflow efficiency.
Highly configurable UI system created easy to follow patterns for the user.
Various accessibility issues and long-known ux gripes were addressed.
Page load time was reduced and added loading states better communicated progress to the user.
10% increase in both conversion and margin for the baseline migration.
Wins!
Modular design with thorough documentation improved workflow efficiency.
Highly configurable UI system created easy to follow patterns for the user.
Various accessibility issues and long-known ux gripes were addressed.
Page load time was reduced and added loading states better communicated progress to the user.
10% increase in both conversion and margin for the baseline migration.
Wins!
Modular design with thorough documentation improved workflow efficiency.
Highly configurable UI system created easy to follow patterns for the user.
Various accessibility issues and long-known ux gripes were addressed.
Page load time was reduced and added loading states better communicated progress to the user.
10% increase in both conversion and margin for the baseline migration.
Wins!
10%
Increase in conversion for baseline migration
10%
Increase in margin for baseline migration
10%
Increase in conversion for baseline migration
10%
Increase in margin for baseline migration
10%
Increase in conversion for baseline migration
10%
Increase in margin for baseline migration
A sample of documentation for nested components and their configurability.
A sample of documentation laying out how each feature should be configured if needed per partner.
Retrospective
Throughout the process, we had moments of needing to go back and tweak previously designed pieces. As much as we tried to document all use cases upfront, we occasionally uncovered new details that required some additional consideration for everything to work together seamlessly.
Reward travel is complex!
There’s a learning curve to understanding how all of its unique features and use cases work together.
A clearer source of truth on our product could’ve potentially helped mitigate some of these instances of reconsideration.
Information gathering became a large time suck and made it clear the importance efficient internal systems that include robust baseline templates and documentation.
Retrospective
Throughout the process, we had moments of needing to go back and tweak previously designed pieces. As much as we tried to document all use cases upfront, we occasionally uncovered new details that required some additional consideration for everything to work together seamlessly.
Reward travel is complex!
There’s a learning curve to understanding how all of its unique features and use cases work together.
A clearer source of truth on our product could’ve potentially helped mitigate some of these instances of reconsideration.
Information gathering became a large time suck and made it clear the importance efficient internal systems that include robust baseline templates and documentation.
Retrospective
Throughout the process, we had moments of needing to go back and tweak previously designed pieces. As much as we tried to document all use cases upfront, we occasionally uncovered new details that required some additional consideration for everything to work together seamlessly.
Reward travel is complex!
There’s a learning curve to understanding how all of its unique features and use cases work together.
A clearer source of truth on our product could’ve potentially helped mitigate some of these instances of reconsideration.
Information gathering became a large time suck and made it clear the importance efficient internal systems that include robust baseline templates and documentation.
After this, I worked on some design ops initiatives to help solve some of these uncovered issues! Check out my design tokens work for one aspect of this work.
After this, I worked on some design ops initiatives to help solve some of these uncovered issues! Check out my design tokens work for one aspect of this work.
After this, I worked on some design ops initiatives to help solve some of these uncovered issues! Check out my design tokens work for one aspect of this work.