Exploration of "Bits Life" - A Dating Web App UX/UI

innovative mobile dating platform focusing on connections through location-based encounters. The app targets users who are seeking relationships, casual dating, or friendships, and integrates a sleek, minimalist design to enhance the user experience.

The goal was to design a modern, intuitive interface that not only facilitates easy navigation but also creates a seductive, immersive experience through dark-themed visuals and vibrant green highlights. The design plays with human emotions, subtly invoking desire and curiosity while prioritizing user security.

Explore Connections (Stories-like Interface)

• Visual: A horizontal scroll of user profiles appears, resembling popular stories interfaces from social media apps, allowing users to browse and connect with others. The dark background creates intimacy while the glowing borders of user profiles provide a sense of discovery.

• Purpose: Encourages users to interact with others in a way they are already familiar with, fostering engagement.

• Key Elements:

  • Horizontal user profile carousel.

  • Interactive "+" and "-" buttons to quickly add or remove people from the connection list.

• UX Strategy: This screen capitalizes on social media-like interactions, offering a familiar experience to users who are comfortable with Instagram-like stories.

Authentication Screen

• Visual: The first screen introduces the app with a mysterious and sensual vibe, featuring a fingerprint icon as the focal point. The user is prompted to unlock their desires, symbolized by the fingerprint icon, indicating security and personalization.

• Purpose: The use of dark tones and the minimalistic approach emphasizes privacy, a key concern in dating apps. The green highlights draw attention to the action buttons like "Next" and "Skip for Now."

• Key Elements:

  • A glowing fingerprint icon.

  • Main Call to Action (CTA): "Next" for onboarding.

  • Skip option: "Skip for Now."

• UX Strategy: This screen immediately connects with users by offering them control over whether they want to proceed or skip.

Purpose Selection Screen

• Visual: The second screen invites users to define why they are here, providing three options in the form of radio buttons: “Here to Date,” “Make New Friends,” and “Ready for a Relationship.” Each option is color-coded with green to signify selected items.

• Purpose: This segment personalizes the user experience by tailoring it to their specific goals. The icons next to each option make it visually clear, helping users navigate with ease.

• Key Elements:

  • Purpose options with clear, concise text.

  • A progress indicator to show user onboarding steps.

  • “Next” and “Skip for Now” buttons.

• UX Strategy: Users can quickly choose their purpose without overthinking, ensuring a smooth entry into the app without feeling overwhelmed. This allows the app to refine their matches based on their selected purpose.

User Verification Screen

• Visual: This screen displays a profile picture placeholder with a CTA to verify the user's phone number. The green “Start Swiping” button indicates the next step for user interaction.

• Purpose: By requiring phone number verification, the app emphasizes security and authenticity.

• Key Elements:

  • User’s profile photo placeholder.

  • CTA: “Start Swiping.”

  • Skip option: “Skip for Now.”

• UX Strategy: This step not only promotes trust among users but also signals that the app is serious about maintaining a high-quality, safe environment for all participants.

Subscription Plan Screen

• Visual: The final screen offers users premium plans with three clear pricing options. Each plan box features a set of benefits, with the most affordable plan highlighted in green to guide user choices.

• Purpose: Monetizing the app by offering users advanced features through paid subscription tiers, such as "Unlimited Filters," "See Who Liked You," and an ad-free experience.

• Key Elements:

  • Three subscription plans with bullet-pointed benefits.

  • CTA: "Choose Plan."

  • Monthly subscription costs displayed clearly.

• UX Strategy: By highlighting the most affordable plan with a green border, users are subtly encouraged to choose that plan. The clear layout and description of features minimize confusion and help users make informed decisions.