Beauty Pie
I created a new checkout with multiple flows ready for user testing that made it easier for users to complete the process more efficiently.
18/20
Rated 5 (very easy)
2/20
Rated 4 (Easy)
Company
Beauty Pie
Role
UX/UI
YEAR
2022
Contract
3m Extended to 6m
Beauty Pie
I created a new checkout with multiple flows ready for user testing that made it easier for users to complete the process more efficiently.
18/20
Rated 5 (very easy)
2/20
Rated 4 (Easy)
Company
Beauty Pie
Role
UX/UI
YEAR
2022
Contract
3m Extended to 6m
Context
Beauty Pie is an online-only subscription makeup and skincare company.
By cutting out the middleman and buying top quality products directly from laboratories and warehouses beauty pie can pass on the savings to members without the markups bigger brands usually add on to the final price of their product.
Context
Beauty Pie is an online-only subscription makeup and skincare company.
By cutting out the middleman and buying top quality products directly from laboratories and warehouses beauty pie can pass on the savings to members without the markups bigger brands usually add on to the final price of their product.
Context
Beauty Pie is an online-only subscription makeup and skincare company.
By cutting out the middleman and buying top quality products directly from laboratories and warehouses beauty pie can pass on the savings to members without the markups bigger brands usually add on to the final price of their product.
The Challenge
Before migrating to a new platform we wanted to ensure the experience was fully optimised.
Before migrating the checkout system from its old platform, the goal was to optimise the user experience and address known issues with new checkout flows to usability test. Results from the usability tests would make for a round of iterations for the US/UK markets and members/non-members on desktop and mobile.
Our main goals:
• Design a linear 1 page responsive checkout.
• Combine delivery address and password creation to create a new account for non-members.
• Remove friction which would slow down the user in checking out.
• Prototype multiple flows for usability testing.
• Iterate on designs after gathering feedback and results from usability results.
The Challenge
Before migrating to a new platform we wanted to ensure the experience was fully optimised.
Before migrating the checkout system from its old platform, the goal was to optimise the user experience and address known issues with new checkout flows to usability test. Results from the usability tests would make for a round of iterations for the US/UK markets and members/non-members on desktop and mobile.
Our main goals:
• Design a linear 1 page responsive checkout.
• Combine delivery address and password creation to create a new account for non-members.
• Remove friction which would slow down the user in checking out.
• Prototype multiple flows for usability testing.
• Iterate on designs after gathering feedback and results from usability results.
The Challenge
Before migrating to a new platform we wanted to ensure the experience was fully optimised.
Before migrating the checkout system from its old platform, the goal was to optimise the user experience and address known issues with new checkout flows to usability test. Results from the usability tests would make for a round of iterations for the US/UK markets and members/non-members on desktop and mobile.
Our main goals:
• Design a linear 1 page responsive checkout.
• Combine delivery address and password creation to create a new account for non-members.
• Remove friction which would slow down the user in checking out.
• Prototype multiple flows for usability testing.
• Iterate on designs after gathering feedback and results from usability results.
My Role
Design new checkout flows whilst collaborating with the UX designer and head of product design.
My Tasks:
• Audit the current state of the Checkout flow.
• Design flows and rapid prototypes to prepare for usability testing.
• Collaborate with the UX designer in findings to make iterations for final designs.
• Implement new UI where needed.
Services
UX/UI
Prototyping
Design Systems
Team
UX/UI Designer
UX Designer
Head Product Designer
My Role
Design new checkout flows whilst collaborating with the UX designer and head of product design.
My Tasks:
• Audit the current state of the Checkout flow.
• Design flows and rapid prototypes to prepare for usability testing.
• Collaborate with the UX designer in findings to make iterations for final designs.
• Implement new UI where needed.
Services
UX/UI
Prototyping
Design Systems
Team
UX/UI Designer
UX Designer
Head Product Designer
My Role
Design new checkout flows whilst collaborating with the UX designer and head of product design.
My Tasks:
• Audit the current state of the Checkout flow.
• Design flows and rapid prototypes to prepare for usability testing.
• Collaborate with the UX designer in findings to make iterations for final designs.
• Implement new UI where needed.
Services
UX/UI
Prototyping
Design Systems
Team
UX/UI Designer
UX Designer
Head Product Designer
Audit creation
Audit highlighted checkout flaws which were harming conversion rates.
We conducted a high-level audit of the checkout process, incorporating both new insights and previously identified issues.
Not only did this identify high priority design tasks for usability testing but it also helped reveal some constraints and out of scope work. Payment options was an area revealed where we had to keep the same interaction & payment options.
Audit creation
Audit highlighted checkout flaws which were harming conversion rates.
We conducted a high-level audit of the checkout process, incorporating both new insights and previously identified issues.
Not only did this identify high priority design tasks for usability testing but it also helped reveal some constraints and out of scope work. Payment options was an area revealed where we had to keep the same interaction & payment options.
Audit creation
Audit highlighted checkout flaws which were harming conversion rates.
We conducted a high-level audit of the checkout process, incorporating both new insights and previously identified issues.
Not only did this identify high priority design tasks for usability testing but it also helped reveal some constraints and out of scope work. Payment options was an area revealed where we had to keep the same interaction & payment options.
1
Lengthy 3-Step Checkout: The checkout was broken into 3 steps which is better suited for complex forms with many fields.
2
Confusing Two-Column Layout: This disrupted the vertical flow, making it harder for customers to process information efficiently.
3
Inconsistent Address Creation: This feature had inconsistent UI patterns such as radio buttons aligned right of the label and appearing twice on the same page which would confuse users.
4
Limited order summary visibilty: Users could only see what they had ordered on step 2 or by leaving the checkout and going to the basket.
5
Only 2 payment options available: The options for payments include PayPal and credit card where today Apple and google pay are also widely used and fast options for customers to checkout with.
1
Lengthy 3-Step Checkout: The checkout was broken into 3 steps which is better suited for complex forms with many fields.
2
Confusing Two-Column Layout: This disrupted the vertical flow, making it harder for customers to process information efficiently.
3
Inconsistent Address Creation: This feature had inconsistent UI patterns such as radio buttons aligned right of the label and appearing twice on the same page which would confuse users.
4
Limited order summary visibilty: Users could only see what they had ordered on step 2 or by leaving the checkout and going to the basket.
5
Only 2 payment options available: The options for payments include PayPal and credit card where today Apple and google pay are also widely used and fast options for customers to checkout with.
1
Lengthy 3-Step Checkout: The checkout was broken into 3 steps which is better suited for complex forms with many fields.
2
Confusing Two-Column Layout: This disrupted the vertical flow, making it harder for customers to process information efficiently.
3
Inconsistent Address Creation: This feature had inconsistent UI patterns such as radio buttons aligned right of the label and appearing twice on the same page which would confuse users.
4
Limited order summary visibilty: Users could only see what they had ordered on step 2 or by leaving the checkout and going to the basket.
5
Only 2 payment options available: The options for payments include PayPal and credit card where today Apple and google pay are also widely used and fast options for customers to checkout with.
Audit highlights for the previous checkout design
Audit highlights for the previous checkout design
Audit highlights for the previous checkout design
4
4
4
4
1
1
1
1
2
2
2
2
3
3
3
2
2
2
2
2
2
2
2
2
2
2
2
3
3
3
3
5
5
5
5
Planning
Creating variants helped with designing and iterating rapidly for future multiple flows.
Since there was no existing design system to work with, I worked on creating components and variants to ensure consistency and efficiency across all designs which would later on help with rapidly creating all the other needed flows.
Planning
Creating variants helped with designing and iterating rapidly for future multiple flows.
Since there was no existing design system to work with, I worked on creating components and variants to ensure consistency and efficiency across all designs which would later on help with rapidly creating all the other needed flows.
Example showing variants for the mobile order summary.
Taking advantage of variants for the order summary component.
The order summary is an example of a component where I took advantage of using variants where I could easily interchange depending on the flow.
• US/UK: Variant changes allowed me to show differences in currency, tax and delivery options between the two countries.
• Open/Closed State: This allowed me to easily create interactions for the prototype.
• Member & Non-Member customers: As a non-member you would have an annual membership shown in your order summary along with the cost where being a member you would already have paid for a membership so would be excluded.
Taking advantage of variants for the order summary component.
The order summary is an example of a component where I took advantage of using variants where I could easily interchange depending on the flow.
• US/UK: Variant changes allowed me to show differences in currency, tax and delivery options between the two countries.
• Open/Closed State: This allowed me to easily create interactions for the prototype.
• Member & Non-Member customers: As a non-member you would have an annual membership shown in your order summary along with the cost where being a member you would already have paid for a membership so would be excluded.
Setting a foundation and Planning was a key part to be able to create the 8 prototyped flows.
Two flows were created for members and non-members in the UK market which were also needed for the US market. Along with the desktop versions I also designed the mobile versions which would total to 8 flows.
Once I had designed one flow along with the components and variants, I could easily replicate it for the other flows and change the variants.
Not only did this allow me to create the rest of the flows rapidly but also helped with maintenance and iterations.
Setting a foundation and Planning was a key part to be able to create the 8 prototyped flows.
Two flows were created for members and non-members in the UK market which were also needed for the US market. Along with the desktop versions I also designed the mobile versions which would total to 8 flows.
Once I had designed one flow along with the components and variants, I could easily replicate it for the other flows and change the variants.
Not only did this allow me to create the rest of the flows rapidly but also helped with maintenance and iterations.
Example of creating another prototype flow by swapping the variants for a members flow.
Solution
Creating a streamlined one-page layout for a efficient user experience.
Solution
Creating a streamlined one-page layout for a efficient user experience.
Solution
Creating a streamlined one-page layout for a efficient user experience.
4
4
4
4
1
1
1
2
2
2
2
3
3
3
3
1
One Page Checkout: By creating a new linear design users can now complete tasks and review all their details easily before purchasing without leaving the checkout experience.
2
One-Column Layout: This helps users scan from top to bottom more easily, allowing them to complete fields faster and more efficiently.
3
Consistent order summary: This reassures customers by keeping their order details in view without the user having to leave and disrupt the checkout flow and is a familiar and intuitive design pattern.
4
Change Delivery Address: A clear call to action button with the ability to choose other saved addresses.
1
One Page Checkout: By creating a new linear design users can now complete tasks and review all their details easily before purchasing without leaving the checkout experience.
2
One-Column Layout: This helps users scan from top to bottom more easily, allowing them to complete fields faster and more efficiently.
3
Consistent order summary: This reassures customers by keeping their order details in view without the user having to leave and disrupt the checkout flow and is a familiar and intuitive design pattern.
4
Change Delivery Address: A clear call to action button with the ability to choose other saved addresses.
1
One Page Checkout: By creating a new linear design users can now complete tasks and review all their details easily before purchasing without leaving the checkout experience.
2
One-Column Layout: This helps users scan from top to bottom more easily, allowing them to complete fields faster and more efficiently.
3
Consistent order summary: This reassures customers by keeping their order details in view without the user having to leave and disrupt the checkout flow and is a familiar and intuitive design pattern.
4
Change Delivery Address: A clear call to action button with the ability to choose other saved addresses.
1. Non-Member usability test
For non-members we tested for our assumptions on the use of visual steps, account creation and newly added features.
1. Non-Member usability test
For non-members we tested for our assumptions on the use of visual steps, account creation and newly added features.
1. Non-Member usability test
For non-members we tested for our assumptions on the use of visual steps, account creation and newly added features.
The new design enables users to scan their details easily.
The new design enables users to scan their details easily.
With visual steps, users had to jump back and forth to see their details.
Removing steps in the checkout allowed users to view all their information at a glance.
By providing a summary of a completed section users are able to quickly review all previously entered data and supports users' needs to "Double Check" before making a purchase.
The value is that it removes the friction of having to open a section to see if the details are correct and/or having to pogo back and forth through different steps. Instead users can now review quickly on 1 page.
Removing steps in the checkout allowed users to view all their information at a glance.
By providing a summary of a completed section users are able to quickly review all previously entered data and supports users' needs to "Double Check" before making a purchase.
The value is that it removes the friction of having to open a section to see if the details are correct and/or having to pogo back and forth through different steps. Instead users can now review quickly on 1 page.
Removing steps in the checkout allowed users to view all their information at a glance.
By providing a summary of a completed section users are able to quickly review all previously entered data and supports users' needs to "Double Check" before making a purchase.
The value is that it removes the friction of having to open a section to see if the details are correct and/or having to pogo back and forth through different steps. Instead users can now review quickly on 1 page.
Combining delivery and password creation for an easy account creation.
As a non-member checking out with a membership, users need to create an account.
By combining delivery details and password creation together we would alleviate the need to enter details in twice and have a more seamless checkout experience compared to having a separate sign up page with the need for the user to add their address and then move onto the checkout process where they would need to add their delivery details in again.
Combining delivery and password creation for an easy account creation.
As a non-member checking out with a membership, users need to create an account.
By combining delivery details and password creation together we would alleviate the need to enter details in twice and have a more seamless checkout experience compared to having a separate sign up page with the need for the user to add their address and then move onto the checkout process where they would need to add their delivery details in again.
Combining delivery and password creation for an easy account creation.
As a non-member checking out with a membership, users need to create an account.
By combining delivery details and password creation together we would alleviate the need to enter details in twice and have a more seamless checkout experience compared to having a separate sign up page with the need for the user to add their address and then move onto the checkout process where they would need to add their delivery details in again.
Users can now view their order summary at any stage of the checkout.
The total price and number of items are now instantly viewable, making it more convenient for the user, as there is no need to open the summary unless they want to see specific information.
The order summary is also consistently present at the top of the page, making it readily accessible at any point in the user journey.
Users can now view their order summary at any stage of the checkout.
The total price and number of items are now instantly viewable, making it more convenient for the user, as there is no need to open the summary unless they want to see specific information.
The order summary is also consistently present at the top of the page, making it readily accessible at any point in the user journey.
Users can now view their order summary at any stage of the checkout.
The total price and number of items are now instantly viewable, making it more convenient for the user, as there is no need to open the summary unless they want to see specific information.
The order summary is also consistently present at the top of the page, making it readily accessible at any point in the user journey.
Dynamic Postcode lookup and autofill for efficiently filling out multiple address fields.
Having a postcode lookup and autofill feature has become an expected functionality among users. During testing, users responded positively to this feature, expressing that they dislike having to enter their details manually.
The value of adding this feature to the flow is that it would minimise the time and effort spent filling out multiple address fields, while also reducing errors that users might make when entering their postcode or full address.
Postcode lookup for quickly adding the users address.
Having a postcode lookup and autofill feature has become an expected functionality among users. During testing, users responded positively to this feature, expressing that they dislike having to enter their details manually.
The value of adding this feature to the flow is that it would minimise the time and effort spent filling out multiple address fields, while also reducing errors that users might make when entering their postcode or full address.
Dynamic Postcode lookup and autofill for efficiently filling out multiple address fields.
Having a postcode lookup and autofill feature has become an expected functionality among users. During testing, users responded positively to this feature, expressing that they dislike having to enter their details manually.
The value of adding this feature to the flow is that it would minimise the time and effort spent filling out multiple address fields, while also reducing errors that users might make when entering their postcode or full address.
Dynamic Postcode lookup and autofill for efficiently filling out multiple address fields.
Having a postcode lookup and autofill feature has become an expected functionality among users. During testing, users responded positively to this feature, expressing that they dislike having to enter their details manually.
The value of adding this feature to the flow is that it would minimise the time and effort spent filling out multiple address fields, while also reducing errors that users might make when entering their postcode or full address.
Numeric keyboard is triggered instead of alphabetic.
When users are inputting only numbers, such as in a phone number field, the numeric keyboard should be displayed.
This allows users to enter their number immediately, reducing friction compared to showing an alphabetic keyboard, where they would have to switch to the numeric keyboard.
Numeric keyboard is triggered instead of alphabetic.
When users are inputting only numbers, such as in a phone number field, the numeric keyboard should be displayed.
This allows users to enter their number immediately, reducing friction compared to showing an alphabetic keyboard, where they would have to switch to the numeric keyboard.
Numeric keyboard is triggered instead of alphabetic.
When users are inputting only numbers, such as in a phone number field, the numeric keyboard should be displayed.
This allows users to enter their number immediately, reducing friction compared to showing an alphabetic keyboard, where they would have to switch to the numeric keyboard.
2. Member usability test
The member flow usability test revealed that users found it challenging to proceed to checkout.
We tested the interaction for adding an address, changing billing address and continue checkout for this flow and noticed that after successfully changing their billing address users struggled to continue to checkout.
Participants would pause and scroll up and down the screen looking for a CTA to checkout before eventually realising that they would need to choose a payment option first and enter their details in, and then continue with payment to checkout.
2. Member usability test
The member flow usability test revealed that users found it challenging to proceed to checkout.
We tested the interaction for adding an address, changing billing address and continue checkout for this flow and noticed that after successfully changing their billing address users struggled to continue to checkout.
Participants would pause and scroll up and down the screen looking for a CTA to checkout before eventually realising that they would need to choose a payment option first and enter their details in, and then continue with payment to checkout.
2. Member usability test
The member flow usability test revealed that users found it challenging to proceed to checkout.
We tested the interaction for adding an address, changing billing address and continue checkout for this flow and noticed that after successfully changing their billing address users struggled to continue to checkout.
Participants would pause and scroll up and down the screen looking for a CTA to checkout before eventually realising that they would need to choose a payment option first and enter their details in, and then continue with payment to checkout.
First design with the option to change billing address in the payment method component.
First design with the option to change billing address in the payment method component.
First design with the option to change billing address in the payment method component.
First design with the option to change billing address in the payment method component.
1
1
1
1
3 possible reasons for why users found it difficult to checkout.
1
Billing details residing within payment method - Having both the billing details and payment options in one component felt like one step therefore participants looked for the next step.
No saved card details - One participant mentioned that being a member they would have expected their card details to be saved and would just look for a CTA to check out.
The instructional step after adding billing details in the UX test was described to "complete checkout" - This may have been cemented into the user's mind to look for a "complete checkout" button as two users were looking for a button that would say complete or proceed to checkout.
Having an instructional step saying "Add your payment details and proceed to checkout" might have had a different outcome.
3 possible reasons for why users found it difficult to checkout.
1
Billing details residing within payment method - Having both the billing details and payment options in one component felt like one step therefore participants looked for the next step.
No saved card details - One participant mentioned that being a member they would have expected their card details to be saved and would just look for a CTA to check out.
The instructional step after adding billing details in the UX test was described to "complete checkout" - This may have been cemented into the user's mind to look for a "complete checkout" button as two users were looking for a button that would say complete or proceed to checkout.
Having an instructional step saying "Add your payment details and proceed to checkout" might have had a different outcome.
3 possible reasons for why users found it difficult to checkout.
1
Billing details residing within payment method - Having both the billing details and payment options in one component felt like one step therefore participants looked for the next step.
No saved card details - One participant mentioned that being a member they would have expected their card details to be saved and would just look for a CTA to check out.
The instructional step after adding billing details in the UX test was described to "complete checkout" - This may have been cemented into the user's mind to look for a "complete checkout" button as two users were looking for a button that would say complete or proceed to checkout.
Having an instructional step saying "Add your payment details and proceed to checkout" might have had a different outcome.
Amends made after usabilty test now showing billing details in its own section immediately after delevery details.
Amends made after usabilty test now showing billing details in its own section immediately after delevery details.
Amends made after usabilty test now showing billing details in its own section immediately after delevery details.
Amends made after usabilty test now showing billing details in its own section immediately after delevery details.
1
1
1
1
2
2
2
2
3
3
3
3
An iteration was made by moving "Billing Details" to its own section which made it more clearer.
A new section was created for Billing details with a clear CTA to change address which follows straight after delivery details. This ensured that the last step is the payment option and that anything inside it would be associated to payment making it less prone to confusion.
1
New billing details section: This now looks like its own step in the flow and comes straight after delivery details.
2
A clearer CTA: This made the CTA a lot clearer than before which was a checkbox.
3
Payment method section just for payment options: Now that billing details has been taken out there would be less confusion on by passing the entering of payment details.
An iteration was made by moving "Billing Details" to its own section which made it more clearer.
A new section was created for Billing details with a clear CTA to change address which follows straight after delivery details. This ensured that the last step is the payment option and that anything inside it would be associated to payment making it less prone to confusion.
1
New billing details section: This now looks like its own step in the flow and comes straight after delivery details.
2
A clearer CTA: This made the CTA a lot clearer than before which was a checkbox.
3
Payment method section just for payment options: Now that billing details has been taken out there would be less confusion on by passing the entering of payment details.
An iteration was made by moving "Billing Details" to its own section which made it more clearer.
A new section was created for Billing details with a clear CTA to change address which follows straight after delivery details. This ensured that the last step is the payment option and that anything inside it would be associated to payment making it less prone to confusion.
1
New billing details section: This now looks like its own step in the flow and comes straight after delivery details.
2
A clearer CTA: This made the CTA a lot clearer than before which was a checkbox.
3
Payment method section just for payment options: Now that billing details has been taken out there would be less confusion on by passing the entering of payment details.
Results
Non-Member's results
Non-members feedback were very positive.
1 participant mentioned other checkout experiences which display the stages and said she wasn't lost in this process with there not being visual numbered stages of the process.
The lack of feedback about about combining the delivery and password, combined with the ease of completion would suggest that our hypothesis is correct. Being so easy it didn’t stand out.
18/20
Rated 5 (very easy)
2/20
Rated 4 (Easy)
Non-Member's results
Non-members feedback were very positive.
1 participant mentioned other checkout experiences which display the stages and said she wasn't lost in this process with there not being visual numbered stages of the process.
The lack of feedback about about combining the delivery and password, combined with the ease of completion would suggest that our hypothesis is correct. Being so easy it didn’t stand out.
18/20
Rated 5 (very easy)
2/20
Rated 4 (Easy)
Non-Member's results
Non-members feedback were very positive.
1 participant mentioned other checkout experiences which display the stages and said she wasn't lost in this process with there not being visual numbered stages of the process.
The lack of feedback about about combining the delivery and password, combined with the ease of completion would suggest that our hypothesis is correct. Being so easy it didn’t stand out.
18/20
Rated 5 (very easy)
2/20
Rated 4 (Easy)
Member's Results
Members feedback for "Easy" & "Neutral" revealed an Iteration was needed for Billing & Payment.
The feedback from users were that they were confused with changing their billing address and then proceeding to checkout.
A new solution for the design was created to alleviate this issue where now the billing and payment methods were given their own step/section.
12/20
Rated 5 (Very Easy)
6/20
Rated 4 (Easy)
2/20
Rated 3 (Neutral)
Member's Results
Members feedback for "Easy" & "Neutral" revealed an Iteration was needed for Billing & Payment.
The feedback from users were that they were confused with changing their billing address and then proceeding to checkout.
A new solution for the design was created to alleviate this issue where now the billing and payment methods were given their own step/section.
12/20
Rated 5 (Very Easy)
6/20
Rated 4 (Easy)
2/20
Rated 3 (Neutral)
Member's Results
Members feedback for "Easy" & "Neutral" revealed an Iteration was needed for Billing & Payment.
The feedback from users were that they were confused with changing their billing address and then proceeding to checkout.
A new solution for the design was created to alleviate this issue where now the billing and payment methods were given their own step/section.
12/20
Rated 5 (Very Easy)
6/20
Rated 4 (Easy)
2/20
Rated 3 (Neutral)
20 participants for each test were asked to rate the ease of checking out from 1 to 5.
1 being very difficult to 5 being very easy.
