OkCupid: Profile Edit

Overview

Profile Edit was a project to comprehensively improve the process of updating your OkCupid profile. When we began, the technology backing this page was lacking — old-school forms posting with full page loads — so there was room for meaningful improvement on both the tech and U/X sides.

The tech

I wrote a new set of API endpoints (in a house variant of express) as well as a test suite (in mocha). They accept human-readable but machine-ready values, convert them to the format that the back-end requires, and, upon success, return the updated values in a variety of formats.

For the front-end, React was a natural choice for its ability to update a store and having the interface reflect the new values. Having written React forms before, the front-end team decided to use this as an opportunity to make a set of reusable form elements, which I wrote and are now used across OkCupid’s desktop site, mobile web site, and webviews within the native apps.

How it works

The interactions on your profile range in complexity. There are a plethora of simple details that can be updated, like your height or relationship status.

There are also more complex flows, like searching for a user to indicate that you’re in a relationship with them. This multifaceted flow involves username search, a pending state while your partner confirms the relationship, and a confirmed state which facilitates the “breakup flow” should things go south.

Results

After deploying the new endpoints and desktop interface, both the iOS and Android teams began making use of the endpoints in their profile edit views.