-
Desjardins Banking web app challenge
his is the perfect structure for your project documentation or Devpost submission. Since you're tackling the Desjardins Challenge, I've leaned into the "Explorer" theme while keeping the technical depth high.
Here is the narrative for The Chameleon’s Eye:
Inspiration Banking often feels like a chore—static, rigid, and strictly clinical. But life isn't static. We use our banking apps while walking through bustling city streets, in quiet libraries, or on blindingly bright commutes. We realized that accessibility shouldn't be a hidden toggle in a settings menu; it should be a living, breathing response to the user's environment. We were inspired by the "Digital Chameleon"—a tool that survives and thrives by adapting its skin to the terrain.
What it does The Chameleon’s Eye is a hyper-adaptive banking interface that uses real-time environmental data to morph its UI and UX:
Camouflage Mode: Automatically adjusts contrast for sunlight or low-light "temple" environments.
Motion-Aware UI: When the app detects you’re walking (via accelerometer), the UI simplifies into large, high-hit-area "Survival Buttons" to prevent mis-clicks.
Invisible Mode: In chaotic/noisy environments, the app switches to haptic vibrations and gesture-based navigation.
The Captain: A Gemini 3 Flash-powered voice companion that guides you through your "Treasure" (Balance) and "Expeditions" (Transactions) with the wit and charm of a seasoned explorer.
Spy Mode: A quick tilt of the device blurs all sensitive "Gold" amounts to protect your data from prying eyes.
How we built it We leveraged a modern, reactive stack to ensure the "morphing" felt fluid rather than jarring:
Frontend: Next.js 14 and Tailwind CSS for a responsive, high-performance base.
Animation: Framer Motion was our secret weapon to create the "chameleon skin" transitions between themes.
Intelligence: Gemini 3 Flash handles the "Captain’s" personality, translating boring financial data into immersive storytelling.
The "Nervous System": We built a custom Context Engine using native Web APIs (Ambient Light, Web Audio, and Device Motion) to feed environmental data into a global Zustand state.
Accessibility: Built from the ground up with ARIA patterns and WCAG 2.2 standards to ensure that "Immersive" never means "Exclusive."
Challenges we ran into The biggest hurdle was Environmental Noise. Calibrating what constitutes a "chaotic environment" vs. just a loud car passing by required fine-tuning our decibel-averaging logic. Additionally, handling browser permissions for sensors (Camera, Mic, Motion) in a way that feels secure—not invasive—required a thoughtful "Permission Onboarding" flow.
Accomplishments that we're proud of Zero-Latency Adaptation: We managed to make the UI switch modes in under 100ms, making the adaptation feel like a natural extension of the user's surroundings.
The Personality: "The Captain" isn't just a chatbot; thanks to Gemini’s low latency, the character feels genuinely present and helpful without being intrusive.
Truly Hands-Free: We successfully mapped a full transfer flow using only voice and device tilting—no screen-touching required.
What we learned We learned that Context is the ultimate accessibility feature. When you design for the "extreme" user—the one in a roaring jungle or a pitch-black cave—you end up building a better product for everyone. We also discovered the power of Gemini 3 Flash in maintaining a consistent "Brand Voice" across complex user journeys.
What's next for Desjardins Challenge Biometric Voice-Prints: Implementing unique voice signatures to authorize "Gold Transfers."
Predictive Context: Using AI to predict when a user might need "Spy Mode" based on their location history (e.g., a crowded subway station).
Wearable Integration: Bringing the Chameleon's Eye to smartwatches for a truly "Invisible" banking experience.
Log in or sign up for Devpost to join the conversation.