Spiral Animation Design

I designed and prototyped the spiral animation that guides users through the matching process. The spiral visualizes proximity to matches - as users get closer, the animation responds with dynamic visual feedback and sound cues.

Created interactive prototypes in Figma with animated transitions, then implemented the final design in Flutter.

Spiral Animation in Figma

I designed the spiral symbol matching system in Figma. When two people with the same opinion are nearby, they draw a spiral symbol on screen. A radar shows vibrations and beeps indicating how close they are to each other. I tested vibrant vs pastel colors and iterated on the design across sprints.

Spiral Animation Concept Figma Spiral Prototype Spiral Design Iteration
Scrum 3 Spiral Design Spiral Animation Flow Final Spiral Concept

Complete Figma Prototype

The final spiral animation design shows how users draw the symbol with their hand to find their match. The radar screen displays two people moving closer with beeping sounds as proximity increases.

Final Figma Design

Working Prototypes

I iterated on the spiral animation across multiple sprints, refining the visual feedback and sound integration based on user testing.

Firebase Database

I implemented the real-time database using Firebase Cloud Firestore. The database handles user profiles, preferences, and location data with instant synchronization across devices.

Cloud Firestore Real-time Sync Authentication

Geolocation System

Built the location-based matching system using GPS tracking. The system calculates distances using the Haversine formula and provides real-time "hot/cold" feedback as users approach their matches.

Geolocator GPS Tracking Haversine Formula

Tech Stack

The project was built using modern mobile development tools and cloud services.

Flutter Dart Firebase Figma Geolocator GitLab

View Full Project

Check out the code repository