Future X Past by Team FXP

Digital Storefront with recommended products grouped thematically
Possible Digital Storefronts
Possible Digital Storefronts
User Profile with Achievement List that other users are able to see when visiting
Possible User Profile with Achievement List

The Team

Faith Lim: I have a passion for crafting seamless digital experiences. Specialising in UI/UX design, design thinking, and front-end development, I merges creativity with technical expertise to create user-centric solutions. With an eye for detail and a knack for innovation, I am poised to revolutionise the world of design and user experience.

Kelvin Thian: I aspire to be an AI-enabled Solutions Architect with a strong focus on human-centered thinking. Combining technical expertise with a keen sense of empathy, I want to be a digitally grounded solutions architect that excels at crafting user-centric solutions. My experience also extends to cloud deployment, enabling scalable and robust solutions. I am deeply committed to the responsible use of technology, ensuring that innovation aligns with ethical considerations. And by combining human and machine elements, we can bring cutting edge solutions with a soft supple touch.

Ooi Jia Sheng: To Design with Intention. In my journey towards Product Management, I seek to ask the important questions. Humans are dynamic and multi-faceted, thus the design process requires understanding of existing mental models and connecting the dots to create intuitive and innovative solutions. Problems oftens are often rooted to systems larger than self and it is imperative to see the bigger picture in play. The interplay of connected systems create what we see today.

Jordan Lee: I am an aspiring Full Stack Developer, who wants to be able to do things quick! Previously having done much backend work in all my projects, I decided to take on the Front End side of things. My goal is to be able to implement all the features from the design while integrating with the backend. Overall, I think I managed to do a decent job for about 2 days of work. Thanks to the rest of the team for being ups :)

Problem Statement

How might we enhance TikTok's shopping experience to dynamically cater to each user's unique preferences, creating a customised TikTok Shop identity for every user?

E-commerce platforms have become an integral part of our daily lives. We often find ourselves spending considerable time scrolling through endless product listings in search of that perfect item, that one thing to satisfy our cravings. Yet, all too often, that itch remains unscratched. Recommended products are featured prominently, but they rarely align with our true desires.

Onboarding surveys are an option, but they fall short in capturing the dynamism and time-dependent nature of human needs. Though platforms can track our viewing and purchase patterns, but those are too minuscule to capture our true needs. Just think about how your morning coffee cravings differs from your desire for it late at night. Our requirements evolve with time, moments, or simply a vibe.

In TikTok, the primary app and TikTok Shop exist almost as distinct entities. Rarely do they converge, with only occasional promotions of shop items by TikTok Creators. They run parallel, without much intersection. It's not part of a user's mental model to transition to TikTok Shop while scrolling their For You Page (FYP). We've recognized a pressing need to infuse social elements and TikTok's ability to recognise content that users will love into TikTok's e-commerce platform. Presently, the Shop's functionality resembles that of well-established competitors (Shopee, Lazada, etc.), but it's not the first thought for users when considering a purchase. We believe there's an imperative to establish a unique selling proposition for the Shop, setting it apart from rivals, all while leveraging the inherent strength of TikTok as a dominant social media content-sharing platform.

Design Process

In our journey to create a revolutionary shopping experience, we looked to the best in the business, drawing inspiration from platforms that excel in delivering an exceptional human experience while shopping. One such standout example is IKEA, a global household name.

Think about the last time you walked into an IKEA store or perused their catalog. What sets them apart is their prioritsation of the human experience. They've elevated the act of shopping for furniture and lifestyle decor into an immersive and enjoyable adventure.

Immersive Showrooms

When you step into an IKEA store, it's not just a retail space; it's a carefully crafted environment that engages all your senses. You can touch, feel, and experience the furniture and decor in real-life settings. It's an exploration, an adventure through rooms and spaces designed to inspire.

Relating to a digital counterpart, there are existing implementations of a virtual storefront that showcases products in a thematic manner.

Drake Digital Store

Drake, the canadian Rapper, has an E-Commerce platform where visitors can venture through the space, exploring rooms such as Drake’s bedroom, closet, and even enter Air Drake, his private jet. Strewn around the rooms are items available to buy through Shopify links to smaller creators and sellers Drake has collaborated with. This brings shoppers an immersive experience to envision how their products before purchasing.

It is important to take note that contextualisation is key. TikTok shop is not a standalone product of TikTok but one of its key features. Thus, consistent design language is crucial while playing to the strengths of TikTok. TikTok For You Page (FYP) is a dynamic feed that's not just another newsfeed; it's a finely-tuned algorithmic masterpiece. TikTok's recommendation system, powered by artificial intelligence, continuously analyzes your interactions, watching patterns, and engagement.

Solution

Introducing our innovative solution: a themed Digital Storefront featuring curated TikTok Shop products. Powered by TikTok's recommendation algorithm and cutting-edge Generative AI, it tailors recommendations to your purchase behaviour. Just as TikTok's FYP delivers videos you love, explore products you desire in your dedicated Storefront. You can also turn shopping into an achievement-driven adventure, enhancing your TikTok profile with each purchase. Elevate your shopping experience like never before.

Discovering the Future

Using the existing recommendation algorithm that tracks user's FYP behavior and previous purchase habits, we will provide a list of TikTok Shop products that matches the current user's potential want and needs.

Within the list, we will group it up thematically based on the product's existing tags (Eg. Home, Christmas, Sports). Using Generative AI for images, we will generate a digital background and place virtual instantiations of the products into the background. That offers personalized recommendations and product suggestions through an immersive and visually appealing experience for users. It allows for creative presentation, customization, and storytelling, making it shopping an engaging journey.

Storefront For You

Exploring the Past

As users shop on TikTok, they unlock cosmetic achievements reflecting their spending milestones, transforming each purchase into an engaging and gamified social adventure. This platform empowers users to showcase their accomplishments on their TikTok profiles with exclusive visuals, crafting a dynamic online identity.

While there may not be explicit tangible incentives tied to unlocking achievements, this approach taps into the universal human desire for recognition and achievement. This concept has proven its effectiveness in various games, demonstrating its feasibility within our gamified environment. Users, driven by a competitive spirit, actively pursue achievements, creating a friendly yet fierce competition that motivates increased engagement with TikTok Shop.

User Profile Achievements

User Experience Design

User Flow

Technological Stack

Diagram

Frontend - React.js

React offers a component-based structure that streamlines development and promotes reusability. The wealth of libraries available for React and the one-way data flow between components simplify development and bolster data reliability in a POC phase.

While we acknowledge that native development might be ideal actual implementation, our decision to use React for this Proof of Concept is driven by its efficiency for prototyping and rapid concept validation.

Backend- Flask with Openai

We opted for Flask due to its built-in features that expedite API creation, especially as we don't need complex CRM or CMS. Flask's MVC architecture suffices for our backend microservice. For simplicity in our POC, we embedded our data structure within Flask using SQL Alchemy.

We are aware that Flask framework is insufficient for commercial loads and thus have chosen to ensure CORS and WSGI servers are enabled in our services as well. This helps to ensure servers' sclability. As our database is embedded into the backend, this may limit the server to only one instance. As such, we will seek to detach the databaseb instance in future for a more containerised backend architecture for better load balancing for future implementations.

Demo | Github | Figma