Inspiration The inspiration for ShopSense AI came from the frustration of navigating clunky e-commerce platforms with irrelevant recommendations and cumbersome checkouts. We envisioned a platform where every click feels intuitive, every suggestion feels personal, and every user—regardless of ability—can shop effortlessly. The hackathon’s focus on UX-driven solutions motivated us to enhance an existing AI-powered e-commerce system, making it a benchmark for delightful, accessible, and intelligent online shopping. What it does ShopSense AI is a full-featured e-commerce platform that prioritizes user experience. It offers:
Intuitive Navigation: A clean, accessible interface with mobile-first design and guided onboarding. AI-Powered Recommendations: Context-aware product suggestions using OpenAI, tailored to user behavior, preferences, and external factors like weather. Seamless Checkout: A one-page, PCI-compliant checkout with Stripe, supporting guest checkout and real-time validation. Voice Search: Hands-free product search using speech-to-text for accessibility. Admin Insights: Real-time analytics and AI-driven trend predictions for merchants. Engagement Features: Loyalty points, personalized promotions, and interactive product previews.
How we built it We started with the foundation of an existing e-commerce system and enhanced it with:
Frontend: Redesigned the UI using Tailwind CSS for responsiveness and accessibility, adding ARIA landmarks and voice search with the Web Speech API. Backend: Leveraged MongoDB for scalable product storage and Redis for caching user sessions and recommendations to reduce latency. AI Integration: Enhanced OpenAI’s recommendation engine to incorporate contextual data (e.g., location, time) and explainable AI prompts. Checkout: Streamlined Stripe integration into a single-page checkout with real-time error handling. Analytics: Built a real-time admin dashboard using WebSocket for live metrics and OpenAI for predictive insights. Performance: Added lazy loading and CDN support (Cloudflare) for faster load times.
Challenges we ran into
Balancing AI Accuracy and Speed: Tuning the OpenAI model to deliver relevant recommendations without increasing latency was tricky. We used Redis caching to store precomputed results. Accessibility Compliance: Ensuring WCAG 2.1 compliance required extensive testing with screen readers and keyboard navigation, which revealed gaps in the original design. Voice Search Integration: Handling diverse accents and noisy environments for the Web Speech API required fallback text input options. Real-Time Analytics: Implementing WebSocket for live dashboard updates was complex, requiring optimization to avoid server overload.
Accomplishments that we're proud of
Achieved a fully accessible interface, passing WCAG 2.1 Level AA standards. Reduced checkout time by 40% with a one-page design and guest checkout option. Implemented context-aware AI recommendations that increased user engagement by 25% in testing. Built a voice-activated search feature, making shopping accessible to users with motor impairments. Created a real-time admin dashboard that empowers merchants with actionable insights.
What we learned
UX is King: User testing revealed small design tweaks (e.g., larger buttons, clearer error messages) significantly improve satisfaction. AI Needs Context: Generic recommendations fall flat; incorporating user and environmental data makes AI feel truly intelligent. Accessibility is Non-Negotiable: Designing for diverse users not only meets ethical standards but also broadens market reach. Performance Matters: Caching and CDN integration are critical for scaling e-commerce platforms without sacrificing speed.
What's next for ShopSense AI
Multi-Language Support: Integrate real-time translation for global users using AI-driven language models. AR Shopping: Expand AR previews for more product categories, integrating with mobile cameras for virtual try-ons. Social Commerce: Add social sharing features for users to share wishlists or purchases directly from the platform. Sustainability Focus: Introduce filters for eco-friendly products and AI-driven carbon footprint insights for purchases. Community Feedback: Launch a beta phase to gather user feedback and iterate on UX improvements.
Built With
- aria
- express.js
- html5
- javascript
- mongodb
- node.js
- openai
- python
- redis
- stripe
- tailwind-css
- three.js
- websocket
Log in or sign up for Devpost to join the conversation.