Case Study:

Hot & Cold Dating App


My Role

UX Designer, UX Researcher

Team

Xio Santaella, Timothy Lin, Kanchan Gaur

Duration

2.5-week sprint

Tools

Figma, Sketch, Android Studio, Slack, Google Suite


The Client

Our client was a successful tech entrepreneur who recently sold her sustainable fashion startup. She tasked us with building out her team’s new dating app concept, Hot & Cold.

The Project

Hot & Cold set itself apart from other dating apps by prioritizing immediacy, spontaneity, and in-person connection. Users meet quickly based on proximity to gauge their chemistry, instead of spending days messaging back-and-forth.

Today, the dating app market is saturated with apps that are similar to each other with only slight differences. Crucially, dating apps no longer elicit the excitement and sense of novelty that they had when they took over the dating scene in 2014. A trend of ‘dating app fatigue’ has set in for many users, and we tried to find ways of injecting new life into the dating app field.

Dating apps no longer elicit the excitement and sense of novelty that they had when they took over the dating scene in 2014

UX Challenge

My team was tasked with designing the User Experience and User Interface of the entire Hot & Cold dating app for Android (our client’s MVP preference) - beyond the rudimentary prototype that was currently available for our reference.

Our client requested that we find ways to incorporate gamification elements (‘Pokemon Go meets dating apps’) to make the interactions more dynamic and engaging for target users in their 20’s-30’s.

The Process

My 4-member team took part in a 2.5-week Agile sprint consisting of researching and designing the Hot & Cold app based on our users’ desires and feedback. We each took part in every step of the process together, at times taking charge of specific tasks.

Our process was based on the British Design Council’s design double diamond:

Image based on double diamond design by WasabiDesign

Research & Empathy

Analyzing Hot & Cold

We first examined the basic Hot & Cold app MVP with a Heuristic Evaluation based on Jakob Nielsen’s heuristics. The app was rudimentary with only a few basic pages:

A sampling of the six pages that existed in the original Hot & Cold MVP


Some issues jumped out immediately — for instance, we were concerned that the location sharing feature that the Hot & Cold app relied on might pose a safety risk for users, which later proved to be warranted.  

 
Screen Shot 2020-02-11 at 5.28.22 PM.png
 

In order to compare Hot & Cold with other dating apps on the market, we ran a competitive and comparative analysis and measured it against its competitors, including Hinge, Bumble, Tinder, and Coffee Meets Bagel.

We noticed several discrepancies, including the fact that Hot & Cold was missing most steps in the onboarding process, filters for finding other users, and Settings/Preferences pages.

We also examined Pokemon Go per our client to see what gamification inspiration we could glean from it.

Dating App Woes

We conducted user interviews and ran usability tests with 12 target users who had recent experience using dating apps, to hear their thoughts about the apps and the Hot & Cold concept.

Users generally expressed negative feelings about dating apps - particularly those who were not brand new to the scene. Users commonly expressed frustration with the shallowness, ghosting, and lack of commitment that apps seemed to foster.

Screen+Shot+2020-05-08+at+2.15.55+PM.jpg

“It’s awful. It’s a necessary evil. I think it’s a quick fix,

like fast food for dating.”

-Anonymous interviewee, 33, discussing dating apps

Users also validated one of the essential concepts that Hot & Cold is based on — that users feel in-person interactions are the ideal way to gauge a real connection.

One of the major takeaways was users’ safety concerns with Hot & Cold, confirming our own misgivings. Target users, particularly women, expressed fears about others being able to know exactly where they are located by viewing the app’s map — potentially even figuring out where they live. We learned we would need to make adjustments to ensure this app’s safety and viability, while still preserving its immediacy.

We also ran task analyses with our target users using the preliminary Hot & Cold prototype, and they faced several issues navigating the app. They had difficulties locating others users, creating their profiles, and finding any settings or editing their profile.

Research Synthesis

With the extensive qualitative data gathered from our user interviews, my team ran several rounds of affinity mapping to find overarching themes. This helped us share a better grasp of our target users’ preferences, values, and pain points in dating apps.

Combining the takeaways we gathered about our target users through affinity mapping, we created our user persona, Mara. Returning to Mara regularly throughout our design process helped us focus on our users and ensure all of our decisions were ultimately benefiting their experience with Hot & Cold.

With our target users at the forefront, we were able to now formulate our overarching goal-

How might we help users efficiently and safely meet nearby matches that translate to meaningful relationships offline?

Ideation & Design

Equipped with sufficient research to inform our decisions, my team conducted several time boxed design studio sessions to brainstorm potential layouts for Hot & Cold’s main pages.

We first explored options for the most challenging page, the map. Our client requested that the map in particular include gamification elements and heat zones to indicate where more users were located. We also wanted to feature nearby users without risking their safety by sharing their location, per our users’ concerns. We were also limited by our programmer’s technical capabilities and budget, and so we could not achieve the map visuals of their inspiration, Pokemon Go, at this time.

Pokemon Go gameplay map — our client’s inspiration

Pokemon Go gameplay map — our client’s inspiration

 After a couple rounds of rapid prototyping, my teammates and I voted on a design for a ring of nearby matches spinning around a user’s icon. This meant no user locations were shared, yet users could feel immediacy in knowing who is in their general vicinity at the moment. As the user moves toward busy “heat zones,” their suggested matches continually update according to location.  


