
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.