Mobile App Design | uX | UI

QuickHearts

For a very long while, I've had this idea of creating a speed dating app after going through some...interesting...dating app experiences of my own. QuickHearts combines elements of speed dating with traditional dating app experiences by meeting people virtually via 10-minute video chats.

View prototype

Overview of Content

Project SummaryBrainstormingCompetitive AnalysisAudienceUser FlowWireframesDesign
three girls

Project Summary

MVP (Minimum Viable Product)

A dating app where people meet each other first via integrated video chats.

Tools

Figma and FigJam

Goal

Create a dating app that avoids the overwhelming "human window shopping" experience and produces genuine human connection from the start.

How It Works

Sign up for a session and meet with six different people via a video chat, talking to each one for 10 minutes. After the session, you can decide who you'd like to match with based on the chat and their profiles. If a successful match is made, contact info will be shared between you and your match.

Brainstorming

To get my thoughts in order, I first performed a stream of consciousness and then organized each thought into buckets.

I noticed I had several questions written down, which led me to come up with this central question:

How can we combine traditional speed dating and dating app experiences in a way that encourages meaningful and fun conversations within minutes while avoiding turning people into products?

Competitive Analysis

There are little to no current platforms out there that host/perform virtual speed dating via an app. Most speed dating events overall are also done in person.

Therefore my main competitors are a traditional dating app (Hinge), a speed dating app (Spark), and a speed dating organization (NY Minute Dating).

I also created a checklist of certain features that were common among dating platforms overall.

Audience

Based on my experience, my peers', and research through testimonials and forums, I created three different personas to further solidify my understanding of why and how this project could benefit people: The Dating Newbie, The Tired App Veteran, and The Adventurous.

User Flow

The next step for me was to create a flow to map out the architecture of the app. This was the first draft of the flow:

Obviously, there were several missing pieces, so I made some adjustments:

Wireframes

Once I had a clear enough idea of what I wanted this app to look like, I started creating wireframes on Figma, and set the screens up to match as closely to the user flow as possible.

I also used these wireframes to play around with typography as I have a tendency to create numerous versions of design. This was basically my way of getting a head start on some UI.

For example, I had two different versions of a form that users would fill out at the beginning of account creation. I settled for the second version where the form was broken down into multiple pages. Of course, this will look significantly different in design.

Design

Onboarding

The onboarding process includes a form asking for very basic information (first name, birthdate, gender identification, etc...), preferences, and six questions with responses in the form of either multiple choice or sliders.

Data Visualization for Profiles

As a way to apply what I've learned for my masters' degree in Data Analytics & Visualization, I incorporated a couple of interactive visualizations into the user profiles. Not only are a few of the user's responses displayed visually, but they can also see how their responses compare to others.

Registering for Sessions

Users can register for a session to meet people via video chat. After the even takes place, they can choose whether to match or swipe left on the participants they've talked to. Once a match has been made, contact info is shared between both parties.