Flaconi: Redesigning the Mobile Product Detail Pages

E-commerce

Redesign the mobile perfume PDPs to enhance the overall user experience of the page and decrease the bounce rate.

Role

Product designer

Client

Flaconi

Overview

Product Detail Pages (PDPs) play a crucial role for Flaconi, Germany's leading beauty and self-care e-commerce company. These pages not only facilitate users' purchasing decisions but also serve as the gateway to Flaconi's shop from external sources like Google Shopping. The project aimed to enhance the overall user experience in Product Detail Pages and encourage user engagement with the Flaconi webshop.

Problem

Over time, Flaconi's Product Detail Pages (PDPs) became overloaded with information due to an expanding assortment, stakeholder requirements, and lack of a clear vision for the page. As a consequence, the design was no longer able to guide the user to make a buying decision or a more relevant place in their journey which led to higher than expected bounce rate and loss in potential revenue.

Solution

A newly designed mobile Perfume PDP was developed to clearly present decision-driving information for users while maintaining scalability for other category PDPs, such as make-up and skincare.

Impact

The revamped design resulted in a 3% decrease in bounce rate and a 2% increase in add-to-cart rate, as evidenced by A/B testing.

Flaconi: Redesigning the Mobile Product Detail Pages

E-commerce

Redesign the mobile perfume PDPs to enhance the overall user experience of the page and decrease the bounce rate.

Role

Product designer

Client

Flaconi

Overview

Product Detail Pages (PDPs) play a crucial role for Flaconi, Germany's leading beauty and self-care e-commerce company. These pages not only facilitate users' purchasing decisions but also serve as the gateway to Flaconi's shop from external sources like Google Shopping. The project aimed to enhance the overall user experience in Product Detail Pages and encourage user engagement with the Flaconi webshop.

Problem

Over time, Flaconi's Product Detail Pages (PDPs) became overloaded with information due to an expanding assortment, stakeholder requirements, and lack of a clear vision for the page. As a consequence, the design was no longer able to guide the user to make a buying decision or a more relevant place in their journey which led to higher than expected bounce rate and loss in potential revenue.

Solution

A newly designed mobile Perfume PDP was developed to clearly present decision-driving information for users while maintaining scalability for other category PDPs, such as make-up and skincare.

Impact

The revamped design resulted in a 3% decrease in bounce rate and a 2% increase in add-to-cart rate, as evidenced by A/B testing.

Flaconi: Redesigning the Mobile Product Detail Pages

E-commerce

Redesign the mobile perfume PDPs to enhance the overall user experience of the page and decrease the bounce rate.

Role

Product designer

Client

Flaconi

Overview

Product Detail Pages (PDPs) play a crucial role for Flaconi, Germany's leading beauty and self-care e-commerce company. These pages not only facilitate users' purchasing decisions but also serve as the gateway to Flaconi's shop from external sources like Google Shopping. The project aimed to enhance the overall user experience in Product Detail Pages and encourage user engagement with the Flaconi webshop.

Problem

Over time, Flaconi's Product Detail Pages (PDPs) became overloaded with information due to an expanding assortment, stakeholder requirements, and lack of a clear vision for the page. As a consequence, the design was no longer able to guide the user to make a buying decision or a more relevant place in their journey which led to higher than expected bounce rate and loss in potential revenue.

Solution

A newly designed mobile Perfume PDP was developed to clearly present decision-driving information for users while maintaining scalability for other category PDPs, such as make-up and skincare.

Impact

The revamped design resulted in a 3% decrease in bounce rate and a 2% increase in add-to-cart rate, as evidenced by A/B testing.

  1. Discover and define

  1. Discover and define

  1. Discover and define

After uncovering that users increasingly access Flaconi through PDPs due to their Google Shopping behavior, me and our team’s Product Owner initiated the discovery process. We started by gathering all available information about PDPs, incorporating both qualitative and quantitative data. The existing information was enough to understand that users expected clarity, consistency and speed when interacting with these pages and that there is room for growth for flaconi PDPs. I conducted an audit to further identify opportunities for improvement and noting some areas that need validation.

