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:
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.
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.
“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.
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.
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.
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.
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.
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.
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.’
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.
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