#DateMe App Design

In spring 2019, I did freelance design work for #DateMe: An OkCupid Experiment, an off-Broadway musical comedy show combining skits and improv about online dating.

My contribution: Iterating to create hi-fidelity wireframes for the participatory mobile app for audience members.

The team: I worked directly in the show's interactive tech team led by Sam Hains, collaborating with a backend and frontend developer as well.

Background

#DateMe: An OkCupid Experiment is a musical comedy show that debuted in New York City in summer 2019. For the NYC adaptation, there was an opportunity to bring in audience participation, as well as modernize the technological themes to match 2019's world of mobile dating apps like Tinder.

Our goals

• Playfully integrate the audience into the show, potentially incorporating them into improv material.
• Deliver timed, personalized content at key points in the show.

Constraints

As part of interactive theater (as opposed to corporate or tech environments) we worked under a limited budget and a tight production timeline of 2 to 3 months - which were formative to the decisions (and cuts) we made.

Relatedly, I'd also like to note that my designs here may differ slightly with the actual app in some areas, as a result of those limitations of time and budget.

Process

My role consisted of several phases:

• Gaining familiarity with the show by watching past performances.
• Meeting with the team lead to discuss and refine the platform of the experience, user flows, and scope of interactivity.
• Iterating on designs, gathering feedback from stakeholders (such as the show's writer, Robyn) and my team.
• Handing off designs, as well as supporting the front-end developer as they brought designs to life.

Collaborating with writers and engineers

My work started with many discussions between the interactive tech team (as well as the original writer of the show) that negotiated the writer's vision with a usable app that could be realistically built in the span of two to three months.

Keeping modularity in mind

Our team ended up choosing a React Native app to:

• Leverage push notifications as a way to pull audience members back into the app in the middle of the show.
• Optimize for both iOS and Android users , while minimizing developer reasources - we wanted all audience members to participate, but had limited developer resources.

Accordingly, I referenced React Native components to ensure my designs were easily adaptable to this UI library.

Designs

Creating a "dating-profile"

Like many real dating apps, the #DateMe app has an onboarding experience centered around setting up a dating app account, incoporating scripted comic bits by the show's writer.

Optimizing for comedy

We wanted audience members to make profiles that were funny and vulnerable - not overly curated. That's why we chose a "dark UX" pattern of not allowing someone to navigate backwards.

A dating-app environment

Once an audience member finishes the questionnaire, they're thrown into a simulated dating app environment, which allows them to:

• View and share their dating profile, which is populated from a mad-libs process from their prior questionnaire.
• Swipe on other audience members after entering a show-specific code, which allows them to explore who else is at the show (but did not trigger any real matching or messaging with audience members).

In-Show Interactions

Messages from characters

At specific points in the show, audience members get messages from characters in the show. I designed a simulated messaging environment to hold these communications, also exploring how a profile page could be modified to reflect a match.

Dating archetypes

Another moment in the show focused on seven common archetypes found in dating profiles. The responses from the match questionnaire were eventually used to assign every audience member one of these seven dating "species", and I designed how this reveal could appear in the app visually.