After uncovering that users increasingly access Flaconi through PDPs due to their Google Shopping behavior, me and our team’s Product Owner initiated the discovery process. We started by gathering all available information about PDPs, incorporating both qualitative and quantitative data. The existing information was enough to understand that users expected clarity, consistency and speed when interacting with these pages and that there is room for growth for flaconi PDPs. I conducted an audit to further identify opportunities for improvement and noting some areas that need validation.

After uncovering that users increasingly access Flaconi through PDPs due to their Google Shopping behavior, me and our team’s Product Owner initiated the discovery process. We started by gathering all available information about PDPs, incorporating both qualitative and quantitative data. The existing information was enough to understand that users expected clarity, consistency and speed when interacting with these pages and that there is room for growth for flaconi PDPs. I conducted an audit to further identify opportunities for improvement and noting some areas that need validation.

User behaviors

User behaviors

User behaviors

Most Flaconi users (62%) purchase familiar products. They search product or brand names on Google and click Google Shopping links, leading to PDPs. Users compare products by opening multiple tabs and evaluating factors like price, availability, and shipping costs. They also compare the same product across different shops. This highlights the need for a seamless and informative user experience on Flaconi's PDPs to retain customers and boost sales.

Most Flaconi users (62%) purchase familiar products. They search product or brand names on Google and click Google Shopping links, leading to PDPs. Users compare products by opening multiple tabs and evaluating factors like price, availability, and shipping costs. They also compare the same product across different shops. This highlights the need for a seamless and informative user experience on Flaconi's PDPs to retain customers and boost sales.

Most Flaconi users (62%) purchase familiar products. They search product or brand names on Google and click Google Shopping links, leading to PDPs. Users compare products by opening multiple tabs and evaluating factors like price, availability, and shipping costs. They also compare the same product across different shops. This highlights the need for a seamless and informative user experience on Flaconi's PDPs to retain customers and boost sales.

User needs

User needs

User needs

Users browsing Flaconi's PDPs expect a quick and easy overview of products to make informed decisions. They require essential information like price, price per value, minimum free delivery amount, stock and discount details, and other relevant product aspects, such as reviews, ingredients, or unique properties like vegan or longevity. In addition to a comprehensive understanding of products, users seek a fast, smooth browsing experience on the website.

Users browsing Flaconi's PDPs expect a quick and easy overview of products to make informed decisions. They require essential information like price, price per value, minimum free delivery amount, stock and discount details, and other relevant product aspects, such as reviews, ingredients, or unique properties like vegan or longevity. In addition to a comprehensive understanding of products, users seek a fast, smooth browsing experience on the website.

Users browsing Flaconi's PDPs expect a quick and easy overview of products to make informed decisions. They require essential information like price, price per value, minimum free delivery amount, stock and discount details, and other relevant product aspects, such as reviews, ingredients, or unique properties like vegan or longevity. In addition to a comprehensive understanding of products, users seek a fast, smooth browsing experience on the website.

User pain points

User pain points

User pain points

The main challenges Flaconi users face while navigating PDPs include, excessive scrolling to view sizes and colors, overwhelming information, and slow-loading pages. Unclear out-of-stock indications and the lack of restocking notifications cause uncertainty, while inconsistent product information hampers effective comparisons. Additionally, an unappealing design negatively impacts the overall user experience, potentially deterring purchases or further exploration of the site.

The main challenges Flaconi users face while navigating PDPs include, excessive scrolling to view sizes and colors, overwhelming information, and slow-loading pages. Unclear out-of-stock indications and the lack of restocking notifications cause uncertainty, while inconsistent product information hampers effective comparisons. Additionally, an unappealing design negatively impacts the overall user experience, potentially deterring purchases or further exploration of the site.

