Introduction

ModShop is a modern, behavior-aware e-commerce web application built with Next.js. It offers a seamless shopping experience with features like persistent cart, animated interactions, local order history, and a simple profile system, all running entirely in the browser using local storage. ModShop is designed for demo, prototyping, and educational purposes. This application is built as part of a group project for the "Designing Human-Centered AI Systems" master's course at Delft University of Technology.

Key Features

• Persistent Cart: Items added to the cart are saved in local storage, allowing users to return later and find their cart intact.
• Animated Interactions: Smooth animations enhance the user experience, making interactions feel more natural and engaging (similar to popular e-commerce sites).
• Local Order History: Users can view their past orders, which are stored in local storage for easy access.
• Simple Profile System: Users can create a profile and select shopping behavior, which is also stored in local storage, and used to personalize the nudges for the user.
• Nudges: The application provides personalized nudges based on the user's shopping behavior, enhancing the shopping experience. Additionally, over time, the nudges will adapt to the user's behavior according to the UCB (Upper Confidence Bound) algorithm, making the nudges more effective and tailored to the user's preferences.
• MDX Product Descriptions: Product details are written in MDX format, allowing for rich content with embedded components.
• Responsive Design: The application is fully responsive, ensuring a great experience on both desktop and mobile devices.

Challenges and Solutions

• State Persistence: Implemented local storage to ensure that user data such as cart items and order history persist across sessions.
• User Behavior Adaptation: Developed a nudge system that personalizes recommendations based on user behavior using the UCB algorithm.

Outcome

The project successfully demonstrates the integration of user behavior adaptation in an e-commerce setting. While it was merely a demo application, we used it to also conduct focus groups and gather feedback on the effectiveness of behavior-aware features (i.e., algorithmic nudges) in enhancing the shopping experience.