TikToken: Bridging the Gap Between Content and Commerce

Submission for TikTok Hachakton : E-Commerce 2023

Inspiration

In the era of digital convergence, we noticed a substantial gap between content creation and eCommerce on platforms like TikTok. While users were showcasing products and influencing purchasing decisions, there was no seamless way to bridge the viewer's journey from watching a video to making a purchase. We envisioned a platform where engagement wasn't just a metric of popularity but also a currency of value.

App Demo

Youtube Link: https://www.youtube.com/watch?v=bTZs8gtaejM&ab_channel=GlennQuah

Devpost Link: https://devpost.com/software/tiktoken-tcqhao

For this Tiktok Clone to work you'll need the API/Backend:

Tiktoken Backend API: https://github.com/glennquah/TikToken-BackEnd

App Setup

git clone https://github.com/glennquah/TikToken-BackEnd.git

npm i

npm run dev

Inside Plugins/axios.js make sure the baseUrl is the same as your API.

Application Images of features we made

Added Token System to encourage people to join Tiktok's ecommerce.

Option to upload products onto ecommerce.

Added shop tab to access the ecommerce.

Productlisting page with all product details.

What We Learned

Throughout the course of this project, we delved deep into the user psyche, understanding the dynamics between content consumption and purchasing behavior. We learned that:

• Users are more likely to make a purchase when the path from discovery to checkout is frictionless.
• Creators are motivated to produce quality content when there's a tangible reward tied to engagement.
• Integrating eCommerce with social interactions can drive up sales and enhance user experience on both fronts.

How We Built It

We began by brainstorming sessions to outline our primary goals, leading to 5 main enhancements:

1. Currency System: Introducing currency visible on user profiles and awarded upon receiving likes.
2. Product Advertisement: Enabling users to tag products with a name and link during uploads.
3. Dedicated Product Pages: Comprehensive details and an easy checkout process for each product.
4. Product Addition Feature: Allowing approved users to add products to the platform.
5. Navigational Improvements: Seamless integration of the shop icon to guide users to product pages.

We utilized a combination of front-end and back-end technologies, ensuring responsive design and secure transaction processes. Collaboration tools played a pivotal role in keeping our team synchronized and efficient.

Challenges We Faced

Like any ambitious project, we encountered our share of challenges:

• Balancing User Experience: Ensuring that the eCommerce features didn't overshadow the primary content experience was crucial.
• Optimizing for Application: Given TikTok's primary audience, ensuring our features were mobile-optimized without glitches was paramount.

Through iterative testing, feedback, and refining, we overcame these challenges, creating a harmonious blend of content and commerce.

Accomplishments that we're proud of

1. Innovation at its Best: We're thrilled to have bridged the gap between content engagement and eCommerce, making TikToken a pioneering venture.
2. User-Centric Design: Our iterative design process, involving feedback loops and user testing, led us to create an interface that not only looks good but also feels intuitive and user-friendly.

What we learned

• User Behavior Insights: We gained deeper insights into how users interact with content and make purchasing decisions. This was eye-opening and influenced several design decisions.
• Technical Challenges: We honed our skills in front-end and back-end technologies, understanding the nuances of integrating a seamless shopping experience within a content-rich platform.

What's next for TikToken

Enhanced AR Shopping Experience: We're exploring the possibility of incorporating Augmented Reality into TikToken. This would allow users to virtually "try" products before purchasing them, further enhancing the shopping experience.

Built With

• HTML
• JavaScript
• Laravel
• MySQL
• Nuxt.js
• PHP
• Tailwind CSS
• TypeScript
• Vue.js

Credits

John-Weeks-Dev (tiktok skeleton)