InCo. Collective Interactive Bingo

Overview

Portrait Illustrations drawn by myself

An immersive responsive website and interactive bingo game for
Lesbians Who Tech & Allies - Pride Summit, June 2024

  • My Role: Illustrator & Co-Lead UI designer

  • UX/UI Team: Olivia Servaes, Liz Baranowicz, Julie Nguyen, & myself

  • Time: 3 months

  • User group: Conference attendees

InCo. (Interconnected Collective) wanted to gamify the LWT & Allies conference encouraging new connections with like-minded individuals through a fun & immersive virtual twist on our grandparents’ go-to game.

The beginning of the UX/UI team’s process began with emphasizing how fun interactive bingo could be

The UX/UI team was working on a landing page to draw in users to click “play bingo.” The initial sitemap was created and the primary & secondary colors were established, along with the logo.

When I joined the project:

To fulfill a UI draw for the bingo player

I created custom illustration assets (drawn by me) that fit within the pre-established design system for the landing, about page, and “interested in joining us” pages.

A few illustrations inspired by the established design system:

Peek of my illustrations interacting responsively!

  • I began integrating the background oblong shapes to the design to mimic the curves of the “bubblegum shapes” in the illustrations.

  • As a team we wanted the design to reflect our individuality as queer or ally “digital-creators-in-tech.”

  • The UX/UI team and dev team both wanted the clouds and waves animated to move across the hero image and background.

KEY DESIGN TAKEAWAYS

Gamifying the
about page

The UX/UI team wanted to highlight my (14) drawn portraits of each individual InCo. contributor but also showcase each person’s professional headshot.

We chose to tie back in the virtual bingo game to solve this by creating a user flow to learn more about a contributor. A user must interact by hovering and then clicking on a contributor, (similar to a bingo card), in order to learn more about them.

Let’s talk about virtual bingo!

Hover State Detail

KEY DESIGN TAKEAWAYS

  • All of these bingo examples are in dark mode (we do have a light mode option!).

  • The new integration of a leaderboard (over last year’s bingo version) was the UX team’s biggest focus on how a user logs in to create a fun username.

  • Definite 90s vibes and neon nuances resonate with the Lesbian Who Tech & Ally’s current branding.

Bingo Detail

Bingo Game Reactions Coming Soon!

Bingo Game Reactions Coming Soon!

Next
Next

LGBTQ+ Superhosts on Airbnb