> For the complete documentation index, see [llms.txt](https://resources.hellohakuna.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://resources.hellohakuna.com/best-practices-toolkit/ui-ux-for-e-commerce.md). # UI/UX for E-Commerce A well-thought-out and intuitive UI/UX can lead to significantly higher attachment rates and better overall conversion rates. The impact of UI/UX on the sales success of online embedded product protection should therefore not be underestimated. In particular, aspects such as customer journey, placement, design, and content should be taken into consideration. ## Customer Journey Multiple touchpoints lead to multiple conversions. Therefore, we recommend engaging customers with the product protection option as early as possible (e.g., on the product detail page) and incorporating product protection at additional points in the purchase process (e.g., in the shopping cart and at checkout) to achieve the highest possible attachment rate. ## Placement The exact position on individual pages depends on the existing UX. Regardless, the product protection should always be visually connected to the protectable product and be able to be integrated into the purchase decision, for example by placing it above the purchase button. ## Design The design of the product protection offer should match the rest of the website while also drawing attention and being visually clear. To achieve this, the following design themes should be considered: * [x] **Differentiation:** Use a border or different background color to define the section and distinguish it from other areas. * [x] **Selection Elements for Opt-In:** Customers must opt into product protection by actively selecting the plan. To capture their choice, selection elements such as checkboxes, buttons, or dropdown menus should be used. The selection elements you choose don't need to be consistent across all pages. Instead, ensure they complement the other elements on the page. In some cases, it might make sense to use a checkbox on one page and a dropdown menu on another if this better fits the overall design. * [x] **Clear Selection States:** There should be a visual indication (e.g., through color change) of whether a product protection plan has been selected or not. * [x] **Link to T\&Cs / Pop-up / Subpage:** Use an info button or hyperlink to provide customers with additional information about product protection and the Terms and Conditions.

## Content When providing content, it's important to find a balance between generating interest and information overload. As a rule of thumb, place more preliminary information at the first touchpoint and slightly less at subsequent touchpoints. When customers encounter the topic for the first time, the most important aspects should be mentioned so they can immediately recognize the value and benefits. Later, the focus should be on the CTA, price, and duration, serving as a reminder without distracting from the purchase process. Regardless of where they are in the purchase process, interested customers should always have the opportunity to find additional information on a linked pop-up or [dedicated landing page](/best-practices-toolkit/landing-page.md).