The main challenges Flaconi users face while navigating PDPs include, excessive scrolling to view sizes and colors, overwhelming information, and slow-loading pages. Unclear out-of-stock indications and the lack of restocking notifications cause uncertainty, while inconsistent product information hampers effective comparisons. Additionally, an unappealing design negatively impacts the overall user experience, potentially deterring purchases or further exploration of the site.

After reviewing the existing user research, I mapped out the current state of PDPs and conducted an audit to further identify opportunities for improvement. The audit also helped me uncover gaps in our research, so I collaborated with our user researcher to publish a live survey on PDPs to learn which information users consider important. I referred back to this survey when making design decisions on the information architecture of the PDP.

After reviewing the existing user research, I mapped out the current state of PDPs and conducted an audit to further identify opportunities for improvement. The audit also helped me uncover gaps in our research, so I collaborated with our user researcher to publish a live survey on PDPs to learn which information users consider important. I referred back to this survey when making design decisions on the information architecture of the PDP.

After reviewing the existing user research, I mapped out the current state of PDPs and conducted an audit to further identify opportunities for improvement. The audit also helped me uncover gaps in our research, so I collaborated with our user researcher to publish a live survey on PDPs to learn which information users consider important. I referred back to this survey when making design decisions on the information architecture of the PDP.

Define

Define

Define

After compiling and analyzing user and data insights, we worked together with the Product Owner to establish the project goal, KPIs, and potential opportunities. As the core problem we were aiming to solve was to help users find the necessary information about the product and encourage further engagement within the shop, our main KPI became bounce rate while keeping a close eye on add-to-cart (ATC) rate.

We used ‘opportunity-solution tree' framework to effectively map opportunities and sub-opportunities, as well as to facilitate clear communication with stakeholders which included Engineering Manager, SEO Manager, Category Management, and Retail Media departments.

After compiling and analyzing user and data insights, we worked together with the Product Owner to establish the project goal, KPIs, and potential opportunities. As the core problem we were aiming to solve was to help users find the necessary information about the product and encourage further engagement within the shop, our main KPI became bounce rate while keeping a close eye on add-to-cart (ATC) rate.

We used ‘opportunity-solution tree' framework to effectively map opportunities and sub-opportunities, as well as to facilitate clear communication with stakeholders which included Engineering Manager, SEO Manager, Category Management, and Retail Media departments.

After compiling and analyzing user and data insights, we worked together with the Product Owner to establish the project goal, KPIs, and potential opportunities. As the core problem we were aiming to solve was to help users find the necessary information about the product and encourage further engagement within the shop, our main KPI became bounce rate while keeping a close eye on add-to-cart (ATC) rate.

We used ‘opportunity-solution tree' framework to effectively map opportunities and sub-opportunities, as well as to facilitate clear communication with stakeholders which included Engineering Manager, SEO Manager, Category Management, and Retail Media departments.

Following the discovery kick off workshop and prioritisation based on impact, required effort, and potential for collaboration, we agreed to concentrate on:

  • Prioritising Mobile Perfume Product Detail Pages (PDPs), as this improvement would significantly impact both user experience and business objectives.

  • Revamping the above-the-fold design to display pertinent information and create a more inviting entry point for the online store.

  • Refining the size selector component to enable users to access variant-specific information at a glance without feeling overwhelmed.

  • Improving the information architecture along with the add-to-cart button

  • Introducing an accent color to Flaconi's Design System and optimizing the inactive state color to provide more transparent user feedback.

Following the discovery kick off workshop and prioritisation based on impact, required effort, and potential for collaboration, we agreed to concentrate on:

  • Prioritising Mobile Perfume Product Detail Pages (PDPs), as this improvement would significantly impact both user experience and business objectives.

  • Revamping the above-the-fold design to display pertinent information and create a more inviting entry point for the online store.

  • Refining the size selector component to enable users to access variant-specific information at a glance without feeling overwhelmed.

  • Improving the information architecture along with the add-to-cart button

  • Introducing an accent color to Flaconi's Design System and optimizing the inactive state color to provide more transparent user feedback.

