Inspiration

Our team shared a common challenge while using TikTok. We all had a collection of places we wanted to visit, mainly cafes and restaurants, yet most of these places remained unvisited. This led us to the idea of encouraging users to not just save these places but to actually visit them, preferably with their friends and followers on TikTok.

We were inspired by TikTok videos of real users detailing their experiences with new restaurants or shops, acting as more engaging user reviews. Based on our own personal experiences and interviews, we realised many of us save these videos to refer to again later. However, most of the time, we either forget about these videos or find it difficult to locate them again. Hence, we realised this gap in the user experience was something we wanted to work on and fix.

Problem Statement

For many, TikTok is a reliable method for getting food and location recommendations based on reviews of real users. Whether it is a brand new pop-up store or a hidden gem, users are able to scout for new activities or their next lunch spot through the application. Many TikTok videos are tagged with the location, such that users can locate places of interest easily. Typically, users tend to save these videos for later, so that they can refer to it when they wish to discover new locations or decide where to go. However, the issue arises when these saved videos get lost amidst the rest of the other saved videos, or are too far down the list to find. Furthermore, it becomes difficult to compare locations and look for the places they want.

Problem Abstract

Our solution is a geographical tracker that displays all your saved posts with a location tag on a map interface. The map features all your saved posts in one collection that have a location tag near your current location, with the option to display more posts if desired. Additionally, you are able to see which of these posts have been liked by your friends as well, this provides insights into making plans together and helps you identify common interests between your peers.

Our Solution

In the ever-evolving landscape of social commerce, our groundbreaking solution introduces a game-changing feature: the Collections Tab displayed in a map view. This transformative addition is meticulously designed to cater to the dynamic and evolving needs of users seeking a seamless and enriching social commerce experience.

At its core, this feature serves as a powerful geographical tracker. It seamlessly integrates with the user's browsing experience, presenting all saved posts with location tags in an interactive map interface. This integration bridges the gap between the digital and physical worlds, offering users an intuitive and visually engaging way to curate a collection of posts tied to real-world locations. The map interface is thoughtfully curated, populating the user's view with saved posts featuring location tags that are in proximity to their current geographical position. This smart curation enables users to effortlessly explore local offerings, catering to their immediate preferences and needs. Whether it's finding a nearby restaurant, boutique, or unique service, our feature empowers users to see what's available in their vicinity with ease.

But our innovation doesn't stop at showcasing posts; it leverages the power of social connectivity to enhance the social commerce experience. Beyond presenting posts, the feature goes a step further, highlighting which of these items have been liked or saved by friends within the user's network. This social dimension fosters collaboration, shared experiences, and a deeper sense of community engagement. It also serves as a valuable tool for users to identify common interests among peers. For instance, users can see which of their friends have also shown interest in a particular video or posts, opening doors for shared experiences. This shared interest extends beyond the platform; it can lead to collaborative planning for trips or outings to visit the places and products they've discovered together.

In essence, our solution boosts social commerce by seamlessly connecting users with local offerings, enriching their shopping journeys, and fostering a sense of community. By harnessing the power of geographical data and social connections, we're redefining how users engage with places of interest, services, and their network, shared experiences, and serendipitous product discovery. This innovative approach creates a vibrant, interactive, and community-driven experience on TikTok.

What it does

List of Features

1. Map View Interface

A Google Map interface that shows posts that you have saved with a location tag around you. This allows for an easier way to decide on what locations to visit near you. Additionally, you can view which post has been liked by your friends, providing insight into the common interests between your social circles.

How we built it

1. Problem Definition & User Research

We wanted to find out the pain points and problems present today in the user journey of using the TikTok app. In order to get this information, we did several user interviews and research into the potential challenges faced. Eventually, we arrived at a problem statement that we could resonate with and wanted to fix - the difficulty in keeping track of places of interest on TikTok that were previously saved.

With our problem statement defined, we now had to brainstorm solutions to address this issue in a way to blend seamlessly with the current interface and experience. After a few rounds of testing and research, we finally settled on our solution - enhancing the TikTok application by adding map functionality for each collection and placing markers on the map for each destination within posts.

2. Project Kickoff

With our problem and solution in hand, we could now get started on developing it. We first finalized the scope of the project by defining the features that were crucial to our solution. Together, we brainstormed and listed the specific features and functionalities we wanted to include. This involved integrating Google Maps, handling location data, and enabling marker interactions. Additionally, we collectively determined the resources needed, including hardware, software, and any third-party services required for the project.

Next, we identified the roles and responsibilities of our team members. This ensured that everyone, including developers, designers, knew their part in making the project successful. Timeline: Given our tight timeline of 1 week, we established a project timeline with well-defined milestones to track and ensure our progress throughout the development process.

3. User Interface Design

We prototyped our solution and created wireframes and mockups of the map interface using Figma. This allowed us to visualize and refine the design to ensure it seamlessly aligned with TikTok's existing interface, and to allow us to have a goal to work towards when coding out our solution.

In this process, we also collaborated on planning how users would navigate between TikTok collections, posts, and the map view to make the experience as intuitive as possible. Our team collectively implemented the design using React Native's components and styles, incorporating elements like buttons, headers, and markers to create a cohesive user interface.

4. Development & Production

We utilized React Native and Expo Go to build the app and collectively installed all necessary packages and dependencies to ensure a smooth development process. Once the environment was set up, we started working on the features, prioritizing the most important ones first. We had meetings to iron out any hurdles we come across, and to discuss any improvements we could make along the way.

