Spring 2019 · Mobile 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: 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.
#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.
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.
My role consisted of several phases:
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.
Our team ended up choosing a React Native app to:
Accordingly, I referenced React Native components to ensure my designs were easily adaptable to this UI library.
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.
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.
Once an audience member finishes the questionnaire, they're thrown into a simulated dating app environment, which allows them to:
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.
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.