Following the discovery kick off workshop and prioritisation based on impact, required effort, and potential for collaboration, we agreed to concentrate on:

  • Prioritising Mobile Perfume Product Detail Pages (PDPs), as this improvement would significantly impact both user experience and business objectives.

  • Revamping the above-the-fold design to display pertinent information and create a more inviting entry point for the online store.

  • Refining the size selector component to enable users to access variant-specific information at a glance without feeling overwhelmed.

  • Improving the information architecture along with the add-to-cart button

  • Introducing an accent color to Flaconi's Design System and optimizing the inactive state color to provide more transparent user feedback.

  1. Ideate and design

  1. Ideate and design

  1. Ideate and design

Ideation

Ideation

Ideation

With a clear design problem to work on, I began the ideation phase by researching best practices, looking at competitors for inspiration and gathering all the relevant data we previously accumulated. Some of the hypothesis I had while working on iterations included:

With a clear design problem to work on, I began the ideation phase by researching best practices, looking at competitors for inspiration and gathering all the relevant data we previously accumulated. Some of the hypothesis I had while working on iterations included:

With a clear design problem to work on, I began the ideation phase by researching best practices, looking at competitors for inspiration and gathering all the relevant data we previously accumulated. Some of the hypothesis I had while working on iterations included:

  • Having the image of the product visible above the fold will provides a better and cleaner overview of the product while encouraging users to explore further.

  • Enhancing the visual hierarchy to the Product title will help user digest information while keeping the title more compact

  • Strategically grouping related information will help users in scanning and processing the content.

  • Using a horizontal scroller or a dropdown menu, or a combination of both when displaying product variants will prevent user from scrolling too much.

  • Simplifying the sticky add-to-cart button while improving the interaction on the page will draw more attention to it.

  • Using a color aligned with our brand to communicate micro-interactions and button states will provide user better feedback.

  • Having the image of the product visible above the fold will provides a better and cleaner overview of the product while encouraging users to explore further.

  • Enhancing the visual hierarchy to the Product title will help user digest information while keeping the title more compact

  • Strategically grouping related information will help users in scanning and processing the content.

  • Using a horizontal scroller or a dropdown menu, or a combination of both when displaying product variants will prevent user from scrolling too much.

  • Simplifying the sticky add-to-cart button while improving the interaction on the page will draw more attention to it.

  • Using a color aligned with our brand to communicate micro-interactions and button states will provide user better feedback.

  • Having the image of the product visible above the fold will provides a better and cleaner overview of the product while encouraging users to explore further.

  • Enhancing the visual hierarchy to the Product title will help user digest information while keeping the title more compact

  • Strategically grouping related information will help users in scanning and processing the content.

  • Using a horizontal scroller or a dropdown menu, or a combination of both when displaying product variants will prevent user from scrolling too much.

  • Simplifying the sticky add-to-cart button while improving the interaction on the page will draw more attention to it.

  • Using a color aligned with our brand to communicate micro-interactions and button states will provide user better feedback.

Accent color competitor analysis

Accent color competitor analysis

Accent color competitor analysis

Sharing the iterations early in the process was crucial for me to consistently progress on several initiatives and have them ready to be tested. For instance, learning that we are required by our contract with Payback to have Payback points information near the add-to-cart button or that we need to reserve a specific place on PDP for campaigns while keeping the Cumulative Layout Shift (CLS) score in mind.

Sharing the iterations early in the process was crucial for me to consistently progress on several initiatives and have them ready to be tested. For instance, learning that we are required by our contract with Payback to have Payback points information near the add-to-cart button or that we need to reserve a specific place on PDP for campaigns while keeping the Cumulative Layout Shift (CLS) score in mind.

