Minicart Redesign
Minicart Redesign
Minicart Redesign
Minicart Redesign
The goal of the Minicart Redesign Project was to enhance the user experience and functionality of the minicart, making it easier for users to view and manage their shopping cart items. The project aimed to improve usability and functionality, leading to an overall better user experience and increased sales for the e-commerce website.
The goal of the Minicart Redesign Project was to enhance the user experience and functionality of the minicart, making it easier for users to view and manage their shopping cart items. The project aimed to improve usability and functionality, leading to an overall better user experience and increased sales for the e-commerce website.
The goal of the Minicart Redesign Project was to enhance the user experience and functionality of the minicart, making it easier for users to view and manage their shopping cart items. The project aimed to improve usability and functionality, leading to an overall better user experience and increased sales for the e-commerce website.
The goal of the Minicart Redesign Project was to enhance the user experience and functionality of the minicart, making it easier for users to view and manage their shopping cart items. The project aimed to improve usability and functionality, leading to an overall better user experience and increased sales for the e-commerce website.
My Role
I was the lead designer in the Biossance Minicart Redesign project, overseeing the project and ensuring that it aligned with their overall design strategy. I worked collaboratively with other designers to apply the learnings and research we had gathered from other Amyris brands to ensure that the redesign was effective in enhancing the user experience and increasing sales.
I was the lead designer in the Biossance Minicart Redesign project, overseeing the project and ensuring that it aligned with their overall design strategy. I worked collaboratively with other designers to apply the learnings and research we had gathered from other Amyris brands to ensure that the redesign was effective in enhancing the user experience and increasing sales.
I was the lead designer in the Biossance Minicart Redesign project, overseeing the project and ensuring that it aligned with their overall design strategy. I worked collaboratively with other designers to apply the learnings and research we had gathered from other Amyris brands to ensure that the redesign was effective in enhancing the user experience and increasing sales.
I was the lead designer in the Biossance Minicart Redesign project, overseeing the project and ensuring that it aligned with their overall design strategy. I worked collaboratively with other designers to apply the learnings and research we had gathered from other Amyris brands to ensure that the redesign was effective in enhancing the user experience and increasing sales.
CLIENT
Biossance
ROLES
Product Designer, UI Designer
ROLES
Product Designer
UI Designer
DURATION
Oct–Nov 2022
TOOLS
Figma
Research & Learnings
Research & Learnings
Research & Learnings
Research & Learnings
The minicart is an important part of the checkout process, serving as a critical touchpoint for users during their journey.
Research by Baymard Institute shows the average cart abandonment rate differs by device, with mobile and tablet devices having the highest percentage of shoppers hitting the exit button on a checkout page but checkout optimization can increase conversions by 35.62% with focus on user experience.
The minicart is an important part of the checkout process, serving as a critical touchpoint for users during their journey.
Research by Baymard Institute shows the average cart abandonment rate differs by device, with mobile and tablet devices having the highest percentage of shoppers hitting the exit button on a checkout page but checkout optimization can increase conversions by 35.62% with focus on user experience.
The minicart is an important part of the checkout process, serving as a critical touchpoint for users during their journey.
Research by Baymard Institute shows the average cart abandonment rate differs by device, with mobile and tablet devices having the highest percentage of shoppers hitting the exit button on a checkout page but checkout optimization can increase conversions by 35.62% with focus on user experience.
The minicart is an important part of the checkout process, serving as a critical touchpoint for users during their journey.
Research by Baymard Institute shows the average cart abandonment rate differs by device, with mobile and tablet devices having the highest percentage of shoppers hitting the exit button on a checkout page but checkout optimization can increase conversions by 35.62% with focus on user experience.
To begin, I conducted a thorough analysis of user interactions and pain points through usability testing, best practices, and data analytics. I connected with the UX Researcher and other Product Designers on our team, and we discussed the findings thoroughly. Then, I aligned with the Product Manager and Product Owner to define priorities for both the brand and its customers. The initial research provided valuable insights into user behavior and informed our redesign strategy.
To begin, I conducted a thorough analysis of user interactions and pain points through usability testing, best practices, and data analytics. I connected with the UX Researcher and other Product Designers on our team, and we discussed the findings thoroughly. Then, I aligned with the Product Manager and Product Owner to define priorities for both the brand and its customers. The initial research provided valuable insights into user behavior and informed our redesign strategy.
To begin, I conducted a thorough analysis of user interactions and pain points through usability testing, best practices, and data analytics. I connected with the UX Researcher and other Product Designers on our team, and we discussed the findings thoroughly. Then, I aligned with the Product Manager and Product Owner to define priorities for both the brand and its customers. The initial research provided valuable insights into user behavior and informed our redesign strategy.
To begin, I conducted a thorough analysis of user interactions and pain points through usability testing, best practices, and data analytics. I connected with the UX Researcher and other Product Designers on our team, and we discussed the findings thoroughly. Then, I aligned with the Product Manager and Product Owner to define priorities for both the brand and its customers. The initial research provided valuable insights into user behavior and informed our redesign strategy.
Optimizing the Purchasing Experience
Optimizing the Purchasing Experience
Optimizing the Purchasing Experience
Optimizing the Purchasing Experience
We knew we wanted to update the Minicart design for a seamless flow into the checkout while keeping some things in mind to improve the UX for Biossance.com customers:
We knew we wanted to update the Minicart design for a seamless flow into the checkout while keeping some things in mind to improve the UX for Biossance.com customers:
We knew we wanted to update the Minicart design for a seamless flow into the checkout while keeping some things in mind to improve the UX for Biossance.com customers:
We knew we wanted to update the Minicart design for a seamless flow into the checkout while keeping some things in mind to improve the UX for Biossance.com customers:
GENERAL IMPROVEMENTS
GENERAL IMPROVEMENTS
GENERAL IMPROVEMENTS
GENERAL IMPROVEMENTS
Build a design with mobile-first thinking (85% of Biossance.com users are mobile users)
Build a design with mobile-first thinking (85% of Biossance.com users are mobile users)
Build a design with mobile-first thinking (85% of Biossance.com users are mobile users)
Build a design with mobile-first thinking (85% of Biossance.com users are mobile users)
Increase transparency and make it easier to shop
Increase transparency and make it easier to shop
Increase transparency and make it easier to shop
Increase transparency and make it easier to shop
Improve UI design and make it more pleasant to use
Improve UI design and make it more pleasant to use
Improve UI design and make it more pleasant to use
Improve UI design and make it more pleasant to use
Auto-add samples to the cart to avoid frustration and human errors
Auto-add samples to the cart to avoid frustration and human errors
Auto-add samples to the cart to avoid frustration and human errors
Auto-add samples to the cart to avoid frustration and human errors
CTA IMPROVEMENTS
CTA IMPROVEMENTS
CTA IMPROVEMENTS
CTA IMPROVEMENTS
Offer Continue Shopping and Close options in intuitive locations
Offer Continue Shopping and Close options in intuitive locations
Offer Continue Shopping and Close options in intuitive locations
Offer Continue Shopping and Close options in intuitive locations
Keep the checkout button sticky so it's easy to find, but improve UX copy and UI design
Keep the checkout button sticky so it's easy to find, but improve UX copy and UI design
Keep the checkout button sticky so it's easy to find, but improve UX copy and UI design
Keep the checkout button sticky so it's easy to find, but improve UX copy and UI design
Improve upsell module with more information and more prominent “Add to Bag” buttons
Improve upsell module with more information and more prominent “Add to Bag” buttons
Improve upsell module with more information and more prominent “Add to Bag” buttons
Improve upsell module with more information and more prominent “Add to Bag” buttons
Have a button on the empty cart state to incentivize shopping
Have a button on the empty cart state to incentivize shopping
Have a button on the empty cart state to incentivize shopping
Have a button on the empty cart state to incentivize shopping
PRICE-RELATED IMPROVEMENTS
PRICE-RELATED IMPROVEMENTS
PRICE-RELATED IMPROVEMENTS
PRICE-RELATED IMPROVEMENTS
Make it clear shipping is free for all orders
Make it clear shipping is free for all orders
Make it clear shipping is free for all orders
Make it clear shipping is free for all orders
Add a promotion code input field
Add a promotion code input field
Add a promotion code input field
Add a promotion code input field
Show AfterPay installments to incentivize large order conversion
Show AfterPay installments to incentivize large order conversion
Show AfterPay installments to incentivize large order conversion
Show AfterPay installments to incentivize large order conversion
Show discounted prices and subtotal
Show discounted prices and subtotal
Show discounted prices and subtotal
Show discounted prices and subtotal
Make it clear to the customer the amount of savings they're getting in their order
Make it clear to the customer the amount of savings they're getting in their order
Make it clear to the customer the amount of savings they're getting in their order
Make it clear to the customer the amount of savings they're getting in their order
ADA IMPROVEMENTS
ADA IMPROVEMENTS
ADA IMPROVEMENTS
ADA IMPROVEMENTS
Make sure the experience is accessible
Make sure the experience is accessible
Make sure the experience is accessible
Make sure the experience is accessible
Sketches & Wireframes
Sketches & Wireframes
Sketches & Wireframes
Sketches & Wireframes
I then sketched and wireframed new screens that aligned with our project goals, improvement objectives, and research findings. By employing a user-centered approach, I translated our research insights into actionable design concepts, ensuring that the wireframes not only addressed user pain points but also adhered to our project's overarching objectives. Through these screens, I was able to visualize and communicate design ideas effectively with the team and stakeholders, fostering alignment and setting a solid foundation for the subsequent design phases.
I then sketched and wireframed new screens that aligned with our project goals, improvement objectives, and research findings. By employing a user-centered approach, I translated our research insights into actionable design concepts, ensuring that the wireframes not only addressed user pain points but also adhered to our project's overarching objectives. Through these screens, I was able to visualize and communicate design ideas effectively with the team and stakeholders, fostering alignment and setting a solid foundation for the subsequent design phases.
I then sketched and wireframed new screens that aligned with our project goals, improvement objectives, and research findings. By employing a user-centered approach, I translated our research insights into actionable design concepts, ensuring that the wireframes not only addressed user pain points but also adhered to our project's overarching objectives. Through these screens, I was able to visualize and communicate design ideas effectively with the team and stakeholders, fostering alignment and setting a solid foundation for the subsequent design phases.
I then sketched and wireframed new screens that aligned with our project goals, improvement objectives, and research findings. By employing a user-centered approach, I translated our research insights into actionable design concepts, ensuring that the wireframes not only addressed user pain points but also adhered to our project's overarching objectives. Through these screens, I was able to visualize and communicate design ideas effectively with the team and stakeholders, fostering alignment and setting a solid foundation for the subsequent design phases.
Roadblocks
Roadblocks
Roadblocks
Roadblocks
With limited development resources and the need to prioritize which features to build, the team decided that showing the estimated delivery date upfront wasn't a priority for the first iteration.
Another roadblock was the implementation of the express payment buttons, like PayPal and Apple Pay. Due to platform limitations, it wasn't possible to implement the express payment buttons in both the minicart and checkout area. Because it's important to keep all payment options in the same area, it was then decided to keep the express payment buttons within the checkout area for consistency and clarity.
Consequently, we had to pivot, and I adjusted the designs to a feasible version.
With limited development resources and the need to prioritize which features to build, the team decided that showing the estimated delivery date upfront wasn't a priority for the first iteration.
Another roadblock was the implementation of the express payment buttons, like PayPal and Apple Pay. Due to platform limitations, it wasn't possible to implement the express payment buttons in both the minicart and checkout area. Because it's important to keep all payment options in the same area, it was then decided to keep the express payment buttons within the checkout area for consistency and clarity.
Consequently, we had to pivot, and I adjusted the designs to a feasible version.
With limited development resources and the need to prioritize which features to build, the team decided that showing the estimated delivery date upfront wasn't a priority for the first iteration.
Another roadblock was the implementation of the express payment buttons, like PayPal and Apple Pay. Due to platform limitations, it wasn't possible to implement the express payment buttons in both the minicart and checkout area. Because it's important to keep all payment options in the same area, it was then decided to keep the express payment buttons within the checkout area for consistency and clarity.
Consequently, we had to pivot, and I adjusted the designs to a feasible version.
With limited development resources and the need to prioritize which features to build, the team decided that showing the estimated delivery date upfront wasn't a priority for the first iteration.
Another roadblock was the implementation of the express payment buttons, like PayPal and Apple Pay. Due to platform limitations, it wasn't possible to implement the express payment buttons in both the minicart and checkout area. Because it's important to keep all payment options in the same area, it was then decided to keep the express payment buttons within the checkout area for consistency and clarity.
Consequently, we had to pivot, and I adjusted the designs to a feasible version.
Final Designs
Final Designs
Final Designs
Final Designs
Our primary objectives were to enhance transparency and usability while elevating the overall UI design for a more pleasant user experience. After aligning on new features and structure, I worked on the final design using the brand's design system and styleguide.
Our primary objectives were to enhance transparency and usability while elevating the overall UI design for a more pleasant user experience. After aligning on new features and structure, I worked on the final design using the brand's design system and styleguide.
Our primary objectives were to enhance transparency and usability while elevating the overall UI design for a more pleasant user experience. After aligning on new features and structure, I worked on the final design using the brand's design system and styleguide.
Our primary objectives were to enhance transparency and usability while elevating the overall UI design for a more pleasant user experience. After aligning on new features and structure, I worked on the final design using the brand's design system and styleguide.
Takeaways
Takeaways
Takeaways
Takeaways
Our minicart redesign project has provided valuable insights for future endeavors. By prioritizing a mobile-first approach and aligning with project objectives, we have successfully improved the user experience. The increased conversion rate, reduction in cart abandonment rates, and streamlined checkout processes are indicators of positive progress. Moving forward, it's crucial to maintain a focus on accessibility compliance, continuous testing, and ongoing optimization to ensure our minicart redesign continues to offer a more efficient and pleasant shopping experience for our users.
Our minicart redesign project has provided valuable insights for future endeavors. By prioritizing a mobile-first approach and aligning with project objectives, we have successfully improved the user experience. The increased conversion rate, reduction in cart abandonment rates, and streamlined checkout processes are indicators of positive progress. Moving forward, it's crucial to maintain a focus on accessibility compliance, continuous testing, and ongoing optimization to ensure our minicart redesign continues to offer a more efficient and pleasant shopping experience for our users.
Our minicart redesign project has provided valuable insights for future endeavors. By prioritizing a mobile-first approach and aligning with project objectives, we have successfully improved the user experience. The increased conversion rate, reduction in cart abandonment rates, and streamlined checkout processes are indicators of positive progress. Moving forward, it's crucial to maintain a focus on accessibility compliance, continuous testing, and ongoing optimization to ensure our minicart redesign continues to offer a more efficient and pleasant shopping experience for our users.
Our minicart redesign project has provided valuable insights for future endeavors. By prioritizing a mobile-first approach and aligning with project objectives, we have successfully improved the user experience. The increased conversion rate, reduction in cart abandonment rates, and streamlined checkout processes are indicators of positive progress. Moving forward, it's crucial to maintain a focus on accessibility compliance, continuous testing, and ongoing optimization to ensure our minicart redesign continues to offer a more efficient and pleasant shopping experience for our users.
