Fate Framed

Turn your daily choices into a portrait of risk

Comment

Inspiration

We were inspired by WEHack's Night at the Museum theme and really wanted to incorporate some kind of gallery display and touring museum aspect.

What it does

Fate Framed is an interactive risk assessment experience that transforms user behavior into a personalized “risk portrait.” It provides 3 short quizzes over topics of car, home, and human life to generate an overall risk score to help users understand what contributed to that risk, and show users how they can improve in certain areas to lower their risk score. The experience is guided by Félix, an adorable teddy bear. includes dynamic feedback, and ends with a personalized breakdown of key risk drivers and actionable recommendations.

How we built it

  • Frontend: HTML, CSS, JavaScript -Figma: UI planning and Devmode handoff
  • Backend: Python Flask
  • API: Google Gemini

Challenges we ran into

  • Handling state management across multiple quizzes
  • Using local storage to save the final risk portrait data to display in the gallery
  • Mapping and changing user inputs behind the scenes to the backend for AI analysis
  • Handling async API calls smoothly, we tried to prevent long waiting times by adding a loading screen
  • UI layering with overlapping elements and not ideal z-indexes

Accomplishments that we're proud of

  • Creating a cute ui and adorable mascot, Félix
  • Implementing Figma layouts
  • Setting up dynamic DOM updates!!
  • Set up the whole backend, working with minimal errors in 24 hours
  • Designing a modular scoring system that works both with and without a backend -Creating a fully immersive, narrative-driven experience over a standard quiz

What we learned

  • The importance of structuring data consistently between frontend and backend
  • How to manage complex UI states in JavaScript
  • Using Gemini API to provide feedback on how to improve based on your current risk score and calculate the top drivers for that risk score

What's next for Fate Framed?

Honestly, we had so many ideas to incorporate into this project! We have plans for adding an AI assistant, Félix chatbot, as seen in our Figma wireframes and gemini_service.py file(setting up chatbot code), to talk to directly about questions and assess your risk overviews and scores more deeply. Secondly, incorporating ElevenLab's Generative Voice AI so our little tour guide Félix, can be audio accessible for those who need it as well! Lastly, we started to update the weather in a timely manner using WeatherAPI to factor in our risk score. Given more time, we would add these key features to our projects!

Share this project:

Updates