Sharing the iterations early in the process was crucial for me to consistently progress on several initiatives and have them ready to be tested. For instance, learning that we are required by our contract with Payback to have Payback points information near the add-to-cart button or that we need to reserve a specific place on PDP for campaigns while keeping the Cumulative Layout Shift (CLS) score in mind.

Above the fold: Iteration 1

Above the fold: Iteration 1

Above the fold: Iteration 1

Under the fold: Dropdown variant picker

Under the fold: Dropdown variant picker

Under the fold: Dropdown variant picker

Accent color

Accent color

Accent color

Accent color iterations

Accent color iterations

Accent color iterations

The refined iterations prepared for testing encompassed:

  • An image-first, simplified Product Detail Page (PDP) featuring the H1 title above the fold.

  • Two variant picker alternatives: one with a horizontal scroller and another with a dropdown menu.

  • A well-organized information architecture that prioritized and grouped delivery details, pricing, and availability information near the variant picker.

  • A standalone ATC button that becomes sticky upon scrolling, as opposed to a default sticky button sharing space with the wishlist button and stock information.

  • Three accent color options: purple, yellow, and black in a subdued PDP as an almost control color.

The refined iterations prepared for testing encompassed:

  • An image-first, simplified Product Detail Page (PDP) featuring the H1 title above the fold.

  • Two variant picker alternatives: one with a horizontal scroller and another with a dropdown menu.

  • A well-organized information architecture that prioritized and grouped delivery details, pricing, and availability information near the variant picker.

  • A standalone ATC button that becomes sticky upon scrolling, as opposed to a default sticky button sharing space with the wishlist button and stock information.

  • Three accent color options: purple, yellow, and black in a subdued PDP as an almost control color.

The refined iterations prepared for testing encompassed:

  • An image-first, simplified Product Detail Page (PDP) featuring the H1 title above the fold.

  • Two variant picker alternatives: one with a horizontal scroller and another with a dropdown menu.

  • A well-organized information architecture that prioritized and grouped delivery details, pricing, and availability information near the variant picker.

  • A standalone ATC button that becomes sticky upon scrolling, as opposed to a default sticky button sharing space with the wishlist button and stock information.

  • Three accent color options: purple, yellow, and black in a subdued PDP as an almost control color.

  1. Test

  1. Test

  1. Test

Initially, we planned to A/B test individual design changes such as changing the placement of image or the variant picker to monitor their impact. However, this approach proved time-consuming, as each test took approximately two weeks to yield significant results, and we struggled to get significant results for minor changes. To address this challenge, we restructured the strategy and divided the discovery topics into three primary areas:

Initially, we planned to A/B test individual design changes such as changing the placement of image or the variant picker to monitor their impact. However, this approach proved time-consuming, as each test took approximately two weeks to yield significant results, and we struggled to get significant results for minor changes. To address this challenge, we restructured the strategy and divided the discovery topics into three primary areas:

Initially, we planned to A/B test individual design changes such as changing the placement of image or the variant picker to monitor their impact. However, this approach proved time-consuming, as each test took approximately two weeks to yield significant results, and we struggled to get significant results for minor changes. To address this challenge, we restructured the strategy and divided the discovery topics into three primary areas:

  1. Above the fold, encompassing the header, product title, product image, and review stars.

  2. Variant picker and Add-to-cart button, along other decision-driving information, since their design is closely related.

  3. Accent color.

Under the fold Dropdown Variant Picker

Under the fold Dropdown Variant Picker

Under the fold Dropdown Variant Picker

As the above-the-fold PDP design was being A/B tested, I conducted a usability test on the variant picker iterations by using Maze to pinpoint potential usability issues and user preferences between two designs. While the test results indicated that both versions were easy-to-use, the follow-up questions indicated a slight preference towards the horizontal variant picker as users saw all variants in a glance. To further reduce waiting time and test complexity, we decided to test the horizontal variant picker in the next A/B test.

