diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md
index 7f9cf604f8d..3e00e2dcc87 100644
--- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md
+++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md
@@ -5,24 +5,454 @@ challengeType: 19
dashedName: what-are-best-practices-for-designing-shopping-carts
---
-# --description--
+# --interactive--
+
+**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work.
There are thousands of e-commerce websites on the internet, and the shopping cart is a crucial part of the e-commerce experience. A good design can make the shopping cart experience more enjoyable and increase sales. A poor design can lead to abandoned carts and lost sales.
In this lesson, we will discuss some best practices for designing shopping carts. The first design consideration is making sure the shopping cart is visible to users at all times. Most shopping cart designs will have the cart displayed in the upper right hand corner of the page. Users should see the number of items in their cart displayed next to the cart icon, and be able to click on the cart to see more details about the items they are purchasing.
+:::interactive_editor
+
+```html
+
+
+
+
+
+```
+
+```css
+.shopping-cart {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ font-family: sans-serif;
+}
+
+#cart-btn {
+ background: none;
+ border: none;
+ cursor: default;
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: 4px;
+ color: #333;
+ font-size: 24px;
+}
+
+#item-count {
+ background: red;
+ color: white;
+ border-radius: 50%;
+ padding: 2px 6px;
+ font-size: 13px;
+ position: absolute;
+ top: -6px;
+ right: -6px;
+ min-width: 18px;
+ height: 18px;
+ line-height: 14px;
+ text-align: center;
+ font-weight: 700;
+ user-select: none;
+ box-sizing: border-box;
+}
+
+#cart-details {
+ background: white;
+ border: 1px solid #ccc;
+ max-height: 300px;
+ overflow-y: auto;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ margin-top: 10px;
+ padding: 10px;
+ position: relative;
+ z-index: 1000;
+}
+
+#cart-items {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+#cart-items li {
+ padding: 5px 0;
+ border-bottom: 1px solid #eee;
+}
+```
+
+:::
+
Another consideration is providing a clear way for users to update the quantity of items in their cart. This can be done by providing a quantity input field next to each item in the cart. Users can easily update the quantity of an item by changing the number in the input field.
You should also provide a "Remove" button next to each item in the cart. This allows users to easily remove items from their cart. You don't want to make it difficult for users to remove items from their cart, as this can lead to frustration and abandoned carts.
+:::interactive_editor
+
+```html
+
+
+
+
Your Cart
+
+
+ T-Shirt
+
+
+
+
+ Hat
+
+
+
+
+
+```
+
+```css
+.shopping-cart {
+ max-width: 400px;
+ margin: 20px auto;
+ font-family: sans-serif;
+ border: 1px solid #ccc;
+ padding: 15px;
+ background: white;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ border-radius: 6px;
+}
+
+.shopping-cart h2 {
+ margin-top: 0;
+ font-weight: 600;
+ font-size: 1.4rem;
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 8px;
+}
+
+.cart-items {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.cart-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 0;
+ border-bottom: 1px solid #eee;
+}
+
+.item-name {
+ flex: 1;
+ font-size: 1rem;
+}
+
+.quantity-input {
+ width: 50px;
+ padding: 4px 6px;
+ font-size: 1rem;
+ margin: 0 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ text-align: center;
+}
+
+.remove-btn {
+ background: #e74c3c;
+ border: none;
+ color: white;
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+
+.remove-btn:hover,
+.remove-btn:focus {
+ background: #c0392b;
+ outline: none;
+}
+```
+
+:::
+
Another consideration is the shopping cart icon itself. The icon should be something easily recognizable for all users. A common icon is a shopping cart with a handle and wheels. Other icons might be a shopping bag or a basket. But you don't want to choose an icon that is too abstract or difficult to understand.
When the user wants to review the total in their cart, they should be able to easily find the total cost of all items in the cart. This should be displayed prominently on the page, so users don't have to search for it.
+:::interactive_editor
+
+```html
+
+
+
+
+
+
+
T-Shirt x2 - $40.00
+
Hat x1 - $15.00
+
+
+ Total: $55.00
+
+
+
+```
+
+```css
+.shopping-cart {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ font-family: sans-serif;
+ width: 280px;
+ background: white;
+ border: 1px solid #ccc;
+ padding: 10px;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ border-radius: 6px;
+}
+
+#cart-btn {
+ background: none;
+ border: none;
+ cursor: default;
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: 4px;
+ color: #333;
+ font-size: 28px;
+}
+
+#item-count {
+ background: red;
+ color: white;
+ border-radius: 50%;
+ padding: 2px 7px;
+ font-size: 14px;
+ position: absolute;
+ top: -6px;
+ right: -6px;
+ min-width: 18px;
+ height: 18px;
+ line-height: 14px;
+ text-align: center;
+ font-weight: 700;
+ user-select: none;
+ box-sizing: border-box;
+}
+
+#cart-details {
+ margin-top: 10px;
+}
+
+#cart-items {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 10px 0;
+ font-size: 1rem;
+}
+
+#cart-items li {
+ padding: 5px 0;
+ border-bottom: 1px solid #eee;
+}
+
+#cart-total {
+ font-size: 1.2rem;
+ font-weight: 700;
+ text-align: right;
+ color: #111;
+}
+```
+
+:::
+
Finally, you should provide a clear call-to-action button for users to proceed to checkout. This button should be prominently displayed on the page, so users don't have to search for it.
You don't want to have too many buttons on the page, as this can lead to confusion. The call-to-action button should be the most prominent button on the page, so users know exactly what to do next. You should use the brand's primary color for the button, so it stands out from the rest of the page.
+:::interactive_editor
+
+```html
+
+
+