5. Google Maps Integration

We acquired an API key from the Google Cloud Console to enable Google Maps integration in our app. In our collaborative coding efforts, we imported and configured the react-native-maps library within our React Native code to seamlessly display Google Maps. We worked together to create functions for placing markers on the map for each destination, leveraging the location data we had gathered. Our collaborative coding efforts also extended to implementing marker interactions, such as tapping on a marker to display additional information about the destination.

6. Expo Go Testing

We ensured that Expo Go was set up on our physical devices and emulators/simulators for comprehensive testing. As a team, we thoroughly tested the app on various devices (both Android and IOS ) to verify that markers displayed correctly and that marker interactions worked as expected.

Challenges we ran into

1. Compatibility

We had issues getting the Google Maps API to be compatible with Google and Android interfaces, but ultimately overcame it.

2. User flow & Integration

We had difficulty deciding on how users would access the map view, and the screens required to accomplish a task. Additionally, we want to ensure the screen view isn't as complicated and populated with items for the users.

Accomplishments that we're proud of

1. Finding New Value for Users

In a rapidly evolving digital landscape where TikTok continues to introduce new features and enhancements, we take pride in our ability to consistently discover fresh value propositions for our users within our solution.

2. Contributing to TikTok

We are immensely grateful for the opportunity to participate in a hackathon hosted by TikTok, a well-established and highly popular platform among people of our age group. It brings us great joy to contribute our insights and ideas for potential solutions that we believe can truly make a positive impact and add value to TikTok.

What we learned

1. Less is More

Initially, we aimed to integrate cutting-edge technologies like AI and VR, but we soon realised that these couldn't address the specific challenges our users were facing. We have learned that solutions do not always necessitate the adoption of the newest technologies or complex approaches. In many cases, even small tweaks and uncomplicated enhancements can make a meaningful difference for our users. It is clear that not every issue requires an intricate solution; simplicity often proves effective

What's next for TikTok Explore

1. Filter Functionality

In future iterations, we believe being able to filter all stories by locations or regions would allow the user more control over the map and offer a better experience in exploring more personalised locations and trips.

2. Journey Canvas

Another feature that would provide value seamlessly with our current solution. Users are able to build their own “Visited Locations” Map by creating posts after their visits and adding tags to the respective locations. This not only adds a layer of depth to their personal journey but also facilitates easy sharing and storytelling. Users can showcase their adventures, recommend hidden gems, and connect with others who share similar travel interests. It transforms the TikTok application into a comprehensive platform for not only experiencing but also curating and sharing the beauty of the world.

3. Collection Sharing

Our platform offers a seamless experience for users to share their collections, either publicly or with friends, while also providing the option to collaborate. Sharing a collection publicly opens the door to discovering what other users are planning and their interests. Users can tap into the collective knowledge and creativity of the TikTok community, uncovering hidden gems, discovering new horizons, and fostering connections with fellow travellers and enthusiasts. Additionally, you can create shared collections with friends, facilitating joint trip planning. Moreover, you have the flexibility to choose whether your friends can edit your collections. Beyond this, our platform plans to incorporate an intelligent recommender system. It will analyse the content you have added to your collections, including videos, and suggests public collections for you to explore, ensuring that your experience remains engaging and dynamic.

Our Bio

Tan Sheng Da

Sheng Da is a Year 3 Information System student at Singapore Management University, where he has developed a strong passion for Front-End Development, specializing in React Framework and ThreeJS. Graduating with a diploma in Arts and Theatre Management from Republic Polytechnic, he brings a unique blend of creative and technical skills to his work. Sheng Da aspires to seamlessly merge creativity and technology using React and ThreeJS to craft visually stunning and user-friendly digital experiences. Committed to staying updated in this dynamic field, he aims to create innovative web interfaces that captivate and delight users. Sheng Da is always open to collaboration opportunities to enhance the digital landscape.

Rachel Sng

Rachel is a student who has a strong affinity for React Native development. Her educational journey has included studying Python, Angular, and React Native as she delves into the world of mobile app development. Her primary objective is to craft user-friendly applications using React Native, and she is enthusiastic about continuing her learning and progression within this field.

Adam Tan Bin Firdaus

Adam is a budding front-end engineer with a sharp design sensibility. His diverse background spanning digital marketing, international business, and front-end roles from internships and school experiences showcases his well-rounded abilities. As an enthusiastic lifelong learner, he relishes taking on fresh challenges and resolving problems. Adam actively seeks opportunities that enable him to seamlessly integrate his design and programming skills while making valuable contributions to dynamic environments and fostering ongoing personal and professional development.

Poo Jun Sui

Jun Sui is a highly motivated Year 3 Information Systems student at Singapore Management University. Her proficiency spans a range of programming languages and technologies, complemented by skills in web development frameworks, data analysis tools, and data visualization. With a strong technical foundation, certifications in IT Automation with Python, and a track record in hackathons and competitions, Jun Sui is poised to make a significant impact as an aspiring software engineer.

Seth Yap Ziqi

Seth is a penultimate student currently majoring in Information Systems at Singapore Management University. Passionate about problem-solving using the latest technologies, Seth aspires to venture into Product and Project Management roles. Adaptable and eager to learn new skill sets, Seth is excited to take on new challenges and opportunities to diversify his knowledge and portfolio, leading him to take on certifications on AWS Cloud Services and Google Project Management.