As the above-the-fold PDP design was being A/B tested, I conducted a usability test on the variant picker iterations by using Maze to pinpoint potential usability issues and user preferences between two designs. While the test results indicated that both versions were easy-to-use, the follow-up questions indicated a slight preference towards the horizontal variant picker as users saw all variants in a glance. To further reduce waiting time and test complexity, we decided to test the horizontal variant picker in the next A/B test.

As the above-the-fold PDP design was being A/B tested, I conducted a usability test on the variant picker iterations by using Maze to pinpoint potential usability issues and user preferences between two designs. While the test results indicated that both versions were easy-to-use, the follow-up questions indicated a slight preference towards the horizontal variant picker as users saw all variants in a glance. To further reduce waiting time and test complexity, we decided to test the horizontal variant picker in the next A/B test.

Under the fold Horizontal Variant Picker

Under the fold Horizontal Variant Picker

Under the fold Horizontal Variant Picker

After finalizing the variant picker design to be tested, I focused on the accent color on PDP. Given that the goal of introducing an accent color was to provide better user feedback and establish brand awareness, I conducted a 5-second test to evaluate which color was most memorable and recognisable. Testing each color with 25 users, the results revealed that:

After finalizing the variant picker design to be tested, I focused on the accent color on PDP. Given that the goal of introducing an accent color was to provide better user feedback and establish brand awareness, I conducted a 5-second test to evaluate which color was most memorable and recognisable. Testing each color with 25 users, the results revealed that:

After finalizing the variant picker design to be tested, I focused on the accent color on PDP. Given that the goal of introducing an accent color was to provide better user feedback and establish brand awareness, I conducted a 5-second test to evaluate which color was most memorable and recognisable. Testing each color with 25 users, the results revealed that:

  • Users preferred black for the default Add-to-Cart button color, with purple a close second.

  • Black was considered safer and neater, while emotional reasons drove preferences for purple, such as color appeal and harmony with the product image.

  • Participants appreciated the contrast provided by both purple and yellow on smaller elements like the cart icon on the header.

Based on these findings, we decided to use purple as the active/hover state and retain black as the default button color. I've also tweaked the ux copy in the button to provide better feedback to users.

In the meantime, the first A/B test featuring the product image and title showed promise with slight drop in bounce rate. However, the A/B test with the horizontal variant picker was showing negative results, so we decided to pause the test after a week and decided to test the dropdown variant picker instead.

Based on these findings, we decided to use purple as the active/hover state and retain black as the default button color. I've also tweaked the ux copy in the button to provide better feedback to users.

In the meantime, the first A/B test featuring the product image and title showed promise with slight drop in bounce rate. However, the A/B test with the horizontal variant picker was showing negative results, so we decided to pause the test after a week and decided to test the dropdown variant picker instead.

Based on these findings, we decided to use purple as the active/hover state and retain black as the default button color. I've also tweaked the ux copy in the button to provide better feedback to users.

In the meantime, the first A/B test featuring the product image and title showed promise with slight drop in bounce rate. However, the A/B test with the horizontal variant picker was showing negative results, so we decided to pause the test after a week and decided to test the dropdown variant picker instead.

Since the design was already complete, the team proceeded to implement the design for A/B testing and I used this time to conduct guerilla user research to get a better understanding of user's mental models when engaging with variants. I used the same edge case design that I prepared for the usability test but this time I led the session, observing and asking questions to seven users with a mix of age and gender. The qualitative interviews, indeed, showed that users felt that the dropdown version was easier to scan and get an overview of the variants, even though they liked the horizontal version too. This insight was also echoed in the A/B test that employed the dropdown variant picker, resulting in nearly 2,5% decrease in bounce rate and 2% increase in add-to-cart rate. Based on these results, I proceeded to finalize the mobile Perfume PDP design to be implemented.

