Inspiration
Our team was inspired by the untapped potential of AI to enhance the casual shopping experience on TikTok. We recognized that most users browse TikTok's For You Feed without a specific agenda and might suddenly feel the desire to purchase something—perhaps a cool T-shirt inspired by a video they just watched or a random thought that pops into their mind. However, they often struggle to find that perfect item that matches their current mood or interests in the heat of the moment. Translating this vague desire into concrete product recommendations can be challenging, but it's a challenge we are excited to tackle.
We saw an opportunity to leverage the power of Large Language Models (LLMs) to bridge this gap. LLMs excel at understanding nuanced, conversational inputs, making them ideal for interpreting the often nebulous wishes of casual shoppers. We wanted to create a system that could understand a user's current feelings, interests, or vague product ideas, and translate these into relevant, personalized product recommendations.
Our goal was to enhance the TikTok Shop experience for those moments when a user thinks, "I feel like getting something nice, but I'm not sure what" and provide them with tailored suggestions that spark joy and discovery. This AI-enhanced approach could transform casual browsing into a more engaging, personalized shopping experience, helping users uncover products they love but might never have found on their own.
What We Learned
Throughout this project, we gained valuable insights into:
- Integrating AI with e-commerce and social media platforms
- Using Large Language Models (LLMs) API to process natural language inputs and generate relevant product recommendations
- React Native development, particularly in creating a seamless user interface that mimics
TikTok's signature scrolling feature while incorporating a shopping component
How We Built It
We built our project using React Native as the primary framework, which allowed us to develop a cross-platform mobile application. We integrated various libraries and tools:
- React Navigation for seamless screen transitions
- Expo for video playback capabilities
- FontAwesome for iconography
- A custom
ChatGPTservice for AI-powered recommendations - A fake shop that contains dummy data of the items in the TikTok shop
The core of our application revolves around a vertical scrolling interface similar to TikTok, interspersed with product pages. We created a "Tailor Your Taste" feature that uses AI to provide personalized product recommendations based on user inputs.
Challenges We Faced
Integrating AI Seamlessly: One of our biggest challenges was integrating the AI component in a way that felt natural and user-friendly. We had to carefully design the user input process to gather enough information without overwhelming the user.
Balancing Aesthetics and Functionality: We aimed to maintain
TikTok's sleek, minimalist design while adding new features. This required several iterations of our UI design.API Integration: Creating a mock product database and integrating it with our AI recommendation system presented some technical hurdles, particularly in ensuring fast and accurate product retrieval.
4.User Experience Design: Designing an intuitive flow for users to transition from video browsing to personalized shopping was a complex task that required multiple revisions.
Despite these challenges, we're proud of the result - a prototype that demonstrates how AI can enhance the social shopping experience, making it more personalized and engaging for users.
Accomplishments that we're proud of
Seamless AI Integration: We successfully integrated a sophisticated AI recommendation system into a
TikTok-like interface, creating a smooth user experience that feels natural and intuitive.Natural Language Processing: Our system can effectively interpret vague, conversational user inputs and translate them into relevant product recommendations, bridging the gap between casual browsing and targeted shopping.
User-Centric Design: We're proud of our UI/UX design that maintains the familiar feel of
TikTokwhile introducing new shopping features in a non-intrusive way.Cross-Platform Compatibility: By using
React Native, we ensured our application works smoothly on bothiOSandAndroiddevices, maximizing our potential user base.Ethical AI Implementation: We implemented safeguards to ensure our AI recommendations are diverse and unbiased, promoting a fair and inclusive shopping experience.
What's next for ShopWhiz: Your Vibe, Our Recommendations
Event-Based Recommendations Using Calendar: We can recommend relevant products to users based on holidays and significant dates in their calendars, such as anniversaries and birthdays. A popup page featuring the event name along with related products can be shown in the "For You" page. We will both integrate a calendar into the
TikTokapp and import users' system calendars to capture important dates.Influencer Collaboration Tools: We plan to develop tools that make it easier for influencers to understand overall viewer comments in their live streams or videos. These tools will help influencers grasp what viewers generally feel or are interested in, allowing them to make timely adjustments to their products or marketing strategies.
Visual Recognition Integration: Our next step is to integrate visual AI that can analyze the style and content of
TikTokvideos to make relevant product suggestions at the bottom of videos without publishers' own listing of products or users’ selection of analysing page.Social Shopping Features: We aim to add features that allow users to shop with friends, share recommendations, and see what products are trending in their social circles.
Augmented Reality Try-On from 2D pictures: We're developing an advanced AR feature that transforms 2D product images into interactive 3D models. By leveraging cutting-edge AI and computer vision technologies, we'll enable users to virtually try on products in real-time. This immersive experience will allow customers to visualize items more accurately, significantly enhancing the online shopping journey and reducing uncertainty in purchase decisions. Our solution aims to bridge the gap between online browsing and in-store trials, providing a more confident and engaging shopping experience.
Built With
- axios
- expo.io
- fake-store
- font-awesome
- javascript
- navigation
- node.js
- openai
- react-native
- xcode
Log in or sign up for Devpost to join the conversation.