Checkout Optimization
Firstleaf had developed and maintained six different checkouts for purchases throughout the website. This not only affected the user experience but also posed difficulties for the developers. The aim of the project was to consolidate the multiple checkouts and give them a refresh.
Checkout Optimization
Firstleaf had developed and maintained six different checkouts for purchases throughout the website. This not only affected the user experience but also posed difficulties for the developers. The aim of the project was to consolidate the multiple checkouts and give them a refresh.
Checkout Optimization
Firstleaf had developed and maintained six different checkouts for purchases throughout the website. This not only affected the user experience but also posed difficulties for the developers. The aim of the project was to consolidate the multiple checkouts and give them a refresh.
Company
Firstleaf
Role
Product Designer
Year
2022 - 2023
It all started with an idea - that there is ample room for checkout optimization
When I first joined Firstleaf, I began to examine our e-commerce website and listed out areas for improvement. Firstleaf's checkout process stood out to me as an anomaly - we had six different checkouts for various purchase flows, and all of them had distinct visual designs. Additionally, the code for each checkout was different, leading to challenges in maintenance for the developers. I saw a significant opportunity to not only optimize the checkout flow but also enhance the conversion rate.
It all started with an idea - that there is ample room for checkout optimization
When I first joined Firstleaf, I began to examine our e-commerce website and listed out areas for improvement. Firstleaf's checkout process stood out to me as an anomaly - we had six different checkouts for various purchase flows, and all of them had distinct visual designs. Additionally, the code for each checkout was different, leading to challenges in maintenance for the developers. I saw a significant opportunity to not only optimize the checkout flow but also enhance the conversion rate.
It all started with an idea - that there is ample room for checkout optimization
When I first joined Firstleaf, I began to examine our e-commerce website and listed out areas for improvement. Firstleaf's checkout process stood out to me as an anomaly - we had six different checkouts for various purchase flows, and all of them had distinct visual designs. Additionally, the code for each checkout was different, leading to challenges in maintenance for the developers. I saw a significant opportunity to not only optimize the checkout flow but also enhance the conversion rate.
I put on my 'Product Manager' hat, to prove this idea to stakeholders
During the start of this project, we did not have Product Managers at Firstleaf. I only had a Design Manager whom I was reporting to. It was on me to gather data and prove to stakeholders why we should embark on a checkout optimization project. I began collecting data to support my idea.
I put on my 'Product Manager' hat, to prove this idea to stakeholders
During the start of this project, we did not have Product Managers at Firstleaf. I only had a Design Manager whom I was reporting to. It was on me to gather data and prove to stakeholders why we should embark on a checkout optimization project. I began collecting data to support my idea.
I put on my 'Product Manager' hat, to prove this idea to stakeholders
During the start of this project, we did not have Product Managers at Firstleaf. I only had a Design Manager whom I was reporting to. It was on me to gather data and prove to stakeholders why we should embark on a checkout optimization project. I began collecting data to support my idea.
The steps that I took to prove my idea
Step 1 - Voicing customers' pain-points and concerns
I wanted to hear what the users had to say about our checkout experience. I conducted some basic user-experience tests on the existing cart and checkout. The target audience, which consisted of individuals aged 21-55 years old, interested in wine and e-commerce, were given specific tasks to perform. The objective was to uncover the pain points of the site.
Step 2 - Showcasing industry standards and data
I found data from various sources showcasing the benefits that we would get from optimizing the checkout process. Additionally, I outlined the negative effects of a poorly designed checkout. During the presentation, I showcased checkout experiences from some well-known e-commerce brands to illustrate the industry standards and highlight the need for us to catch up.
Step 3 - Breaking the assumption that we need 6 different checkouts for our website
There was an assumption among everyone that we had 6 different checkouts for a reason and that it was needed for the type of transactions on our website. As a user experience designer, I wanted to challenge this thought. I broke out and mapped all the different fields of the checkouts, listed the commonalities and differences, and demonstrated that consolidation was possible. I presented a map to our developers, design manager, and stakeholders.
The steps that I took to prove my idea
Step 1 - Voicing customers' pain-points and concerns
I wanted to hear what the users had to say about our checkout experience. I conducted some basic user-experience tests on the existing cart and checkout. The target audience, which consisted of individuals aged 21-55 years old, interested in wine and e-commerce, were given specific tasks to perform. The objective was to uncover the pain points of the site.
Step 2 - Showcasing industry standards and data
I found data from various sources showcasing the benefits that we would get from optimizing the checkout process. Additionally, I outlined the negative effects of a poorly designed checkout. During the presentation, I showcased checkout experiences from some well-known e-commerce brands to illustrate the industry standards and highlight the need for us to catch up.
Step 3 - Breaking the assumption that we need 6 different checkouts for our website
There was an assumption among everyone that we had 6 different checkouts for a reason and that it was needed for the type of transactions on our website. As a user experience designer, I wanted to challenge this thought. I broke out and mapped all the different fields of the checkouts, listed the commonalities and differences, and demonstrated that consolidation was possible. I presented a map to our developers, design manager, and stakeholders.
The steps that I took to prove my idea
Step 1 - Voicing customers' pain-points and concerns
I wanted to hear what the users had to say about our checkout experience. I conducted some basic user-experience tests on the existing cart and checkout. The target audience, which consisted of individuals aged 21-55 years old, interested in wine and e-commerce, were given specific tasks to perform. The objective was to uncover the pain points of the site.
Step 2 - Showcasing industry standards and data
I found data from various sources showcasing the benefits that we would get from optimizing the checkout process. Additionally, I outlined the negative effects of a poorly designed checkout. During the presentation, I showcased checkout experiences from some well-known e-commerce brands to illustrate the industry standards and highlight the need for us to catch up.
Step 3 - Breaking the assumption that we need 6 different checkouts for our website
There was an assumption among everyone that we had 6 different checkouts for a reason and that it was needed for the type of transactions on our website. As a user experience designer, I wanted to challenge this thought. I broke out and mapped all the different fields of the checkouts, listed the commonalities and differences, and demonstrated that consolidation was possible. I presented a map to our developers, design manager, and stakeholders.
Once we had stakeholders' interest, we started to brainstorm and ideate
Product managers, developers, and designers sat together for a brainstorming session about the checkout and cart. During the session, we discussed various Key Performance Indicators (KPIs) and functionalities that we wanted to improve. Additionally, we laid out some feature ideas as well.
Once we had stakeholders' interest, we started to brainstorm and ideate
Product managers, developers, and designers sat together for a brainstorming session about the checkout and cart. During the session, we discussed various Key Performance Indicators (KPIs) and functionalities that we wanted to improve. Additionally, we laid out some feature ideas as well.
Once we had stakeholders' interest, we started to brainstorm and ideate
Product managers, developers, and designers sat together for a brainstorming session about the checkout and cart. During the session, we discussed various Key Performance Indicators (KPIs) and functionalities that we wanted to improve. Additionally, we laid out some feature ideas as well.
Wireframing + evaluating with developers
Since everyone was on board with this project, I began working on wireframes to illustrate my ideas. I created 3-4 different wireframes for each section.
I presented all of the different options that I had to my manager and developers. During the discussions, we took into account the limitations of the Solidus system that we were using for our back-end. These shortcomings had to be considered while creating the designs. We talked about the technical effort required to work with Solidus and focused on picking designs that not only aligned with our back-end infrastructure but also made maintenance easier for the developers.
Wireframing + evaluating with developers
Since everyone was on board with this project, I began working on wireframes to illustrate my ideas. I created 3-4 different wireframes for each section.
I presented all of the different options that I had to my manager and developers. During the discussions, we took into account the limitations of the Solidus system that we were using for our back-end. These shortcomings had to be considered while creating the designs. We talked about the technical effort required to work with Solidus and focused on picking designs that not only aligned with our back-end infrastructure but also made maintenance easier for the developers.
Wireframing + evaluating with developers
Since everyone was on board with this project, I began working on wireframes to illustrate my ideas. I created 3-4 different wireframes for each section.
I presented all of the different options that I had to my manager and developers. During the discussions, we took into account the limitations of the Solidus system that we were using for our back-end. These shortcomings had to be considered while creating the designs. We talked about the technical effort required to work with Solidus and focused on picking designs that not only aligned with our back-end infrastructure but also made maintenance easier for the developers.
Building out our design system
Around this time, our marketing team was working on a brand refresh, and we took advantage of the newly created style guide for this project. As part of the checkout optimization, I created several design components that eventually became integral to our new design system. This process required extensive collaboration among the designers to ensure that the components remained consistent and in sync with the overall brand refresh.
Building out our design system
Around this time, our marketing team was working on a brand refresh, and we took advantage of the newly created style guide for this project. As part of the checkout optimization, I created several design components that eventually became integral to our new design system. This process required extensive collaboration among the designers to ensure that the components remained consistent and in sync with the overall brand refresh.
Building out our design system
Around this time, our marketing team was working on a brand refresh, and we took advantage of the newly created style guide for this project. As part of the checkout optimization, I created several design components that eventually became integral to our new design system. This process required extensive collaboration among the designers to ensure that the components remained consistent and in sync with the overall brand refresh.
Phase 1 - Creating a base that would support other features
The 6 checkouts were consolidated into one simple, user-friendly flow. The design was tailored to suit every aspect of our business, whether it was adhoc orders or subscriptions. Moreover, it provided a strong foundation that could easily accommodate the addition of different features in the future, both from a design and development perspective.
Phase 1 - Creating a base that would support other features
The 6 checkouts were consolidated into one simple, user-friendly flow. The design was tailored to suit every aspect of our business, whether it was adhoc orders or subscriptions. Moreover, it provided a strong foundation that could easily accommodate the addition of different features in the future, both from a design and development perspective.
Phase 1 - Creating a base that would support other features
The 6 checkouts were consolidated into one simple, user-friendly flow. The design was tailored to suit every aspect of our business, whether it was adhoc orders or subscriptions. Moreover, it provided a strong foundation that could easily accommodate the addition of different features in the future, both from a design and development perspective.
Results? A 10% increase in conversions!
Results? A 10% increase in conversions!
Results? A 10% increase in conversions!
Phase 2 - Rethinking the order confirmation screen
Many users were not aware that Firstleaf was a subscription based wine club, even after they placed their first order. When these users realized that it was club, they immediately cancelled it. We wanted to use the order confirmation screen as an opportunity to educate users about what to expect and links to change their club settings if needed.
Phase 2 - Rethinking the order confirmation screen
Many users were not aware that Firstleaf was a subscription based wine club, even after they placed their first order. When these users realized that it was club, they immediately cancelled it. We wanted to use the order confirmation screen as an opportunity to educate users about what to expect and links to change their club settings if needed.
Phase 2 - Rethinking the order confirmation screen
Many users were not aware that Firstleaf was a subscription based wine club, even after they placed their first order. When these users realized that it was club, they immediately cancelled it. We wanted to use the order confirmation screen as an opportunity to educate users about what to expect and links to change their club settings if needed.
Results? 3% less order cancellations and better retention
Results? 3% less order cancellations and better retention
Results? 3% less order cancellations and better retention
Phase 3 - One-click payments
One of the improvement opportunities that I identified early on, was making payments easy and quick. I wanted to implement one-click payments such as Google and Apple pay. We had to collaborate with our payment partner Stripe on this, and went through several back end changes to make this happen.
Phase 3 - One-click payments
One of the improvement opportunities that I identified early on, was making payments easy and quick. I wanted to implement one-click payments such as Google and Apple pay. We had to collaborate with our payment partner Stripe on this, and went through several back end changes to make this happen.
Phase 3 - One-click payments
One of the improvement opportunities that I identified early on, was making payments easy and quick. I wanted to implement one-click payments such as Google and Apple pay. We had to collaborate with our payment partner Stripe on this, and went through several back end changes to make this happen.
The feature has just been released and we are monitoring the results.
The feature has just been released and we are monitoring the results.
The feature has just been released and we are monitoring the results.
Learnings
It's good to take a milestone approach
In the middle of the process, we encountered realized that we had taken on more than we could handle. Even from the developers' perspective, it was too many features and changes to implement simultaneously. To make the project more manageable, we decided to break it down into several phases, which made it easier for everyone involved.
Learnings
It's good to take a milestone approach
In the middle of the process, we encountered realized that we had taken on more than we could handle. Even from the developers' perspective, it was too many features and changes to implement simultaneously. To make the project more manageable, we decided to break it down into several phases, which made it easier for everyone involved.
Learnings
It's good to take a milestone approach
In the middle of the process, we encountered realized that we had taken on more than we could handle. Even from the developers' perspective, it was too many features and changes to implement simultaneously. To make the project more manageable, we decided to break it down into several phases, which made it easier for everyone involved.