Baron Banana Project
Menu
Curiosity Deck (Case Study)
Curiosity Deck is a web app that delivers random topics across a diverse range of subjects, offering a fun and interactive experience similar to Tinder. Users can swipe to discard or save topics, and if they find a topic intriguing, they can dive deeper by engaging in AI-powered conversations designed for convenient exploration.
[June, 2024] Currently, available as a web app, Curiosity Deck has plans to expand to mobile with additional features depending on market reception.
Project Objective
The Curiosity Deck project aimed to create a fun and interactive platform that nurtures users' curiosity and encourages ongoing learning. Inspired by Tinder's swipe functionality, the app allows users to interact with cards by swiping left to discard, swiping right to save them to a favorites list, and tapping a "Explore Card" button to dive deeper into any card instantly. The goal was to blend education with a playful user experience, making learning both engaging and personalized.
My Role in the Project
As this was a side project, I was solely responsible for every aspect of Curiosity Deck's development. My roles included conceptualizing the app's functionality, designing the user experience (UX) and user interface (UI), implementing the technical architecture, integrating AI features, and managing all testing and iterations. From start to finish, I handled the entire project independently, ensuring that each element aligned with the overall vision.
Why I Developed the App
Curiosity is a powerful driver of human progress, benefiting our lives, learning, and innovation. It stimulates creativity, enhances problem-solving skills, and keeps our minds active. In today's information-rich world, we're often distracted by sensational news, short videos, and content that doesn't contribute to the development of our curiosity or the enrichment of our knowledge. Curiosity Deck was created to counteract this trend, providing a fun and easy way for users to satisfy their curiosity and explore meaningful content.
Problem the App Solves
Curiosity Deck addresses the challenge of keeping users engaged with content that nurtures their curiosity rather than falling into the trap of mindless scrolling through social media or harmful content. By providing a platform where users can explore topics they're genuinely interested in, the app not only satisfies their curiosity but also enhances their motivation and enjoyment. The AI-driven interactions are designed to offer personalized, in-depth insights, making the learning process more engaging and accessible.
Target Audience
The primary target audience for Curiosity Deck is the younger generation, who are particularly vulnerable to the overwhelming influx of content that doesn't contribute to their curiosity or knowledge growth. This demographic often finds themselves drawn to short, superficial content that offers little educational value. Curiosity Deck aims to provide a more meaningful alternative, encouraging them to explore and learn in an engaging way. However, the app also has the potential to appeal to a broader audience—anyone with a desire to discover and learn about the world for entertainment. Currently, the app is available in English and Vietnamese, with plans to expand to other popular languages in future phases based on market acceptance.
Features
Fun Swipe Feature
Enjoy a playful interaction with content, similar to Tinder's swipe functionality, allowing you to quickly save or discard topics.
AI-Powered Conversations
Engage in in-depth discussions powered by AI to explore topics of interest further.
Supportive Question System
A curated set of questions guides you in delving deeper into the content, making exploration seamless and intuitive.
Personalized AI Responses
AI provides tailored responses based on the personal information you share, enhancing the relevance of the interaction.
Logo Inspiration
The logo of the Curiosity Deck app is designed to represent the image of a brain intertwined with octopus tentacles. This imagery is inspired by the metaphor of how the prefrontal cortex (the region of the brain responsible for conscious thought) operates. When you focus on thinking or learning something new, this region of the brain gathers information from your senses - such as sight, smell, hearing, etc., - to long-term memory, and other brain regions. It's like the octopus' tentacles, reaching into different areas of the brain to retrieve the necessary information for processing.
Curiosity Deck was created with the purpose of enriching this treasure trove in your long-term memory, so that this "octopus" can work more effectively.
Technology
React JS
Front-end
NodeJS + ExpressJS
Back-end
Firebase
Hosting, database
Google Gemini API
AI agent
Google OAuth
Sign-in provider
Google Cloud
Serverless platform
Google Analytics
Traffic Measurement
MUI
UI component library
Testing
Unit Testing
Each component of the app was tested in isolation to ensure that all functionalities operated correctly and efficiently.
Integration Testing
I tested how different modules and services within the app interact, ensuring seamless integration between the front-end and back-end, particularly focusing on AI-powered interactions and data handling.
User Testing
For user testing, I shared the app link and feedback form with about 10 individuals, allowing them to explore Curiosity Deck and provide insights on its usability and overall experience. This feedback played a crucial role in refining the user interface, enhancing features, and improving the app's performance to better meet the needs of the target audience.
System Structure and Architecture
Overall Structure
The project employs a microservices architecture, where each service operates independently and communicates with others via RESTful APIs. This modular approach enhances scalability and allows for independent development and deployment of services.
Front-end
The front end is built using a Component-Based Architecture with React, which promotes reusability and maintainability. The use of JSX syntax enables rapid development by allowing HTML-like code within JavaScript. Although TypeScript was considered for its benefits in code accuracy and maintainability, JSX was chosen to ensure efficient time management across all project responsibilities.
Styling with MUI (Material-UI)
MUI provides pre-designed UI components that required minimal customization to align with the project's design. This choice allowed for a consistent and visually appealing user interface while significantly speeding up the development process.
Back End
A simple backend was developed using Node.js and Express.js to handle data processing between the front end, database, and Google Gemini API. This backend also stores essential designed prompts for AI interaction, serving as a crucial part of the data flow and processing.
The project leverages Google Serverless Cloud Functions for backend tasks. This choice offers several key benefits, such as: cost optimization, scalability, and efficiency. scalability, and efficiency.
Authentication
In the initial phase, Firebase Authentication and Google OAuth were utilized to streamline the development process and enhance security. This approach is well-suited for the target audience, primarily young users, without the need to develop a separate login and registration flow. Future plans include expanding the authentication methods to support Email, Facebook, and Apple, broadening the user base.
AI Integration
The system integrates with Google Gemini API through the backend. The front end sends requests, including user IDs, topic IDs, and specific queries, to the backend. The backend retrieves relevant user data from the database, combines it with designed prompts, and optimizes this data for AI processing, ensuring that responses are highly personalized and effective.
Data Flow
The backend serves as the central hub for data processing and connection, facilitating communication between the front end, database, and Google Gemini API.
User data such as email, displayName, and photoURL (avatar) retrieved from Google OAuth is stored in the database. Additionally, the system tracks and stores user interactions like: card-rejected (to prevent reappearance this card or relevant cards), , saved cards (to show in the saved list and display more relevant card), and explored cards, along with the history of AI conversations of this card.
To personalize the experience further, the front end includes a form where users can provide optional information such as age, occupation, education level, language, and a brief self-introduction. This data is then utilized to enhance AI responses, tailoring the content to each user's specific background.
Before users delve into any content, they are asked a quiz question to gauge their knowledge level on the subject. This input is critical for the app to offer appropriate knowledge depth and an effective exploration path tailored to the user's learning needs.
Updates
Why
After analyzing user feedback and app usage data, I implemented several improvements to enhance the app’s functionality and user experience.
Revamping Content Card Generation to Spark Curiosity
Problem: Data revealed that most content cards generated by the app’s Generative AI were duplicates, with users often receiving similar cards. This not only resulted in wasted tokens but also reduced content diversity.
Solution: I processed the data to filter out duplicate content cards that had been previously generated for all users, ensuring uniqueness. Furthermore, I expanded the collection by generating additional unique content cards, bringing the total to 500. These cards cover a diverse range of topics to deliver a richer and more engaging browsing experience.
Adjusting Content Relevance for a Broader Audience
Problem: Most content cards in the initial version focused on groundbreaking inventions and significant advancements, overlooking intriguing everyday knowledge that resonates with users.
Solution: I refined the Generative AI prompt to create an additional 500 content cards centered around fascinating aspects of daily life with more curiosity-piquing titles. These new cards were added to the database, and the app now randomly displays cards with a balanced probability of 50/50 between the two content directions.
Improving Data Parsing and Utilization from Generative AI
Problem: A persistent challenge in the app’s development has been ensuring that the application can consistently read and analyze data returned by the AI or limit the AI's output to specific formats that the app can reliably process. Without controlling the output of Generative AI, occasional instances occurred where the app was unable to parse the returned data, significantly impacting the user experience. Fortunately, recent updates to the Gemini API introduced the ability for developers to define specific data formats for AI outputs, allowing the application to process and utilize this data effectively before presenting it to users.
Solution: I updated the AI prompt to specify a structured format for the returned data. I also improved the app’s data parsing, analysis, and display functionalities to ensure a smoother and more insightful user experience.
Code Optimization
I made additional improvements to the app’s codebase, focusing on enhancing its robustness and efficiency.
Conclusion
With these updates, I aim to provide users with a more meaningful and enjoyable app experience while improving the overall performance of the application.
Thank you for taking the time to go through this case study.
Let's explore the next content.
Let's explore the next content.
Product Design and Development Works
Curiosity Deck
An infinity deck of cards that satisfy your curiosity
Mind Flow Diver
A time tracker encourage you dive deeply into your mindflow
Momento Mori
An app helping you stay mindful of your life by focusing on its deadline.
Women Love Herbs
A herbs library that help women learn and utilize herbs in everyday life
© Baron Banana 2024 - All rights reserved
Switch theme ➡️