Inspiration

The idea for Hello Find Stuff (HFS) came from the increasing trend of shoppable video content on social media platforms. Many users see items in videos, such as outfits or decorations, and wish they could quickly find and purchase them without interrupting the viewing experience. Inspired by this user need, I wanted to create a solution that allows seamless integration of shopping within video platforms. This project explores the potential of using AI-powered UI/UX to enhance this experience, with a focus on providing users with quick access to relevant product listings without leaving the app.

What it does

Hello Find Stuff (HFS) is a prototype app that allows users to pause a video and search for items visible in the frame. The app uses a conceptual AI-inspired scan to identify valid items in the video and suggests similar items from a shop catalog. While no real AI or backend is implemented in this prototype, the concept demonstrates how a modern AI-native UI could bridge the gap between social media content consumption and online shopping.

Key Features:

  • Search on video frames or images
  • Conceptual AI scan to detect items in the video
  • Find similar items available in the shop
  • Display results seamlessly within the app

How we built it

Hello Find Stuff was built using Lynx, an open-source cross-platform UI framework. The main goal was to create a native UI for iOS, Android, and Web from a single codebase, utilizing TypeScript for logic and CSS for styling. I leveraged Lynx's components to design a clean, responsive UI that works seamlessly across multiple platforms.

  1. Framework: Lynx
  2. Language: TypeScript & CSS
  3. IDE: Visual Studio Code
  4. Version Control: GitHub

The project was built as a prototype without integrating real AI or backend services, focusing purely on the UI/UX design and the user journey from video pause to item search.

Challenges we ran into

  • Limited AI functionality: Since the project is a conceptual prototype, I couldn’t implement real AI-powered features, which limited some aspects of the user experience.
  • Cross-platform compatibility: Ensuring the app works seamlessly on iOS, Android, and Web was a challenge. Lynx's documentation and support were helpful, but adapting the UI to fit across different screen sizes required a lot of iteration.
  • UI consistency: Ensuring a smooth, consistent look and feel across platforms while using Lynx’s components required careful attention to detail, especially when dealing with platform-specific nuances.

Accomplishments that we're proud of

  • Successfully built a cross-platform app using Lynx, achieving near-native performance on iOS, Android, and Web.
  • Created a seamless user experience for transitioning from watching a video to discovering and purchasing items.
  • Demonstrated a conceptual AI-powered UI that integrates smoothly with the content the user is consuming, showing a possible future for e-commerce within social media platforms.

What we learned

  • Lynx is a powerful framework for cross-platform UI development, and I learned how to adapt web technologies (HTML, CSS, JavaScript) to create native-like apps for mobile and web.
  • The process of building a conceptual prototype helped me better understand how to design user-friendly interactions while keeping the technical limitations in mind.
  • I learned the importance of user-centric design, especially in apps that blend content consumption with e-commerce.

What's next for Hello Find Stuff

  • AI Integration: Implementing real AI-powered features to scan and identify items in the video, such as using machine learning models for object recognition.
  • Backend Integration: Adding real-time product data and dynamic catalog updates to improve the accuracy and relevance of the search results.
  • Enhanced UI/UX: Iterating on the user interface to make it even more intuitive and interactive, potentially incorporating voice commands or gestures for hands-free interaction while watching videos.
  • Scalability: Expanding the app to support a wider range of platforms and media types (e.g., live streams, social media posts).

Built With

Share this project:

Updates