Where Travel Meets Tokens: Designing the Fireflies Raffle Experience 🥮

Design Goals

The Fireflies team aimed to increase engagement and $FFT token utility by introducing a gamified raffle experience. However, the challenge was to create a user experience that:

• Educates users on how the raffle system works

• Provides a seamless Web3 ticket purchase experience

• Differentiates live and upcoming raffles

• Motivates users through visuals, transparency, and social sharing

My Role

As the UI Designer, I was responsible for:

• Designing user flows across the raffle journey

• Creating a visually engaging, token-integrated interface

• Ensuring clarity across all raffle states (Live, Upcoming)

• Supporting Web3 wallet integration and user feedback mechanisms

Design Process

1. Research & Planning
   I began by studying Web3 competition platforms like GalaBid and Nitrous Competitions, as well as analyzing Fireflies’ existing design language. I identified the following priorities:

   • Token awareness and usage

   • Simplified raffle onboarding

   • Real-time raffle status tracking

   • Encouraging social sharing post-win
     
     

2. Research Insights

   Research revealed that many Web3 users struggle with overly complex interfaces and information overload. This highlighted the need for a simplified and progressive disclosure design approach.

   Market findings also showed the importance of flexible marketing integration to maintain user engagement. The addition of dynamic banners on the homepage enables the marketing team to experiment with promotional strategies without requiring major UI changes.

   The decision to use modals for the “How It Works” section was also informed by the need to avoid overwhelming users with too much content upfront, allowing details to appear only when needed.

   In summary, a lightweight, adaptable interface that supports agile marketing strategies can improve both user retention and campaign effectiveness.

   
   

3. User Flow Mapping
   
   I mapped the user journey based on wallet connection status and raffle phases (Live, Upcoming, Ended) to ensure clarity at every step, while maintaining a seamless user experience despite the blockchain complexity.

   User flow:

   

   These flows ensured that users are always informed, never lost, and encouraged to continue participating.
   
   

4. UI Design Highlights
   
   
   

   • Mainpage
     - Hero carousel showcases prize illustrations and CTA.
     - Dynamic banners added to provide the marketing team flexibility to run promotions, an important strategic tool for experimentation and engagement.
     
     

     

     - Tabs to filter between Live and Upcoming raffles.
     - Compact raffle cards show ticket prices, timers, and progress bar, making it easy for users to browse.
     
     

     

     - “My Raffles” section is built directly into the homepage, allowing users to track all their entries, wins, and participation history in one glance.
     
     

     

     
     

   • How It Works
     - A 5-step visual guide with friendly copy.
     - Clean, lightweight modal design for easy access without interrupting the main flow.
     
     

     

     Why use a modal?
     I chose a modal to avoid overwhelming users with too much information upfront. The content only appears when requested, keeping the main UI clean and focused.

     
     

   • Raffle Detail Page
     - Dynamic timer blocks based on raffle state (Live, Upcoming, Ended)
     - Discount info for multi-ticket purchases
     - Wallet-connected UI showing real-time token balance
     
     

     

     
     

   • Visual Language
     - Soft gradients and travel-themed illustrations
     - Rounded corners and minimalist layout for clean hierarchy
     - Playful confetti and celebratory colors for the winner announcement

Main Flow Prototype

To demonstrate the overall user experience, I created a high-fidelity prototype that showcases the main user flows from browsing raffles, purchasing tickets, and viewing results.

This prototype highlights how design decisions around layout and progressive disclosure come together to create a seamless journey

Results

This design system:

• Makes raffle participation intuitive and visually exciting

• Increases transparency through blockchain-integrated draw states

• Encourages recurring engagement with progress tracking and social sharing

• Aligns Web3 token mechanics with a lifestyle-focused UX