#DateMe App Design

Spring 2019 · UI/UX 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 was in designing the audience-participatory mobile app experience, working with Sam Hains, who was in charge of the interactive tech for the show, as well as a backend and frontend developer.

Background

#DateMe: An OkCupid Experiment is a musical comedy show that started with a three-year run in Chicago, and moved to 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.

The mobile app was a solution for integrating audience members the show, allowing people to create their own dating profiles to potentially serve as improv material. The mobile app also delivered timed, personalized content during certain points in the show.

I found that working on #DateMe was pretty unique compared to other types of design jobs I've had. As part of interactive theater, this app design had unique goals, priorities, and time and budget constraints - perhaps not as common in other UI/UX work that focuses on shipping a live, usable product.

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

The design of the app was highly collaborative - 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.

One of the first questions we answered was: what platform should this be in? We ended up creating a React Native mobile app. We opted for a mobile app as opposed to a web app, so we could use push notifications as a point of engagement during the show, and we chose React Native as a way to account for both iOS and Android users with minimal developer resources. This decision impacted my work, as I worked to make my design fit into the existing React Native UI components as much as possible.

Designs

Onboarding

Like many real dating apps, the #DateMe app has an onboarding experience centered around setting up a dating app account. The first portion focused on creating the profile through a series of questions and taking a profile picture with the camera, and the second portion focused on a dating questionnaire that captures the participant's personality.

Throughout this flow, we incorporated the writer's comic bits and wanted audience members to make profiles that were funny and not too curated (which is why we chose a "dark UX" pattern of not allowing someone to navigate backwards).

hifi-onboarding-flow

Main App Experience

Once an audience member finishes the questionnaire, they're thrown into a simulated dating app environment. First, they see their dating profile, which is populated with their photo and a mad-libs style bio from some of their responses. They can choose to share their profile to social media, which results in generating an image of their profile (unfortunately, the image generation was lower priority and was not ultimately featured in the live app).

After entering the show-specific code, which was displayed inside the theater, audience members enter a Tinder-like environment and are able to swipe left and right on their fellow audience members. For the sake of simplicity, swiping did not trigger any real matching or messaging with audience members.

hifi-main-flow

In-Show Interactions

One priority of the app was to deliver timed notifications specific to points in the show. At some points in the show, audience members get messages from characters in the show.

I designed a simulated messaging environment to hold the messages of these characters, and also explored how a profile page could be modified to reflect a match.

timed-messages

Another part of 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.

dating-species