Since the design was already complete, the team proceeded to implement the design for A/B testing and I used this time to conduct guerilla user research to get a better understanding of user's mental models when engaging with variants. I used the same edge case design that I prepared for the usability test but this time I led the session, observing and asking questions to seven users with a mix of age and gender. The qualitative interviews, indeed, showed that users felt that the dropdown version was easier to scan and get an overview of the variants, even though they liked the horizontal version too. This insight was also echoed in the A/B test that employed the dropdown variant picker, resulting in nearly 2,5% decrease in bounce rate and 2% increase in add-to-cart rate. Based on these results, I proceeded to finalize the mobile Perfume PDP design to be implemented.

Since the design was already complete, the team proceeded to implement the design for A/B testing and I used this time to conduct guerilla user research to get a better understanding of user's mental models when engaging with variants. I used the same edge case design that I prepared for the usability test but this time I led the session, observing and asking questions to seven users with a mix of age and gender. The qualitative interviews, indeed, showed that users felt that the dropdown version was easier to scan and get an overview of the variants, even though they liked the horizontal version too. This insight was also echoed in the A/B test that employed the dropdown variant picker, resulting in nearly 2,5% decrease in bounce rate and 2% increase in add-to-cart rate. Based on these results, I proceeded to finalize the mobile Perfume PDP design to be implemented.

  1. Final design

  1. Final design

  1. Final design

The finalized design featured an image-first Product Detail Page (PDP) with a dropdown menu and a streamlined information architecture. A prominent Add-to-Cart (ATC) button, which becomes sticky upon scrolling, was incorporated to ensure easy user access while navigating the page.

The finalized design featured an image-first Product Detail Page (PDP) with a dropdown menu and a streamlined information architecture. A prominent Add-to-Cart (ATC) button, which becomes sticky upon scrolling, was incorporated to ensure easy user access while navigating the page.

The finalized design featured an image-first Product Detail Page (PDP) with a dropdown menu and a streamlined information architecture. A prominent Add-to-Cart (ATC) button, which becomes sticky upon scrolling, was incorporated to ensure easy user access while navigating the page.

Regarding the accent color, I adjusted the purple color to comply with accessibility guidelines and our Design System. This ensured that the color and its shades would function effectively in various contexts, such as button states, information boxes, tabs, and forms. The color has also been adopted by the Design System team to expand to other areas within the shop as well.

Regarding the accent color, I adjusted the purple color to comply with accessibility guidelines and our Design System. This ensured that the color and its shades would function effectively in various contexts, such as button states, information boxes, tabs, and forms. The color has also been adopted by the Design System team to expand to other areas within the shop as well.

Regarding the accent color, I adjusted the purple color to comply with accessibility guidelines and our Design System. This ensured that the color and its shades would function effectively in various contexts, such as button states, information boxes, tabs, and forms. The color has also been adopted by the Design System team to expand to other areas within the shop as well.

  1. Impact

  1. Impact

  1. Impact

The revamped design resulted in a 3% decrease in bounce rate and a 2% increase in add-to-cart rate, as evidenced by A/B testing.

The revamped design resulted in a 3% decrease in bounce rate and a 2% increase in add-to-cart rate, as evidenced by A/B testing.

The revamped design resulted in a 3% decrease in bounce rate and a 2% increase in add-to-cart rate, as evidenced by A/B testing.

Next steps

Next steps

Next steps

The steps involve implementing the design fully, monitoring its impact, and extending the design to other categories as well as desktop platforms. Additionally, the Design System team will expand the accent color to encompass all use cases.

The steps involve implementing the design fully, monitoring its impact, and extending the design to other categories as well as desktop platforms. Additionally, the Design System team will expand the accent color to encompass all use cases.

The steps involve implementing the design fully, monitoring its impact, and extending the design to other categories as well as desktop platforms. Additionally, the Design System team will expand the accent color to encompass all use cases.