Sketches for potential map and user profile layouts

 

We sketched out the rest of the app together on a whiteboard, partially following norms we observed in most dating app competitors in order to retain familiarity amid the many new features of Hot & Cold.

Our client approved our drafted designs and all of the potential gamification ideas we pitched, asking to try implementing them all in some way. This posed a complication because my team wanted to avoid a case of “featuritis” with the app, overwhelming users with too many gamification elements. Yet soon after running user tests and better understanding our programmer’s technical capabilities, we were able to whittle down the app’s features.

Our client also took the news about users’ safety concerns well and was very open to more secure alternatives.

When we agreed on the designs, I sketched out paper prototypes of our pages to test with users.

Paper prototypes

Testing & Iterating


Now that our prototype designs were approved, we administered paper prototype tests with target users.

Some users indicated they wanted to complete more of their profile during onboarding, so we front-loaded more profile creation features. Yet we tried to follow other dating apps’ example by leaving some of the more detailed preferences and profile information for users to adjust after signup. This is because the priority is to convert new user signups first and foremost, and not to scare visitors away before they finish registering with overly complicated onboarding.

pprototype2.jpg
 
 
Large+JPG-Aro+Ha_0428.jpg

Multiple users were confused about the functionality of the map page when they first encountered it, so we added quick introductory instructions.

Users generally enjoyed our gamification additions. We included games such as Two Truths and a Lie to lighten the energy around dating apps again, while helping matches get to know each other better. 

However as one user aptly observed, there are already a lot of games in dating without adding literal games into the mix. Taking this input, we made sure not to overwhelm the app with too much gamification and removed it from certain parts of the app, such as messaging. After all, we wanted to encourage users to meet in person instead of spending time playing games on their phone.

After our paper prototype tests, my team digitized our designs into medium fidelity wireframes together using Figma. We then ran usability tests and continued to iterate based on the results. 

M

Medium fidelity wireframes

MAP_Instruction5.png
MAP.png
Twothruthsandalie_choice1.png

During testing, some users expressed concern that message inboxes could become flooded because there was no limitation — such as requiring a match, as in most dating apps today— before reaching out. However, our client preferred this option for the launch of the app when the user base grows, and would enact more limits as the app scales.

One of the more unique features we added to Hot & Cold is a virtual speed dating feature, which enables users to meet with multiple matches per night in 30-minute increments and not waste their night on bad matches.

Several users we tested were excited by this concept. However, some had issues with its implementation. For instance, we provided ice breaker games and a countdown timer in keeping with the gamification theme of the app, but some users noted they preferred not to have this ‘help’ during a date nor any time limitations, so we made these features optional.

Screen Shot 2020-05-07 at 1.38.08 AM.png

Finishing Touches

When our app appeared to be working smoothly for users after several iterations, we moved onto designing the high-fidelity prototype.

My team settled on a style guide based primarily on the colors blue (evoking confidence, trust, and integrity) with pink (associated with love, tranquility, and a sense of safety). We also followed the style standards of Google’s Material Design for Android, with its layered aesthetic and ‘floating action buttons.’

Main map page

Results

The final Hot & Cold app design that we shipped to our client included the following major results:

  • A streamlined user onboarding process

  • Implemented new virtual speed dating concept

    • This feature aimed to simulate meeting in-person at a bar — if either party is uninterested, they move onto the next and their night is not wasted on a bad match, as our users complained often happened.
      We also provided a function that allows users to rate their date “hot” or “cold,” and the verdict would be conveyed to both users the next day. After a date is deemed “cold,” they are removed from each other’s orbit.

Virtual speed dating

  •  Optimized user profiles and messaging

  • Enhanced dynamic experience through gamification

    • Additional gamification features include user badges to provide rewards for users and occupy them on the app if there are no matches around at the moment

  • Personalization of users’ profiles

  • Account Settings, Preferences, and Help Center

View all of the new Hot & Cold app pages —

Explore the prototype:

 

Next Steps

  • App Launch

    • Client is currently implementing our designs and will launch the new app MVP in the Google Play store 

  • AR & AI Technology

    • Harnessing AR technology and personal phone cameras to create interactive experiences and enhanced games like treasure hunts

    • Using smart AI matches based on personal data and information - removes initial heavy lifting for user

  • Venue Partnerships

    • Partner with local bars, restaurants, and event spaces to be featured as go-to destinations within map

  • Beyond Dating

    • Our research showed that many were looking to expand their communities. Having a process focused on building social circles would be vital for those who are traveling or new to a big city

Reflection

Some key takeaways from this project:

  • Different users have contradictory perceptions of the same dating app features, and so personalization is essential for attracting diverse audiences. For instance young target users who have not used apps for long still found them fun and exciting, and did not understand the purpose for setting time limits on first dates during virtual speed dating, while veterans with a few years of dating apps under their belt found this very appealing

  • Designing a dating app startup that does not yet have an audience is a unique challenge, because several elements will need to be adjusted as the app hopefully scales. While direct message limitations will be essential when there are many users, at the start we don’t want to limit an already sparse pool of potential matches